Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
February 18, 2022 12:55 am GMT

How to create a percentage calculator using JavaScript

In this tutorial well create 3 different types percentage calculators using JavaScript.

  • X is what % of Y?
  • What is X% of Y?
  • What is the % increase or decrease between X & Y?

Each calculator has almost identical HTML markup and the only difference in the JavaScript is the maths used to calculate the solution. If you just looking for a copy and paste solution a working HTML file with the 3 calculators can be downloaded from here.

1 X is what % of Y?

Example 50 is 20% of 250 || (50 / 250) * 100 = 20%

<form id="calc1">    <input id="calc1-num-x" type="number" /> is what percent of  <input id="calc1-num-y" type="number" /> ?  <input id="calc1-submit" type="submit" value="Calculate" />  <input id="calc1-solution" type="number" readonly="readonly" /></form>
document.getElementById("calc1-submit")  .addEventListener("click", function (e) {    e.preventDefault();    const numX = document.getElementById("calc1-num-x").value;    const numY = document.getElementById("calc1-num-y").value;    const percentage = (numX / numY) * 100;    document.getElementById("calc1-solution").value = percentage;});

2 What is X% of Y?

Example 50% of 250 = 125 || (50 / 100) * 250 = 125

<form id="calc2">  What is <input id="calc2-num-x" type="number" /> % of  <input id="calc2-num-y" type="number" /> ?  <input id="calc2-submit" type="submit" value="Calculate" />  <input id="calc2-solution" type="number" readonly="readonly" /></form>  
document.getElementById("calc2-submit")  .addEventListener("click", function (e) {    e.preventDefault();    const numX = document.getElementById("calc2-num-x").value;    const numY = document.getElementById("calc2-num-y").value;    const percentage = (numX / 100) * numY;    document.getElementById("calc2-solution").value = percentage;});

3 What is the % increase or decrease between X & Y?

Example 50 to 75 = 50% || (75 / 50) / 50 * 100 = 50%

<form id="calc3">  What is the percentage increase or decrease from  <input id="calc3-num-x" type="number" /> to  <input id="calc3-num-y" type="number" /> ?  <input id="calc3-submit" type="submit" value="Calculate" />  <input id="calc3-solution" type="number" readonly="readonly" /></form>
document.getElementById("calc3-submit")  .addEventListener("click", function (e) {    e.preventDefault();    const numX = document.getElementById("calc3-num-x").value;    const numY = document.getElementById("calc3-num-y").value;    const percentage = (numY - numX) / numX * 100;    document.getElementById("calc3-solution").value = percentage;});

For each of the calculators weve added a click event listener to the submit buttons. When these buttons are clicked the 2 numbers entered into the form are saved as variables. We then perform the percentage calculation on these numbers and output the value into the solution input field.


Original Link: https://dev.to/michaelburrows/how-to-create-a-percentage-calculator-using-javascript-515k

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To