Fraction Calculator
:root {
–primary-blue: #004a99;
–success-green: #28a745;
–light-background: #f8f9fa;
–border-color: #dee2e6;
–text-dark: #343a40;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(–light-background);
color: var(–text-dark);
line-height: 1.6;
margin: 0;
padding: 20px;
}
.calculator-container {
max-width: 700px;
margin: 30px auto;
padding: 30px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border: 1px solid var(–border-color);
}
h1, h2 {
color: var(–primary-blue);
text-align: center;
margin-bottom: 20px;
}
.input-section, .result-section, .article-section {
margin-bottom: 30px;
padding: 20px;
border: 1px solid var(–border-color);
border-radius: 6px;
background-color: #fdfdfd;
}
.input-group {
margin-bottom: 15px;
display: flex;
flex-direction: column;
}
.input-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: var(–primary-blue);
}
.input-group input[type="number"],
.input-group input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid var(–border-color);
border-radius: 4px;
box-sizing: border-box;
font-size: 1rem;
}
.fraction-inputs {
display: flex;
gap: 10px;
align-items: center;
}
.fraction-input-group {
display: flex;
flex-direction: column;
flex: 1;
}
.fraction-input-group label {
font-size: 0.9rem;
}
.fraction-numerator, .fraction-denominator {
font-size: 1rem;
padding: 10px;
border: 1px solid var(–border-color);
border-radius: 4px;
box-sizing: border-box;
width: 100%;
text-align: center;
}
.fraction-line {
font-size: 1.5rem;
font-weight: bold;
margin: 0 5px;
}
select {
padding: 10px;
border: 1px solid var(–border-color);
border-radius: 4px;
font-size: 1rem;
background-color: white;
cursor: pointer;
}
button {
background-color: var(–primary-blue);
color: white;
border: none;
padding: 12px 20px;
border-radius: 5px;
font-size: 1.1rem;
cursor: pointer;
transition: background-color 0.3s ease;
width: 100%;
margin-top: 10px;
}
button:hover {
background-color: #003366;
}
#result {
background-color: var(–success-green);
color: white;
padding: 20px;
border-radius: 5px;
text-align: center;
font-size: 1.8rem;
font-weight: bold;
margin-top: 20px;
min-height: 60px; /* Ensure it has some height even when empty */
display: flex;
align-items: center;
justify-content: center;
overflow-wrap: break-word;
}
.article-section h2 {
color: var(–primary-blue);
text-align: left;
margin-bottom: 15px;
}
.article-section p, .article-section ul {
margin-bottom: 15px;
}
.article-section li {
margin-bottom: 8px;
}
/* Responsive adjustments */
@media (max-width: 600px) {
.calculator-container {
margin: 15px auto;
padding: 20px;
}
.fraction-inputs {
flex-wrap: wrap;
}
.fraction-input-group {
flex: 1 1 100%; /* Make inputs stack on small screens */
margin-bottom: 10px;
}
.fraction-line {
display: none; /* Hide fraction line if stacking */
}
button {
font-size: 1rem;
padding: 10px 15px;
}
#result {
font-size: 1.5rem;
}
}
Fraction Calculator
Understanding Fraction Arithmetic
Fractions are a fundamental concept in mathematics, representing a part of a whole. They are written in the form of a/b, where 'a' is the numerator (the number of parts you have) and 'b' is the denominator (the total number of equal parts the whole is divided into).
This calculator helps you perform basic arithmetic operations on two fractions: addition, subtraction, multiplication, and division.
How the Operations Work:
-
Addition (+) and Subtraction (-):
To add or subtract fractions, they must have a common denominator.
If the denominators are different (a/b + c/d), you find the least common multiple (LCM) of 'b' and 'd'. Then, you convert each fraction to an equivalent fraction with the LCM as the new denominator.
For example, to add 1/2 and 1/3:
LCM of 2 and 3 is 6.
1/2 becomes 3/6 (multiply numerator and denominator by 3).
1/3 becomes 2/6 (multiply numerator and denominator by 2).
Now you can add: 3/6 + 2/6 = 5/6.
If the denominators are already the same (a/b + c/b), you simply add or subtract the numerators: (a+c)/b.
-
Multiplication (*):
Multiplying fractions is straightforward: multiply the numerators together and multiply the denominators together.
(a/b) * (c/d) = (a*c) / (b*d).
Example: (1/2) * (3/4) = (1*3) / (2*4) = 3/8.
-
Division (/):
To divide by a fraction, you multiply by its reciprocal. The reciprocal of a fraction c/d is d/c.
(a/b) / (c/d) = (a/b) * (d/c) = (a*d) / (b*c).
Example: (1/2) / (3/4) = (1/2) * (4/3) = (1*4) / (2*3) = 4/6, which simplifies to 2/3.
After performing the operation, the result is often simplified to its lowest terms by dividing both the numerator and the denominator by their greatest common divisor (GCD).
This calculator handles these operations and simplifications automatically, making it a useful tool for students, educators, and anyone working with fractional calculations.
// Function to find 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 { num: NaN, den: NaN, error: "Division by 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 };
};
// Main calculation function
var calculateFraction = function() {
var num1 = parseInt(document.getElementById("num1").value);
var den1 = parseInt(document.getElementById("den1").value);
var num2 = parseInt(document.getElementById("num2").value);
var den2 = parseInt(document.getElementById("den2").value);
var operation = document.getElementById("operation").value;
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = ""; // Clear previous result
// Validate inputs
if (isNaN(num1) || isNaN(den1) || isNaN(num2) || isNaN(den2)) {
resultDiv.innerHTML = "Please enter valid numbers for all fields.";
return;
}
if (den1 === 0 || den2 === 0) {
resultDiv.innerHTML = "Denominator cannot be zero.";
return;
}
var resultNum, resultDen;
var finalResult;
switch (operation) {
case "add":
resultNum = (num1 * den2) + (num2 * den1);
resultDen = den1 * den2;
finalResult = simplifyFraction(resultNum, resultDen);
break;
case "subtract":
resultNum = (num1 * den2) – (num2 * den1);
resultDen = den1 * den2;
finalResult = simplifyFraction(resultNum, resultDen);
break;
case "multiply":
resultNum = num1 * num2;
resultDen = den1 * den2;
finalResult = simplifyFraction(resultNum, resultDen);
break;
case "divide":
if (num2 === 0) {
resultDiv.innerHTML = "Cannot divide by zero.";
return;
}
resultNum = num1 * den2;
resultDen = den1 * num2;
finalResult = simplifyFraction(resultNum, resultDen);
break;
default:
resultDiv.innerHTML = "Invalid operation selected.";
return;
}
if (finalResult.error) {
resultDiv.innerHTML = finalResult.error;
} else if (finalResult.den === 1) {
resultDiv.innerHTML = finalResult.num; // Display as integer if denominator is 1
} else {
resultDiv.innerHTML = finalResult.num + " / " + finalResult.den;
}
};