Fraction Simplifier Calculator Using JavaScript HTML

Hello Friends Today, through this tutorial, I will tell you How to Write Program fractions simplifier calculator using PHP with HTML. Here’s a simple fraction simplifier calculator implemented in JavaScript and 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>Fraction Simplifier Calculator</title>
</head>
<body>
<h2>Fraction Simplifier Calculator</h2>
<label for="numerator">Numerator:</label>
<input type="number" id="numerator">
<br>
<label for="denominator">Denominator:</label>
<input type="number" id="denominator">
<br>
<button onclick="simplifyFraction()">Simplify</button>
<br>
<p id="result"></p>
<script>
function simplifyFraction() {
let numerator = parseInt(document.getElementById('numerator').value);
let denominator = parseInt(document.getElementById('denominator').value);
// Check if the input is valid
if (isNaN(numerator) || isNaN(denominator) || denominator === 0) {
document.getElementById('result').textContent = "Please enter valid numbers.";
return;
}
// Find the greatest common divisor (GCD)
let gcd = findGCD(numerator, denominator);
// Simplify the fraction
let simplifiedNumerator = numerator / gcd;
let simplifiedDenominator = denominator / gcd;
// Display the result
document.getElementById('result').textContent = `Simplified Fraction: ${simplifiedNumerator}/${simplifiedDenominator}`;
}
// Function to find the greatest common divisor (GCD) using Euclid's algorithm
function findGCD(a, b) {
return b === 0 ? a : findGCD(b, a % b);
}
</script>
</body>
</html>

This HTML page contains input fields for the numerator and denominator of a fraction. When the user clicks the “Simplify” button, the `simplifyFraction()` function is called. This function parses the input values, validates them, finds the greatest common divisor (GCD) of the numerator and denominator, and then simplifies the fraction by dividing both the numerator and denominator by their GCD. Finally, the simplified fraction is displayed to the user.

Example:-

Fraction Simplifier Calculator