Percentage calculator using HTML CSS and JavaScript
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.
- Use
- 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.
- Use
- Mathematical Operations:
- Perform basic operations (multiply, divide, add) for percentage calculations.
Example: This example shows the implementation of the above approach.
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 + "%" ; } |
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Percentage Calculator</ title > < link rel = "stylesheet" href = "style.css" type = "text/css" /> </ head > < body > < h1 >Percentage Calculator</ h1 > < div > <!-- Defines a field for entering a number--> < h2 > What is < input type = "number" id = "percent" />% of < input type = "number" id = "num" />? </ h2 > <!-- onclick event is to call the function when user click on the button--> < button onclick = "percentage_1()" >Calculate</ button >< br > <!-- Read-only input field to display output and cannot be modified --> < input type = "text" id = "value1" readonly /> </ div > < div > <!-- Defines a field for entering a number --> < h2 >< input type = "number" id = "num1" /> is what Percent of < input type = "number" id = "num2" />? </ h2 > <!-- onclick event is to call the function when user click on the button --> < button onclick = "percentage_2()" >Calculate</ button > < br > <!-- Read-only input field to display output and cannot be modified --> < 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 : 100 vh; 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 */ h 1 { 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 ; } |
Output: Click here to see live code output