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: 700px;
margin: 30px auto;
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border: 1px solid #dee2e6;
}
h1, h2 {
color: #004a99;
text-align: center;
margin-bottom: 20px;
}
.input-group {
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
gap: 15px;
align-items: center;
}
.input-group label {
flex: 1 1 120px;
font-weight: bold;
color: #004a99;
text-align: right;
}
.input-group input[type="number"],
.input-group select {
flex: 1 1 150px;
padding: 10px 12px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 1rem;
box-sizing: border-box;
}
.fraction-input-group {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 10px;
}
.fraction-input-group label {
font-weight: bold;
color: #004a99;
margin-bottom: 5px;
text-align: center;
flex-basis: 100%;
}
.fraction-fields {
display: flex;
align-items: center;
gap: 5px;
}
.fraction-fields input[type="number"] {
width: 60px;
padding: 8px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 1rem;
text-align: center;
}
.fraction-bar {
font-size: 1.5rem;
font-weight: bold;
color: #333;
margin: 0 5px;
}
.operator-select {
margin: 0 20px;
padding: 8px 12px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 1rem;
background-color: #e9ecef;
}
.button-group {
text-align: center;
margin-top: 30px;
}
button {
background-color: #004a99;
color: white;
border: none;
padding: 12px 25px;
border-radius: 5px;
font-size: 1.1rem;
cursor: pointer;
transition: background-color 0.3s ease;
margin: 5px;
}
button:hover {
background-color: #003366;
}
#result {
margin-top: 30px;
padding: 20px;
background-color: #28a745; /* Success Green */
color: white;
text-align: center;
font-size: 1.8rem;
font-weight: bold;
border-radius: 5px;
min-height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#result.error {
background-color: #dc3545; /* Red for errors */
}
.article-content {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #dee2e6;
}
.article-content h2 {
text-align: left;
margin-bottom: 15px;
}
.article-content p, .article-content ul {
margin-bottom: 15px;
}
.article-content code {
background-color: #e9ecef;
padding: 2px 5px;
border-radius: 3px;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
@media (max-width: 600px) {
.input-group {
flex-direction: column;
align-items: stretch;
}
.input-group label {
text-align: left;
margin-bottom: 5px;
flex-basis: auto;
}
.input-group input[type="number"],
.input-group select {
width: 100%;
flex-basis: auto;
}
.operator-select {
margin: 15px auto;
width: 50%;
display: block;
}
.fraction-fields {
justify-content: center;
}
.fraction-bar {
margin: 0 10px;
}
button {
width: calc(50% – 10px);
}
}
Understanding and Using the Fraction Calculator
Fractions are a fundamental part of mathematics, representing a part of a whole. They are expressed as a ratio of two integers, a numerator (the number above the line) and a denominator (the number below the line). For example, in the fraction 1/2, 1 is the numerator and 2 is the denominator, representing one part out of two equal parts.
Why Use a Fraction Calculator?
Working with fractions, especially when performing operations like addition, subtraction, multiplication, or division, can sometimes be complex. Common challenges include:
- Finding a common denominator for addition and subtraction.
- Simplifying the resulting fraction to its lowest terms.
- Understanding how to invert and multiply for division.
This calculator simplifies these processes, providing quick and accurate results for various fractional computations.
How the Calculator Works (The Math Behind It)
Our calculator performs standard arithmetic operations on two fractions, typically represented as A/B and C/D:
1. Addition (A/B + C/D)
To add fractions, a common denominator is required. The formula is:
(A*D + C*B) / (B*D)
The result is then simplified to its lowest terms.
2. Subtraction (A/B – C/D)
Similar to addition, subtraction requires a common denominator:
(A*D - C*B) / (B*D)
The result is simplified.
3. Multiplication (A/B * C/D)
Multiplication of fractions is straightforward:
(A*C) / (B*D)
The result is simplified.
4. Division (A/B / C/D)
Division is performed by inverting the second fraction (C/D becomes D/C) and then multiplying:
(A*D) / (B*C)
The result is simplified.
Simplifying Fractions (Greatest Common Divisor – GCD)
To simplify a fraction (e.g., X/Y) to its lowest terms, we find the Greatest Common Divisor (GCD) of the numerator (X) and the denominator (Y). We then divide both the numerator and the denominator by their GCD.
For example, if the result is 12/18, the GCD of 12 and 18 is 6. Dividing both by 6 gives 2/3.
Inputting Fractions
You will see fields for the numerator and denominator for each of the two fractions. Ensure you enter the correct numbers for each part. Remember that the denominator cannot be zero.
Example Usage
Let's calculate 1/2 + 3/4:
- Numerator 1:
1
- Denominator 1:
2
- Operator:
+
- Numerator 2:
3
- Denominator 2:
4
Using the addition formula: (1*4 + 3*2) / (2*4) = (4 + 6) / 8 = 10/8.
Simplifying 10/8 by dividing both by their GCD (which is 2) gives the final result: 5/4.
The calculator handles these steps automatically, making it a valuable tool for students, educators, and anyone needing to work with fractions efficiently.
// Function to calculate the Greatest Common Divisor (GCD) using Euclidean algorithm
var gcd = function(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
var simplifyFraction = function(numerator, denominator) {
if (denominator === 0) {
return { numerator: NaN, denominator: NaN, error: "Denominator cannot be zero." };
}
if (numerator === 0) {
return { numerator: 0, denominator: 1, error: null };
}
var commonDivisor = gcd(numerator, denominator);
var simplifiedNumerator = numerator / commonDivisor;
var simplifiedDenominator = denominator / commonDivisor;
// Ensure the denominator is positive
if (simplifiedDenominator < 0) {
simplifiedNumerator = -simplifiedNumerator;
simplifiedDenominator = -simplifiedDenominator;
}
return { numerator: simplifiedNumerator, denominator: simplifiedDenominator, error: null };
}
var calculateFraction = function() {
var num1 = parseInt(document.getElementById("numerator1").value);
var den1 = parseInt(document.getElementById("denominator1").value);
var num2 = parseInt(document.getElementById("numerator2").value);
var den2 = parseInt(document.getElementById("denominator2").value);
var operator = document.getElementById("operator").value;
var resultDiv = document.getElementById("result");
// Input validation
if (isNaN(num1) || isNaN(den1) || isNaN(num2) || isNaN(den2)) {
resultDiv.innerHTML = "Please enter valid numbers for all fields.";
resultDiv.className = "error";
return;
}
if (den1 === 0 || den2 === 0) {
resultDiv.innerHTML = "Denominator cannot be zero.";
resultDiv.className = "error";
return;
}
var resultNumerator, resultDenominator;
switch (operator) {
case '+':
resultNumerator = (num1 * den2) + (num2 * den1);
resultDenominator = den1 * den2;
break;
case '-':
resultNumerator = (num1 * den2) – (num2 * den1);
resultDenominator = den1 * den2;
break;
case '*':
resultNumerator = num1 * num2;
resultDenominator = den1 * den2;
break;
case '/':
// Handle division by zero for the second fraction's numerator
if (num2 === 0) {
resultDiv.innerHTML = "Cannot divide by zero (second fraction numerator is zero).";
resultDiv.className = "error";
return;
}
resultNumerator = num1 * den2;
resultDenominator = den1 * num2;
break;
default:
resultDiv.innerHTML = "Invalid operator.";
resultDiv.className = "error";
return;
}
var simplifiedResult = simplifyFraction(resultNumerator, resultDenominator);
if (simplifiedResult.error) {
resultDiv.innerHTML = simplifiedResult.error;
resultDiv.className = "error";
} else {
if (simplifiedResult.denominator === 1) {
resultDiv.innerHTML = simplifiedResult.numerator; // Display as whole number if denominator is 1
} else {
resultDiv.innerHTML = simplifiedResult.numerator + " / " + simplifiedResult.denominator;
}
resultDiv.className = ""; // Reset class to default green
}
}
var resetCalculator = function() {
document.getElementById("numerator1").value = "1";
document.getElementById("denominator1").value = "2";
document.getElementById("numerator2").value = "3";
document.getElementById("denominator2").value = "4";
document.getElementById("operator").value = "+";
document.getElementById("result").innerHTML = "Enter fractions and choose an operation.";
document.getElementById("result").className = ""; // Reset class
}