Calculator with Fractions Button

Fraction Calculator body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; color: #333; line-height: 1.6; margin: 0; padding: 20px; } .fraction-calc-container { max-width: 800px; margin: 30px auto; background-color: #ffffff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } h1, h2 { color: #004a99; text-align: center; margin-bottom: 20px; } .input-group { margin-bottom: 20px; padding: 15px; border: 1px solid #e0e0e0; border-radius: 5px; background-color: #fdfdfd; } .input-group label { display: block; margin-bottom: 8px; font-weight: bold; color: #004a99; } .input-group input[type="number"], .input-group select { width: calc(100% – 20px); /* Account for padding */ padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; box-sizing: border-box; /* Include padding and border in the element's total width and height */ } .fraction-inputs { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; } .fraction-part { display: flex; flex-direction: column; align-items: center; flex: 1; } .fraction-part input { width: 100%; text-align: center; } .fraction-line { height: 2px; background-color: #333; width: 100%; margin: 5px 0; } .controls { text-align: center; margin-top: 30px; } button { background-color: #004a99; color: white; border: none; padding: 12px 25px; font-size: 1.1rem; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; margin: 5px; } button:hover { background-color: #003366; } #result { margin-top: 30px; padding: 20px; background-color: #e7f3ff; border: 1px solid #b3d7ff; border-radius: 5px; text-align: center; font-size: 1.8rem; font-weight: bold; color: #004a99; } .article-section { margin-top: 40px; background-color: #ffffff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .article-section h2 { text-align: left; color: #004a99; margin-bottom: 15px; } .article-section p, .article-section ul { margin-bottom: 15px; } .article-section code { background-color: #eef1f5; padding: 2px 6px; border-radius: 3px; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; } @media (max-width: 600px) { .fraction-inputs { flex-direction: column; align-items: stretch; } .fraction-part { width: 100%; } button { font-size: 1rem; padding: 10px 20px; } #result { font-size: 1.5rem; } }

Fraction Calculator

Result

Understanding Fraction Arithmetic

Fractions represent a part of a whole. They consist of a numerator (the top number) and a denominator (the bottom number), separated by a fraction line.

Core Operations

This calculator performs the four basic arithmetic operations on two fractions:

1. Addition (a/b + c/d)

To add two fractions, they must have a common denominator. The formula is:

(a*d + c*b) / (b*d)

Example: 1/2 + 3/4

Common denominator is 2 * 4 = 8.

(1*4 + 3*2) / (2*4) = (4 + 6) / 8 = 10/8

This can be simplified to 5/4.

2. Subtraction (a/b - c/d)

Similar to addition, a common denominator is needed. The formula is:

(a*d - c*b) / (b*d)

Example: 3/4 - 1/2

Common denominator is 4 * 2 = 8.

(3*2 - 1*4) / (4*2) = (6 - 4) / 8 = 2/8

This can be simplified to 1/4.

3. Multiplication (a/b * c/d)

Multiplication is straightforward: multiply the numerators together and the denominators together.

(a*c) / (b*d)

Example: 1/2 * 3/4

(1*3) / (2*4) = 3/8

4. Division (a/b ÷ c/d)

Dividing by a fraction is the same as multiplying by its reciprocal (inverse).

a/b * d/c = (a*d) / (b*c)

Example: 1/2 ÷ 3/4

This is equivalent to 1/2 * 4/3.

(1*4) / (2*3) = 4/6

This can be simplified to 2/3.

Simplification (Reducing Fractions)

After performing an operation, it's common practice to simplify the resulting fraction to its lowest terms. This is done by finding the Greatest Common Divisor (GCD) of the numerator and the denominator, and then dividing both by the GCD.

For example, the GCD of 10 and 8 is 2. Dividing both by 2 gives 5/4.

Use Cases

Fraction arithmetic is fundamental in many areas:

  • Cooking and Baking: Recipes often use fractional measurements (e.g., 1/2 cup, 3/4 teaspoon).
  • Mathematics: Essential for algebra, calculus, and various mathematical concepts.
  • Engineering and Construction: Measurements and calculations involving proportions.
  • Finance: Though often expressed as decimals, underlying concepts can involve fractions (e.g., stock prices).
  • Everyday Measurements: Dividing items, calculating portions, etc.

This calculator provides a quick and accurate way to perform these essential calculations.

// Function to calculate Greatest Common Divisor (GCD) using Euclidean algorithm function gcd(a, b) { a = Math.abs(a); b = Math.abs(b); while(b) { var t = b; b = a % b; a = t; } return a; } // Function to simplify a fraction function simplifyFraction(numerator, denominator) { if (denominator === 0) { return { num: NaN, den: NaN, error: "Denominator cannot be zero." }; } if (numerator === 0) { return { num: 0, den: 1, error: null }; } var commonDivisor = gcd(numerator, denominator); var simplifiedNum = numerator / commonDivisor; var simplifiedDen = denominator / commonDivisor; // Ensure the denominator is positive if (simplifiedDen < 0) { simplifiedNum = -simplifiedNum; simplifiedDen = -simplifiedDen; } return { num: simplifiedNum, den: simplifiedDen, error: null }; } // Function to display the fraction, handling mixed numbers and errors function formatResult(num, den) { if (isNaN(num) || isNaN(den)) { return "Invalid Input"; } if (den === 0) { return "Error: Division by zero"; } if (num === 0) { return "0"; } var commonDivisor = gcd(num, den); var simplifiedNum = num / commonDivisor; var simplifiedDen = den / commonDivisor; if (simplifiedDen = simplifiedDen) { var wholePart = Math.floor(simplifiedNum / simplifiedDen); var remainderNum = simplifiedNum % simplifiedDen; if (remainderNum === 0) { return wholePart.toString(); } // Ensure remainder numerator is positive if whole part is positive, and negative if whole part is negative if (wholePart 0) { remainderNum = -remainderNum; } var remainderAbsDen = Math.abs(simplifiedDen); var common = gcd(Math.abs(remainderNum), remainderAbsDen); remainderNum /= common; var remainderAbsDenFinal = remainderAbsDen / common; // Adjust signs if needed after simplification of remainder if (remainderNum < 0 && remainderAbsDenFinal 0 && remainderAbsDenFinal < 0) { remainderNum = -remainderNum; remainderAbsDenFinal = -remainderAbsDenFinal; } return wholePart + " " + Math.abs(remainderNum) + "/" + remainderAbsDenFinal; } else { var common = gcd(Math.abs(simplifiedNum), simplifiedDen); var finalNum = simplifiedNum / common; var finalDen = simplifiedDen / common; // Ensure denominator is positive if (finalDen < 0) { finalNum = -finalNum; finalDen = -finalDen; } return finalNum + "/" + finalDen; } } function calculateFraction(operation) { var num1 = parseFloat(document.getElementById("num1").value); var den1 = parseFloat(document.getElementById("den1").value); var num2 = parseFloat(document.getElementById("num2").value); var den2 = parseFloat(document.getElementById("den2").value); var resultDiv = document.getElementById("result"); // Input validation if (isNaN(num1) || isNaN(den1) || isNaN(num2) || isNaN(den2)) { resultDiv.textContent = "Please enter valid numbers."; return; } if (den1 === 0 || den2 === 0) { resultDiv.textContent = "Denominator cannot be zero."; return; } var resultNum, resultDen; switch(operation) { case '+': resultNum = (num1 * den2) + (num2 * den1); resultDen = den1 * den2; break; case '-': resultNum = (num1 * den2) – (num2 * den1); resultDen = den1 * den2; break; case '*': resultNum = num1 * num2; resultDen = den1 * den2; break; case '/': if (num2 === 0) { resultDiv.textContent = "Error: Division by zero fraction."; return; } resultNum = num1 * den2; resultDen = den1 * num2; break; default: resultDiv.textContent = "Unknown operation."; return; } var simplified = simplifyFraction(resultNum, resultDen); if (simplified.error) { resultDiv.textContent = simplified.error; } else { resultDiv.textContent = formatResult(simplified.num, simplified.den); } } function resetCalculator() { document.getElementById("num1").value = "1"; document.getElementById("den1").value = "2"; document.getElementById("num2").value = "3"; document.getElementById("den2").value = "4"; document.getElementById("result").textContent = "Result"; } // Initial calculation on load if values are present (optional) // window.onload = function() { // calculateFraction('+'); // Or any default operation // };

Leave a Comment