Use this calculator to perform basic arithmetic operations (addition, subtraction, multiplication, division) on two fractions. The result will be displayed in its simplest form, including mixed numbers where applicable.
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 simplifyFraction(numerator, denominator) {
if (denominator === 0) {
return { num: numerator, den: 0 }; // Indicate error or undefined
}
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 formatFraction(numerator, denominator) {
if (denominator === 0) {
return numerator === 0 ? "Undefined (0/0)" : "Undefined (Division by Zero)";
}
if (numerator === 0) {
return "0";
}
var simplified = simplifyFraction(numerator, denominator);
var num = simplified.num;
var den = simplified.den;
if (den === 1) {
return num.toString();
}
var whole = Math.floor(Math.abs(num) / den);
var remainder = Math.abs(num) % den;
var sign = num 0 && remainder > 0) {
return sign + whole + " " + remainder + "/" + den;
} else if (whole > 0 && remainder === 0) {
return sign + whole.toString();
} else {
return sign + Math.abs(num) + "/" + den;
}
}
function calculateFraction() {
var numerator1 = parseFloat(document.getElementById("numerator1").value);
var denominator1 = parseFloat(document.getElementById("denominator1").value);
var operation = document.getElementById("operation").value;
var numerator2 = parseFloat(document.getElementById("numerator2").value);
var denominator2 = parseFloat(document.getElementById("denominator2").value);
var resultDiv = document.getElementById("fractionResult");
if (isNaN(numerator1) || isNaN(denominator1) || isNaN(numerator2) || isNaN(denominator2)) {
resultDiv.innerHTML = "Please enter valid numbers for all fields.";
return;
}
if (denominator1 === 0 || denominator2 === 0) {
resultDiv.innerHTML = "Denominator cannot be zero.";
return;
}
var resultNum, resultDen;
switch (operation) {
case "add":
resultNum = (numerator1 * denominator2) + (numerator2 * denominator1);
resultDen = denominator1 * denominator2;
break;
case "subtract":
resultNum = (numerator1 * denominator2) – (numerator2 * denominator1);
resultDen = denominator1 * denominator2;
break;
case "multiply":
resultNum = numerator1 * numerator2;
resultDen = denominator1 * denominator2;
break;
case "divide":
if (numerator2 === 0) {
resultDiv.innerHTML = "Cannot divide by zero.";
return;
}
resultNum = numerator1 * denominator2;
resultDen = denominator1 * numerator2;
break;
default:
resultDiv.innerHTML = "Invalid operation selected.";
return;
}
resultDiv.innerHTML = formatFraction(resultNum, resultDen);
}
.fraction-calculator-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f9f9f9;
padding: 25px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
max-width: 600px;
margin: 30px auto;
border: 1px solid #e0e0e0;
}
.fraction-calculator-container h2 {
color: #333;
text-align: center;
margin-bottom: 20px;
font-size: 1.8em;
}
.fraction-calculator-container p {
color: #555;
text-align: center;
margin-bottom: 25px;
line-height: 1.6;
}
.calculator-form {
display: flex;
flex-direction: column;
gap: 15px;
}
.fraction-input-group, .operation-select-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
background-color: #fff;
padding: 15px;
border-radius: 8px;
border: 1px solid #ddd;
}
.fraction-input-group label, .operation-select-group label {
flex: 1 1 120px;
color: #444;
font-weight: bold;
font-size: 0.95em;
}
.fraction-input-group input[type="number"],
.operation-select-group select {
flex: 2 1 150px;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1em;
color: #333;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
transition: border-color 0.3s ease;
}
.fraction-input-group input[type="number"]:focus,
.operation-select-group select:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
.fraction-calculator-container button {
background-color: #007bff;
color: white;
padding: 12px 25px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.1em;
font-weight: bold;
transition: background-color 0.3s ease, transform 0.2s ease;
width: 100%;
box-sizing: border-box;
margin-top: 10px;
}
.fraction-calculator-container button:hover {
background-color: #0056b3;
transform: translateY(-2px);
}
.fraction-calculator-container button:active {
transform: translateY(0);
}
.calculator-result {
background-color: #e9f7ef;
border: 1px solid #c3e6cb;
padding: 20px;
border-radius: 8px;
margin-top: 25px;
text-align: center;
}
.calculator-result h3 {
color: #28a745;
margin-top: 0;
margin-bottom: 15px;
font-size: 1.4em;
}
#fractionResult {
font-size: 2em;
font-weight: bold;
color: #007bff;
word-wrap: break-word;
}
@media (max-width: 480px) {
.fraction-input-group, .operation-select-group {
flex-direction: column;
align-items: stretch;
}
.fraction-input-group label, .operation-select-group label {
flex: none;
width: 100%;
margin-bottom: 5px;
}
.fraction-input-group input[type="number"],
.operation-select-group select {
flex: none;
width: 100%;
}
}
Understanding Fractions and Their Operations
Fractions are a fundamental concept in mathematics, representing a part of a whole. They are written as a ratio of two numbers, a numerator (the top number) and a denominator (the bottom number), separated by a fraction bar. For example, 1/2 means one part out of two equal parts.
Components of a Fraction:
- Numerator: The number above the line, indicating how many parts of the whole are being considered.
- Denominator: The number below the line, indicating the total number of equal parts the whole is divided into. The denominator can never be zero.
Why Use a Fraction Calculator?
While basic fraction operations can be done by hand, a fraction calculator simplifies complex calculations, reduces the chance of errors, and quickly provides results in their simplest form. This is particularly useful for students, engineers, chefs, or anyone dealing with measurements and proportions.
How to Use This Calculator:
- Enter Fraction 1: Input the numerator and denominator for your first fraction. For example, for 1/2, enter '1' in "Fraction 1 Numerator" and '2' in "Fraction 1 Denominator".
- Select Operation: Choose the arithmetic operation you wish to perform: addition (+), subtraction (-), multiplication (*), or division (/).
- Enter Fraction 2: Input the numerator and denominator for your second fraction. For example, for 1/3, enter '1' in "Fraction 2 Numerator" and '3' in "Fraction 2 Denominator".
- Calculate: Click the "Calculate Fraction" button. The result will appear below, simplified and converted to a mixed number if it's an improper fraction.
Examples of Fraction Operations:
Let's look at how different operations work with fractions:
1. Addition (+)
To add fractions, they must have a common denominator. If they don't, you find the least common multiple (LCM) of the denominators, convert the fractions, and then add the numerators.
Example: 1/2 + 1/3
- Common denominator for 2 and 3 is 6.
- 1/2 becomes 3/6.
- 1/3 becomes 2/6.
- 3/6 + 2/6 = 5/6.
- Using the calculator: Enter 1, 2, +, 1, 3. Result: 5/6.
2. Subtraction (-)
Similar to addition, fractions must have a common denominator for subtraction. Once converted, subtract the numerators.
Example: 3/4 – 1/2
- Common denominator for 4 and 2 is 4.
- 1/2 becomes 2/4.
- 3/4 – 2/4 = 1/4.
- Using the calculator: Enter 3, 4, -, 1, 2. Result: 1/4.
3. Multiplication (*)
Multiplying fractions is straightforward: multiply the numerators together and multiply the denominators together. Then simplify the resulting fraction.
Example: 2/3 * 3/4
- Multiply numerators: 2 * 3 = 6.
- Multiply denominators: 3 * 4 = 12.
- Result: 6/12.
- Simplify: 6/12 = 1/2.
- Using the calculator: Enter 2, 3, *, 3, 4. Result: 1/2.
4. Division (/)
To divide fractions, you "keep, change, flip." Keep the first fraction, change the division sign to multiplication, and flip (invert) the second fraction. Then multiply as usual.
Example: 5/6 / 1/2
- Keep 5/6.
- Change / to *.
- Flip 1/2 to 2/1.
- Now multiply: 5/6 * 2/1 = 10/6.
- Simplify: 10/6 = 5/3.
- Convert to mixed number: 1 2/3.
- Using the calculator: Enter 5, 6, /, 1, 2. Result: 1 2/3.
This calculator handles all these steps automatically, providing you with accurate and simplified results for your fraction calculations.