Open In App

Percentage calculator using HTML CSS and JavaScript

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

The percentage calculator is useful for students, shopkeepers, and for solving basic mathematical problems related to percentages. In this article, we are going to learn, how to make a percentage calculator using HTML CSS, and JavaScript

Formula used:

  • What is X percent of Y is given by the formula: X percent of Y =(X/100)* Y
  • X is what percent of Y is given by the formula: X is what percent of Y= (X/Y)×100%, where X, Y > 0

Approach

  1. Input Retrieval:
    • Use document.getElementById("elementId").value to get input values.
  2. Calculation and Formatting:
    • percentage_1: Calculate the percentage and set the result in an element.
    • percentage_2: Calculate the percentage, append "%", and set the formatted result in an element.
  3. DOM Manipulation:
    • Use document.getElementById("elementId").value to set results in HTML elements.
  4. Mathematical Operations:
    • Perform basic operations (multiply, divide, add) for percentage calculations.

Example: This example shows the implementation of the above approach.

HTML 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
    <h1>Percentage Calculator</h1>

    <div>
        <h2> What is <input type="number" id="percent" />% of
            <input type="number" id="num" />?
        </h2>
        <button onclick="percentage_1()">Calculate</button><br>
        <input type="text" id="value1" readonly />
    </div>

    <div>
        <h2><input type="number" id="num1" />
            is what Percent of
            <input type="number" id="num2" />?
        </h2>
       
        <button onclick="percentage_2()">Calculate</button>
          <br>
        
        <input type="text" id="value2" readonly />
    </div>
    
    <script type="text/javascript" src="script.js"></script>
</body>

</html>
CSS 
    /* A margin and padding are provided 0 
    box-sizing border box is used to include 
    padding and border in the total width 
    and height of the element, and font-family 
    can be specified by the user */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Courier New', Courier, monospace;
    }

    /* The user display allows you to specify the
    background colour and height. The 
    display:flex property, which is aligned at the
    centre, is used to fill available free space 
    or to shrink them to prevent overflow. */
    body {
        background-color: #f7f7f7;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    /* font-weight Specifies weight of glyphs 
    in the font, their degree of blackness or 
    stroke */
    h1 {
        font-weight: 900;
        margin-bottom: 12px;
    }

    div {
        width: 480px;
        background-color: #fff;
        margin: 12px 0;
        padding: 24px;
        text-align: center;
        box-shadow: 2px 2px 8px 2px #aaa;
    }

    input[type=number] {
        width: 84px;
        font-size: 18px;
        padding: 8px;
        margin: 0px 8px 8px 8px;
    }

    /* The text-transform:uppercase property 
    causes characters to be raised to uppercase. 
    The button's font-weight, font-size, and 
    cursor type can be customised by the user. */
    button {
        text-transform: uppercase;
        font-weight: 900;
        font-size: 20px;
        margin: 12px 0;
        padding: 8px;
        cursor: pointer;
        letter-spacing: 1px;
    }

    /* The font-weight, font-size, background-color, 
    and border can all be customized by the user. 
    The border-radius property allows you to give 
    an element rounded corners.*/
    input[type=text] {
        font-size: 22px;
        padding: 8px 0;
        font-weight: 900;
        text-align: center;
        background-color: #f7f7f7;
        border: 2px solid #ccc;
        border-radius: 6px;
    }
JavaScript 
function percentage_1() {

    // Method returns the element of percent id
    let percent = document.getElementById("percent").value;
    
    // Method returns the element of num id
    let num = document.getElementById("num").value;
    document.getElementById("value1")
        .value = (num / 100) * percent;
}

function percentage_2() {

    // Method returns the element of num1 id
    let num1 = document.getElementById("num1").value;
    
    // Method returns the elements of num2 id
    let num2 = document.getElementById("num2").value;
    document.getElementById("value2")
            .value = (num1 * 100) / num2 + "%";
}

Output


Percentage calculator using HTML CSS and JavaScript

K
kunalbhade
Improve
Article Tags :

Explore

Lightbox