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;
}
.calculator-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 #e0e0e0;
}
h1, h2 {
color: #004a99;
text-align: center;
margin-bottom: 25px;
}
.input-section {
margin-bottom: 25px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.input-group {
margin-bottom: 15px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.input-group label {
font-weight: 600;
color: #004a99;
min-width: 120px; /* Ensure labels have some consistent width */
}
.input-group input[type="number"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
flex: 1; /* Allow input to grow */
min-width: 80px;
box-sizing: border-box; /* Include padding and border in the element's total width and height */
}
.fraction-inputs {
display: flex;
flex-direction: column;
gap: 5px;
flex-wrap: wrap;
}
.fraction-part {
display: flex;
align-items: center;
gap: 5px;
}
.fraction-part input {
width: 60px; /* Specific width for numerator/denominator */
}
.fraction-bar {
font-size: 1.8em;
line-height: 1;
color: #004a99;
margin: 0 2px; /* Small margin for visual separation */
}
.operator-select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f8f9fa;
font-size: 1em;
color: #333;
}
button {
display: block;
width: 100%;
padding: 12px 20px;
background-color: #004a99;
color: white;
border: none;
border-radius: 5px;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 10px;
}
button:hover {
background-color: #003366;
}
.result-section {
margin-top: 25px;
text-align: center;
background-color: #e7f3fe;
padding: 20px;
border-radius: 5px;
border: 1px solid #004a99;
}
#result {
font-size: 2.2em;
font-weight: bold;
color: #28a745;
word-wrap: break-word; /* Ensure long fractions display well */
}
.article-content {
margin-top: 40px;
padding: 25px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border: 1px solid #e0e0e0;
}
.article-content h2 {
text-align: left;
color: #004a99;
margin-bottom: 15px;
}
.article-content p, .article-content ul, .article-content ol, .article-content li {
margin-bottom: 15px;
color: #555;
}
.article-content code {
background-color: #eef;
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 {
min-width: auto;
margin-bottom: 5px;
}
.fraction-inputs {
flex-direction: row; /* Keep fraction parts horizontal */
justify-content: center;
}
.fraction-part input {
width: 50px;
}
.fraction-bar {
font-size: 1.5em;
}
.calculator-container {
padding: 20px;
}
}
Understanding and Using the Fraction Calculator
Fractions are a fundamental concept in mathematics, representing a part of a whole. They consist of two parts: a numerator (the top number) and a denominator (the bottom number), separated by a fraction bar. For example, in the fraction 1/2, '1' is the numerator and '2' is the denominator.
This calculator is designed to perform basic arithmetic operations on two fractions: addition, subtraction, multiplication, and division. Understanding these operations is crucial for various fields, including engineering, cooking, finance, and everyday problem-solving.
How Fractions Work
- Numerator: Indicates how many parts of the whole you have.
- Denominator: Indicates how many equal parts the whole is divided into. The denominator can never be zero.
- Proper Fraction: When the numerator is smaller than the denominator (e.g.,
3/4).
- Improper Fraction: When the 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.,
2 1/3). This calculator handles fractions in improper or proper form.
Operations Explained
-
Addition/Subtraction:
To add or subtract fractions, they must have a common denominator.
- If denominators are the same: Add/Subtract the numerators and keep the denominator the same. (e.g.,
1/4 + 2/4 = 3/4)
- If denominators are different: Find the least common multiple (LCM) of the denominators. Convert each fraction to an equivalent fraction with the LCM as the new denominator, then add/subtract. (e.g.,
1/2 + 1/3 = 3/6 + 2/6 = 5/6)
-
Multiplication:
Multiply the numerators together and multiply the denominators together. Simplification can often be done before or after multiplication. (e.g.,
2/3 * 3/4 = (2*3) / (3*4) = 6/12, which simplifies to 1/2)
-
Division:
To divide by a fraction, multiply by its reciprocal (invert the second fraction). (e.g.,
1/2 รท 1/4 = 1/2 * 4/1 = 4/2, which simplifies to 2)
Simplifying Fractions
The calculator aims to provide results in their simplest form. A fraction is in its simplest form when the numerator and denominator have no common factors other than 1. This is achieved by dividing both the numerator and the denominator by their greatest common divisor (GCD).
Use Cases
- Cooking: Adjusting recipe ingredient quantities (e.g., doubling a recipe that calls for
2/3 cup of flour).
- DIY Projects: Calculating material lengths or proportions.
- Sharing: Dividing items equally among a group.
- Academic Learning: Practicing and understanding fundamental math concepts.
- Financial Calculations: Calculating portions of costs or earnings, especially when dealing with percentages or ratios.
// 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(num, den) {
if (den === 0) return { num: NaN, den: NaN }; // Avoid division by zero
if (num === 0) return { num: 0, den: 1 };
var commonDivisor = gcd(num, den);
num /= commonDivisor;
den /= commonDivisor;
// Ensure the denominator is positive
if (den < 0) {
num = -num;
den = -den;
}
return { num: num, den: den };
}
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.textContent = "Error: Please enter valid numbers.";
resultDiv.style.color = "#dc3545";
return;
}
if (den1 === 0 || den2 === 0) {
resultDiv.textContent = "Error: Denominator cannot be zero.";
resultDiv.style.color = "#dc3545";
return;
}
var resultNum, resultDen;
if (operator === 'add') {
resultNum = num1 * den2 + num2 * den1;
resultDen = den1 * den2;
} else if (operator === 'subtract') {
resultNum = num1 * den2 – num2 * den1;
resultDen = den1 * den2;
} else if (operator === 'multiply') {
resultNum = num1 * num2;
resultDen = den1 * den2;
} else if (operator === 'divide') {
if (num2 === 0) {
resultDiv.textContent = "Error: Division by zero fraction.";
resultDiv.style.color = "#dc3545";
return;
}
resultNum = num1 * den2;
resultDen = den1 * num2;
} else {
resultDiv.textContent = "Error: Invalid operator.";
resultDiv.style.color = "#dc3545";
return;
}
var simplifiedResult = simplifyFraction(resultNum, resultDen);
if (isNaN(simplifiedResult.num) || isNaN(simplifiedResult.den)) {
resultDiv.textContent = "Error in calculation.";
resultDiv.style.color = "#dc3545";
} else {
if (simplifiedResult.den === 1) {
resultDiv.textContent = simplifiedResult.num;
} else {
resultDiv.textContent = simplifiedResult.num + " / " + simplifiedResult.den;
}
resultDiv.style.color = "#28a745"; // Success green
}
};
// Initialize the calculator with default values and display result
window.onload = function() {
calculateFraction();
};