Hello Friends Today, through this tutorial, I will tell you How to Write Program fractions calculator using PHP with HTML. Here’s a basic example of a fractions calculator using JavaScript, HTML, and CSS:
HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fractions Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator">
<h1>Fractions Calculator</h1>
<div>
<input type="number" id="numerator1" class="fraction-input" placeholder="Numerator">
<span>/</span>
<input type="number" id="denominator1" class="fraction-input" placeholder="Denominator">
</div>
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<div>
<input type="number" id="numerator2" class="fraction-input" placeholder="Numerator">
<span>/</span>
<input type="number" id="denominator2" class="fraction-input" placeholder="Denominator">
</div>
<button onclick="calculate()">Calculate</button>
<p id="result"></p>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css):
.calculator {
width: 300px;
margin: 0 auto;
text-align: center;
}
.fraction-input {
width: 70px;
}
button {
margin-top: 10px;
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
JavaScript (script.js):
function calculate() {
// Get input values
let numerator1 = parseFloat(document.getElementById('numerator1').value);
let denominator1 = parseFloat(document.getElementById('denominator1').value);
let numerator2 = parseFloat(document.getElementById('numerator2').value);
let denominator2 = parseFloat(document.getElementById('denominator2').value);
let operator = document.getElementById('operator').value;
// Check for valid inputs
if (isNaN(numerator1) || isNaN(denominator1) || isNaN(numerator2) || isNaN(denominator2)) {
document.getElementById('result').textContent = "Please enter valid numbers.";
return;
}
// Perform calculation based on operator
let result;
switch (operator) {
case '+':
result = addFractions(numerator1, denominator1, numerator2, denominator2);
break;
case '-':
result = subtractFractions(numerator1, denominator1, numerator2, denominator2);
break;
case '*':
result = multiplyFractions(numerator1, denominator1, numerator2, denominator2);
break;
case '/':
result = divideFractions(numerator1, denominator1, numerator2, denominator2);
break;
default:
result = "Invalid operator";
}
// Display result
document.getElementById('result').textContent = result;
}
function addFractions(num1, den1, num2, den2) {
let numerator = num1 * den2 + num2 * den1;
let denominator = den1 * den2;
return simplifyFraction(numerator, denominator);
}
function subtractFractions(num1, den1, num2, den2) {
let numerator = num1 * den2 - num2 * den1;
let denominator = den1 * den2;
return simplifyFraction(numerator, denominator);
}
function multiplyFractions(num1, den1, num2, den2) {
let numerator = num1 * num2;
let denominator = den1 * den2;
return simplifyFraction(numerator, denominator);
}
function divideFractions(num1, den1, num2, den2) {
let numerator = num1 * den2;
let denominator = den1 * num2;
return simplifyFraction(numerator, denominator);
}
function simplifyFraction(num, den) {
let gcd = findGCD(num, den);
num /= gcd;
den /= gcd;
if (den < 0) {
num *= -1;
den *= -1;
}
if (den === 1) {
return num;
}
return num + '/' + den;
}
function findGCD(a, b) {
return b === 0 ? a : findGCD(b, a % b);
}
This calculator allows users to input two fractions (numerator and denominator for each), select an operation (addition, subtraction, multiplication, or division), and then calculates and displays the result in simplified form.
Example:-
Fractions Calculator
/
/