Three Fraction Calculator
.calculator-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f9f9f9;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
max-width: 500px;
margin: 20px auto;
border: 1px solid #ddd;
}
.calculator-container h2 {
text-align: center;
color: #333;
margin-bottom: 20px;
font-size: 1.8em;
}
.calculator-form .input-group {
margin-bottom: 15px;
display: flex;
flex-direction: column;
}
.calculator-form label {
margin-bottom: 5px;
color: #555;
font-size: 0.95em;
}
.calculator-form input[type="number"],
.calculator-form select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1em;
width: 100%;
box-sizing: border-box;
}
.calculator-form input[type="number"]:focus,
.calculator-form select:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
.calculate-button {
background-color: #007bff;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1.1em;
width: 100%;
box-sizing: border-box;
transition: background-color 0.2s ease;
margin-top: 10px;
}
.calculate-button:hover {
background-color: #0056b3;
}
.result-container {
margin-top: 25px;
padding-top: 15px;
border-top: 1px solid #eee;
text-align: center;
}
.result-container h3 {
color: #333;
margin-bottom: 10px;
font-size: 1.4em;
}
.result-output {
background-color: #e9ecef;
padding: 15px;
border-radius: 4px;
font-size: 1.6em;
color: #007bff;
font-weight: bold;
min-height: 40px;
display: flex;
align-items: center;
justify-content: center;
word-break: break-all;
}
// Function to find the Greatest Common Divisor (GCD)
function gcd(a, b) {
a = Math.abs(a);
b = Math.abs(b);
while (b) {
var temp = b;
b = a % b;
a = temp;
}
return a;
}
// Function to simplify a fraction
function simplifyFraction(numerator, denominator) {
if (denominator === 0) {
return { num: numerator, den: 0 }; // Handle division by zero case
}
if (numerator === 0) {
return { num: 0, den: 1 };
}
var commonDivisor = gcd(numerator, denominator);
var simplifiedNum = numerator / commonDivisor;
var simplifiedDen = denominator / commonDivisor;
// Ensure denominator is positive
if (simplifiedDen < 0) {
simplifiedNum = -simplifiedNum;
simplifiedDen = -simplifiedDen;
}
return { num: simplifiedNum, den: simplifiedDen };
}
// Function to add two fractions
function addFractions(n1, d1, n2, d2) {
var resultNum = (n1 * d2) + (n2 * d1);
var resultDen = d1 * d2;
return simplifyFraction(resultNum, resultDen);
}
// Function to subtract two fractions
function subtractFractions(n1, d1, n2, d2) {
var resultNum = (n1 * d2) – (n2 * d1);
var resultDen = d1 * d2;
return simplifyFraction(resultNum, resultDen);
}
// Function to multiply two fractions
function multiplyFractions(n1, d1, n2, d2) {
var resultNum = n1 * n2;
var resultDen = d1 * d2;
return simplifyFraction(resultNum, resultDen);
}
// Function to divide two fractions
function divideFractions(n1, d1, n2, d2) {
if (n2 === 0) {
return { num: NaN, den: NaN }; // Division by zero is undefined
}
var resultNum = n1 * d2;
var resultDen = d1 * n2;
return simplifyFraction(resultNum, resultDen);
}
// Main calculation function
function calculateFractions() {
var num1 = parseFloat(document.getElementById('num1').value);
var den1 = parseFloat(document.getElementById('den1').value);
var operator1 = document.getElementById('operator1').value;
var num2 = parseFloat(document.getElementById('num2').value);
var den2 = parseFloat(document.getElementById('den2').value);
var operator2 = document.getElementById('operator2').value;
var num3 = parseFloat(document.getElementById('num3').value);
var den3 = parseFloat(document.getElementById('den3').value);
var resultDiv = document.getElementById('fractionResult');
resultDiv.innerHTML = ''; // Clear previous result
// Input validation
if (isNaN(num1) || isNaN(den1) || isNaN(num2) || isNaN(den2) || isNaN(num3) || isNaN(den3)) {
resultDiv.innerHTML = 'Please enter valid numbers for all numerators and denominators.';
return;
}
if (den1 === 0 || den2 === 0 || den3 === 0) {
resultDiv.innerHTML = 'Denominator cannot be zero.';
return;
}
var intermediateResult;
// Perform first operation
switch (operator1) {
case '+':
intermediateResult = addFractions(num1, den1, num2, den2);
break;
case '-':
intermediateResult = subtractFractions(num1, den1, num2, den2);
break;
case '*':
intermediateResult = multiplyFractions(num1, den1, num2, den2);
break;
case '/':
if (num2 === 0) {
resultDiv.innerHTML = 'Cannot divide by zero (Fraction 2 numerator is zero).';
return;
}
intermediateResult = divideFractions(num1, den1, num2, den2);
break;
default:
resultDiv.innerHTML = 'Invalid operator 1.';
return;
}
if (isNaN(intermediateResult.num) || isNaN(intermediateResult.den)) {
resultDiv.innerHTML = 'Error in intermediate calculation.';
return;
}
var finalResult;
// Perform second operation with the intermediate result and third fraction
switch (operator2) {
case '+':
finalResult = addFractions(intermediateResult.num, intermediateResult.den, num3, den3);
break;
case '-':
finalResult = subtractFractions(intermediateResult.num, intermediateResult.den, num3, den3);
break;
case '*':
finalResult = multiplyFractions(intermediateResult.num, intermediateResult.den, num3, den3);
break;
case '/':
if (num3 === 0) {
resultDiv.innerHTML = 'Cannot divide by zero (Fraction 3 numerator is zero).';
return;
}
finalResult = divideFractions(intermediateResult.num, intermediateResult.den, num3, den3);
break;
default:
resultDiv.innerHTML = 'Invalid operator 2.';
return;
}
if (isNaN(finalResult.num) || isNaN(finalResult.den)) {
resultDiv.innerHTML = 'Error in final calculation.';
return;
}
// Display result
if (finalResult.den === 1) {
resultDiv.innerHTML = finalResult.num;
} else if (finalResult.den === 0) {
resultDiv.innerHTML = 'Result is undefined (division by zero).';
}
else {
resultDiv.innerHTML = finalResult.num + ' / ' + finalResult.den;
}
}
Understanding the Three Fraction Calculator
Fractions are a fundamental part of mathematics, representing parts of a whole. When you need to perform operations involving more than two fractions, it can sometimes become a bit more complex. Our Three Fraction Calculator simplifies this process, allowing you to add, subtract, multiply, or divide three fractions sequentially.
How Fractions Work
A fraction consists of two main parts: the numerator (the top number) and the denominator (the bottom number). The numerator tells you how many parts you have, and the denominator tells you how many equal parts make up the whole.
- Proper Fraction: Numerator is less than the denominator (e.g., 1/2, 3/4).
- Improper Fraction: Numerator is greater than or equal to the denominator (e.g., 5/3, 7/7).
- Mixed Number: A whole number and a proper fraction combined (e.g., 1 1/2). Our calculator works with improper fractions, which can be converted from mixed numbers.
Operations with Fractions
1. Adding and Subtracting Fractions
To add or subtract fractions, they must have a common denominator. If they don't, you need to find the least common multiple (LCM) of the denominators and convert the fractions to equivalent fractions with that common denominator. Once they have the same denominator, you simply add or subtract the numerators and keep the denominator the same. Finally, simplify the resulting fraction.
Example: 1/2 + 1/3
- LCM of 2 and 3 is 6.
- Convert: 1/2 = 3/6, 1/3 = 2/6
- Add: 3/6 + 2/6 = 5/6
2. Multiplying Fractions
Multiplying fractions is straightforward: multiply the numerators together to get the new numerator, and multiply the denominators together to get the new denominator. Always simplify the resulting fraction.
Example: 1/2 * 1/3
- Multiply numerators: 1 * 1 = 1
- Multiply denominators: 2 * 3 = 6
- Result: 1/6 (already simplified)
3. Dividing Fractions
To divide fractions, you "keep, change, flip." Keep the first fraction as it is, change the division sign to multiplication, and flip (invert) the second fraction (swap its numerator and denominator). Then, multiply the fractions as described above.
Example: 1/2 / 1/3
- Keep 1/2.
- Change / to *.
- Flip 1/3 to 3/1.
- Multiply: 1/2 * 3/1 = 3/2
How the Three Fraction Calculator Works
Our calculator processes three fractions sequentially. It first performs the operation between Fraction 1 and Fraction 2, and then takes that intermediate result and performs the second operation with Fraction 3. This follows the standard order of operations from left to right when no parentheses are specified.
Let's use an example: Calculate (1/2 + 1/3) * 1/4
- First Operation (1/2 + 1/3):
- Fraction 1: Numerator = 1, Denominator = 2
- Operator 1: +
- Fraction 2: Numerator = 1, Denominator = 3
- Calculation: 1/2 + 1/3 = 3/6 + 2/6 = 5/6
- Intermediate Result: 5/6
- Second Operation (5/6 * 1/4):
- Intermediate Result: Numerator = 5, Denominator = 6
- Operator 2: *
- Fraction 3: Numerator = 1, Denominator = 4
- Calculation: 5/6 * 1/4 = (5*1) / (6*4) = 5/24
The final result displayed by the calculator would be 5/24.
Using the Calculator
Simply input the numerator and denominator for each of the three fractions. Select the desired operator (+, -, *, /) for the first operation (between Fraction 1 and Fraction 2) and the second operation (between the result of the first operation and Fraction 3). Click "Calculate" to see the simplified result.
This tool is perfect for students, educators, or anyone needing to quickly and accurately perform multi-step fraction calculations without the hassle of manual common denominator finding and simplification.