HTML calculator is used for performing basic mathematical operations like Addition, subtraction, multiplication, and division.
You can find the live preview below, try it:
Readers like you help support MUO. When you make a purchase using links on our site, we may earn an affiliate commission. Read More.
Features of the Calculator
In this project, you are going to develop a calculator that will have the following features:
The code used in this project is available in a GitHub repository and is free for you to use under the MIT license. If you want to have a look at a live version of this project, you can check out this demo.
Components of the Calculator
The calculator consists of the following components:
Mathematical Operators: Addition (+), Subtraction (-), Multiplication (*), and Division (/).
Digits and Decimal Button: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, . .
Display Screen: It displays the mathematical expression and the result.
Clear Screen Button: It clears all mathematical values.
Calculate button (=): It evaluates the mathematical expression and returns the result.
Folder Structure of the Calculator Project
Open the index.html file and paste the following HTML code for the calculator:
This project uses a <table> tag to create the overall structure of the calculator. The <table> tag contains five rows which represent five horizontal sections of the calculator. Each row has a corresponding <tr> tag. Each <tr> tag contains <td> tags which hold the display screen and buttons of the calculator.
Open the styles.css file and paste the following CSS code for the calculator:
The above CSS styles the calculator. The .class selector in CSS selects elements with a specific class attribute. The .calculator and .display-box class selectors style the table structure and the display screen of the calculator respectively. @import imports the Orbitron font-family from Google fonts.
The clearScreen(), display(), and calculate() functions add functionality to the Calculator.
The clearScreen() function access the DOM using the id of the result and clear its value by assigning it an empty string. You can use DOM selectors to target various components of a page.
The display() function accesses the DOM using the id of the result and appends the value of the clicked button to the result.
The calculate() function accesses the DOM using the id of the result and evaluates the expression using the eval() function. The evaluated value of the expression is again assigned to the result.
Develop Cool Programming Projects
You can improve your coding skills by developing projects, whether you're a beginner or you're getting back into coding after some time off. Creating fully-working apps, even simple ones, can boost your confidence.
You can try out many simple projects from games (chess, tic-tac-toe, Rock Paper Scissors) to simple utilities (to-do list, weight conversion, countdown clock).
A Guide to Build a Simple Calculator.
Initial HTML Code to Include the . js and . css files. ... .
Input the Digits And Operators. This step creates buttons for digits from 0 to 9 and operators like +,-,*,/, and = <body> ... .
Add the Styling In the . css file. To beautify what you see on the screen, styling is crucial..
Converting to number data types.
let myNumber = "74"; myNumber += 3; You end up with the result 743, not 77, because myNumber is actually defined as a string. ... .
typeof myNumber; To fix the calculation, you can do this:.
let myNumber = "74"; myNumber = Number(myNumber) + 3; The result is then 77, as initially expected..
window. eval = null;.
const mainCalc = document. querySelector("#calculator");.
const inputDisplay = document. querySelector("#history");.
const outputDisplay = document. querySelector("#result");.
const allClear = document. querySelector('[data="all-clear"]');.
const backButton = document. ... .
const percentButton = document..