JavaScript Simple Projects With Source Code - Fraction Calculator

Last Updated: 2023-05-28 10:55:55

As a beginner, you can learn javascript by building simple JavaScript projects. One of the excellent simple projects for beginners is a fraction calculator, which involves basic mathematical operations such as addition, subtraction, multiplication, and division of fractions.

In this project, you'll learn how to create a simple fraction calculator in JavaScript. This calculator will take a decimal number as input and then perform the calculation to show the result in its simplest form. This project is an excellent way to learn about basic JavaScript syntax, data types, and functions while practicing your math skills.

Also, we will provide you with the source code so that you can customize the code to gain the necessary skills to create your own projects and become proficient in JavaScript. So let's get started!

If you are a beginner and want to learn javascript from basic, please check out our other JavaScript Simple Projects With Source Code

1. Javascript Tip calculator
2. Javascript Temperature Converter
3. Javascript Length Converter
4. Javascript Percentage Calculator
5. Javascript Fraction Calculator
6. Javascript BMI Calculator
7. Javascript Speed Calculator

JavaScript Simple Projects Fraction Calculator?

A fraction calculator is a tool used to perform mathematical operations such as addition, subtraction, multiplication, and division on fractions. Fractions are mathematical expressions that represent a part of a whole number, and they are denoted by a numerator (the number above the fraction line) and a denominator (the number below the fraction line).

Fraction calculators take in two or more fractions as input and then perform the desired operation, giving the result in its simplest form. Fraction calculators are particularly useful when dealing with situations that involve parts of a whole, such as cooking, building, or financial calculations.

 

A decimal-to-fraction calculator is a tool that helps convert a decimal number to its equivalent fraction form. Decimal numbers are expressed in the base-10 numbering system, and they are typically represented with a decimal point and a series of digits to the right of the decimal point.

Converting decimal numbers to fractions can be useful in many applications, such as when you need to perform arithmetic operations involving fractions, or when you need to represent a decimal value as a more human-readable fraction. For example, 0.5 can be expressed as 1/2 in fraction form.

 

JavaScript can be used to create a decimal-to-fraction calculator on the web. This type of calculator typically takes in a decimal number as input and then performs the conversion to its equivalent fraction form. The resulting fraction can be displayed in its simplest form, meaning the numerator and denominator are reduced to their lowest possible values.

By using a decimal-to-fraction calculator, you can easily convert decimal numbers to fractions without having to perform the calculation manually, which can be time-consuming and error-prone.

 

Use of JavaScript Simple Projects Fraction Calculator

Fraction calculators can be used in many real-life situations where you need to perform mathematical operations involving fractions.

1. Cooking: When following a recipe that requires you to add fractions of ingredients, a fraction calculator can be helpful. For example, if a recipe calls for 1/4 cup of sugar and you need to double the recipe, you can use a fraction calculator to determine that you need 1/2 cup of sugar.
2. Woodworking: If you are a woodworker, you may need to cut the wood into fractional lengths. A fraction calculator can help you calculate the length of the wood you need to cut, ensuring that you get the correct size for your project.
3. Budgeting: When managing your finances, you may need to calculate fractions of a dollar, such as when calculating a tip or dividing expenses with friends. A fraction calculator can help you quickly determine how much you owe or how much you need to pay.
4. Construction: When building structures, you may need to calculate the length of a board or the amount of material needed for a project. A fraction calculator can help you make these calculations quickly and accurately, ensuring that you have the right amount of materials for the job.
5. Sewing: If you are a sewer, you may need to calculate fractional measurements when making patterns or altering garments. A fraction calculator can help you determine the correct measurements, ensuring that your garments fit properly.
6. Education: In math classes, students learn about fractions, and they need to be able to perform arithmetic operations involving fractions. A fraction calculator can be a helpful tool for students to check their work and verify their answers.

Overall, a fraction calculator can be a useful tool in a variety of real-life situations where fractions are involved. By using a fraction calculator, you can save time and ensure that your calculations are accurate.

 

Design JavaScript Simple Projects Fraction Calculator in HTML CSS 

The first step in building a decimal-to-fraction calculator is to design the user interface. We will be using HTML and CSS to create the design. Here is the code for the design:

1. Create a new HTML file and add the basic structure.
2. Create a new HTML file with a header and a body section.
3. In the body section, create a container for the calculator. You can use CSS to set the width and height of the container.
4. Create a header section within the calculator container to hold the title. Again, use CSS to style the header and set the font size and alignment.
5. Create a form within the calculator container to hold the input fields and buttons.
6. Inside the form, create two input fields for the numerator and denominator of the first fraction. Use CSS to style the input fields to align them properly.
7. Create two more input fields for the numerator and denominator of the second fraction.
8. Add buttons for performing the calculations such as addition, subtraction, multiplication, and division.
9. Style the buttons using CSS to make them look more like traditional calculator buttons.
10. Use CSS to set the font, text size, and color of the calculator display.
11. Use CSS to style the layout of the calculator and make it more visually appealing.
12. Add media queries to make the calculator responsive for different screen sizes.

That's it! By following these steps, you can create a simple fraction calculator using HTML and CSS. Once you have the design ready, you can use JavaScript to add the functionality and perform the mathematical operations on the fractions.

 

<  div class="calculator">
 <  input type="number" id="decimal" placeholder="Enter Decimal Value">
 <  button onclick="convertDecimal()">Convert< /button>
 <  p id="fraction">< /p>
< /div>

The HTML code creates a container div for the calculator. Inside the container, we have an input field where the user can enter a decimal value, a button to trigger the conversion, and a paragraph element to display the fraction result.

 

.calculator {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-top: 50px;
}
input {
 padding: 10px;
 margin: 10px;
 border: none;
 border-radius: 5px;
}
button {
 padding: 10px;
 margin: 10px;
 border: none;
 border-radius: 5px;
 background-color: #007bff;
 color: #fff;
 cursor: pointer;
}
p {
 margin: 20px;
 font-size: 20px;
}

The CSS code applies some styles to the HTML elements to create a clean and user-friendly interface. We use flexbox to center the elements in the container and add padding, margins, and colors to create a pleasing design.

 

 

JavaScript Simple Projects Fraction Calculator Example Code 

To convert a decimal to a fraction, first identify the decimal value and separate it into its whole number and decimal parts. For example, the decimal value 2.75 can be separated into 2 and .75.

Next, convert the decimal part into a fraction by taking the digits after the decimal point and using them as the numerator of the fraction, and the number 1 followed by the same number of zeros as the number of digits in the decimal part as the denominator. For example, the decimal .75 can be converted into the fraction 75/100.

Add the whole number and fraction together to get the final fraction. For example, the decimal 2.75 can be converted into the fraction 2 75/100.

Now, here's a step-by-step guide on how to write a JavaScript function to convert a decimal to a fraction:

1. Retrieve the decimal value entered by the user from the HTML input field.
2. Separate the decimal value into its whole number and decimal parts.
3. Convert the decimal part into a fraction by taking the digits after the decimal point and using them as the numerator of the fraction, and the number 1 followed by the same number of zeros as the number of digits in the decimal part as the denominator.
4. Add the whole number and fraction together to get the final fraction.
5. Display the final fraction in the HTML output element.

function convertDecimal() {
 const decimalValue = document.getElementById("decimal").value;
 const decimalRegex = /^\d+(\.\d{1,2})?$/;
 if (decimalRegex.test(decimalValue)) {
   const [whole, decimal] = decimalValue.split('.');
   const numerator = +(whole + decimal);
   const denominator = Math.pow(10, decimal.length);
   const gcf = getGCF(numerator, denominator);
   const fraction = reduceFraction(numerator/gcf, denominator/gcf);
   document.getElementById("fraction").innerHTML = fraction[0] + '/' + fraction[1];
 } else {
   alert("Invalid decimal value. Please enter a decimal with up to two decimal places");
 }
}
function getGCF(a, b) {
 if (b === 0) {
   return a;
 }
 return getGCF(b, a % b);
}
function reduceFraction(numerator, denominator) {
 const gcf = getGCF(numerator, denominator);
 return [numerator/gcf, denominator/gcf];
}

The code first validates the input value using the regular expression we discussed earlier. If the value passes the validation, the calculation function executes. The function first splits the input value into a whole number and a decimal part. It then calculates the numerator and denominator using the formula we discussed earlier.

We then use the getGCF function to find the greatest common factor between the numerator and denominator. The reduceFraction function reduces the fraction to its lowest terms by dividing the numerator and denominator by their GCF.

Finally, the function displays the fraction result on the page using the innerHTML property of the paragraph element.

How This Project Will Help Beginners to Learn JavaScript

Building a fraction calculator using JavaScript can be a great way for beginners to learn the language. Here are a few ways this project can be helpful for someone new to JavaScript:

1. Practice with HTML and CSS: Building a fraction calculator requires not only JavaScript but also HTML and CSS. By building this project, beginners can practice their HTML and CSS skills and gain experience in building web pages.
2. Introduction to JavaScript syntax: This project introduces beginners to JavaScript syntax, such as variables, conditional statements, and basic math operations. By writing the code for the calculator, beginners can gain a better understanding of how JavaScript works.
3. Building logic and problem-solving: This project involves breaking down a problem into smaller, manageable steps. Beginners can practice their problem-solving and logical thinking skills by figuring out how to convert a decimal to a fraction using JavaScript.
4. Introduction to DOM manipulation: The project requires manipulating the Document Object Model (DOM) to display the results of the fraction calculation. Beginners can learn how to use JavaScript to manipulate the DOM, which is an important part of building interactive web pages.

Overall, building a fraction calculator using JavaScript can be a great way for beginners to gain experience with the language and build practical skills that can be used in more complex projects in the future.

Conclusion

In conclusion, building a fraction calculator using JavaScript can be an excellent project for beginners to practice their skills and gain experience with the language. This project requires not only JavaScript but also HTML and CSS, which provides beginners with a chance to build web pages and practice their front-end development skills. By writing the code for the calculator, beginners can learn the basics of JavaScript syntax, problem-solving, and logical thinking. They can also gain experience in manipulating the DOM, which is an essential part of building interactive web pages. Overall, this project can provide a solid foundation for beginners to learn and grow their skills in JavaScript and web development.