#AD "Ten++ Ways to Make Money as a Developer" eBook by Florin Pop - $20

How to create a percentage calculator using JavaScript

Last modified July 26th 2021 | #js | GitHub Source Code [GitHub]

In this article we’ll 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>
Code language: HTML, XML (xml)
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; });
Code language: JavaScript (javascript)

#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>
Code language: HTML, XML (xml)
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; });
Code language: JavaScript (javascript)

#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>
Code language: HTML, XML (xml)
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; });
Code language: JavaScript (javascript)

For each of the calculators we’ve 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.

Related Posts