In this blog post, we'll show you how to develop a GCD (Greatest Common Divisor) calculator using HTML and JavaScript. This calculator can help you find the largest positive integer that divides two given numbers without leaving a remainder.
Photo by Antoine Dautry on Unsplash |
What is a GCD ?
Development of GCD calculator
Setting up the HTML form
<form class="container">
<div class="form-group my-4">
<label for="">Enter 1st number</label>
<input type="number" class="form-control" placeholder="1st no" id="FirstNo" required>
</div>
<div class="form-group">
<label for="">Enter 2nd number</label>
<input type="number" class="form-control" placeholder="2nd no" id="SecondNo" required>
</div>
<button type="submit" class="btn btn-outline-secondary text-light cal">Calculate</button>
</form>
<p class="text-center my-3 mb-3" id="ans"></p>
We've used Bootstrap classes to style the form. This form includes two input fields for taking user inputs and a button to submit the form. We have also created an empty paragraph with an ID of "ans" to display the result.
Writing the JavaScript Code:
Now that we have created the HTML form, it's time to write the JavaScript code to evaluate the prefix expression and calculate the result. You can write this JavaScript in script tag within same html file or can create different js file & link that js in html file. Here is the full code:
$('.cal').click(function (e) {
var n1 = document.getElementById('FirstNo').value;
var n2 = document.getElementById('SecondNo').value;
var hcf;
if ((n1 == "") || (n2 == "") || (n1 == "" && n2 == "")) {
document.getElementById('ans').innerHTML = "Enter input";
}
else {
for (let i = 1; i <= n1 && i <= n2; i++) {
// check if is factor of both integers
if (n1 % i == 0 && n2 % i == 0) {
hcf = i;
}
}
document.getElementById('ans').innerHTML = "GCD of " + n1 + " & " + n2 + " is " + '<h4 class="text-danger" >' + hcf + '</b>';
}
e.preventDefault();
});
Breaking down this code into snippets with it's step by step explanation:
- First, we're targeting the button with class .cal and adding a click event listener to it using jQuery's .click() function.And have added e.preventDefault() function to prevent page reload:
- Following lines of code create three variables. The first two variables, n1 and n2, get the value of the HTML input elements with ids 'FirstNo' and 'SecondNo', respectively. The third variable, hcf, is initialized to undefined. :
- Below code block checks whether both input fields have been filled out. If either field is empty, or both fields are empty, the program prints an error message to the HTML element with id 'ans'. If both fields have values, the code to find the GCD is executed:
- This for loop iterates from 1 up to the smaller of n1 and n2. For each iteration, it checks whether the current number is a factor of both n1 and n2. If it is, it assigns the current number to the hcf variable. :
- We're looping through the `prefixExp` variable from the end to the beginning using a for loop. And Inside it, we're checking if the current character is a digit using the `is_numeric()` function. If it is, we're pushing it onto the stack array :
- This line of code prints the GCD to the HTML element with id 'ans'. The GCD is a concatenation of the strings "GCD of ", n1, " & ", n2, " is ", and the value of hcf. The value of hcf is wrapped in an HTML tag to give it a red color.:
$(".cal").click(function (e) {
e.preventDefault();
});
var n1 = document.getElementById('FirstNo').value;
var n2 = document.getElementById('SecondNo').value;
var hcf;
if ((n1 == "") || (n2 == "") || (n1 == "" && n2 == "")) {
document.getElementById('ans').innerHTML = "Enter input";
}
else {
// code to find GCD goes here
}
for (let i = 1; i <= n1 && i <= n2; i++) {
if (n1 % i == 0 && n2 % i == 0) {
hcf = i;
}
for (idx = prefixExp.length - 1; idx >= 0; idx--) {
if (is_numeric(parseInt(prefixExp[idx]))) {
stack.push(prefixExp[idx]);
}
}
document.getElementById('ans').innerHTML = "GCD of " + n1 + " & " + n2 + " is " + '<h4 class="text-danger" >' + hcf + '</b>';
Hope you got the idea for developing GCD calculator using html & javascript, Thanx !!
0 Comments