Percentage calculator using HTML CSS and JavaScript

Last Updated : 18 Apr, 2025

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

Input Retrieval:
- Use document.getElementById("elementId").value to get input values.
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.
DOM Manipulation:
- Use document.getElementById("elementId").value to set results in HTML elements.
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 + "%";
}