Building a simple calculator using HTML and JavaScript may be a fun and educational job for web developers who are just starting out.
By combining the capabilities of HTML for user interface design and JavaScript for calculation handling, you can construct an interactive and functioning calculator right in your browser.
In this post, we will lead you through the step-by-step process of creating a basic calculator from scratch while also exploring the principles of web programming along the way.
To begin, we must first create the project environment. We’ll build the basic HTML framework that will serve as the foundation for our calculator. In addition, to make the calculator more visually appealing, we’ll set up its look using CSS.
Finally, we will configure the JavaScript environment in order to add functionality to our calculator.
Table of Contents
- Steps to create a Simple calculator Using HTML and JavaScript
-
- Designing The User Interface
-
- Handling the User Input
-
- Performing the Calculation
-
- Full HTML code for a Simple HTML calculator
- Preview of Simple HTML calculator
- Conclusion
Steps to Create a Simple Calculator Using HTML and JavaScript
Here are the steps for making a simple calculator using HTML and JavaScript that can perform simple arithmetic on integer integers.
Text and button inputs are used on a table within a form element, and the OnClick event was used to place button values on the screen or to assess the numbers.
1. Designing The User Interface
The user interface (UI) is the calculator’s front face. We’ll create a clean display for displaying input and results. We’ll also provide interactive buttons for integers and operators. Our goal is to produce an intuitive and user-friendly design that enriches every aspect of calculator users.
Use the following steps in order to design the user interface of the calculator.
Step 1. Initially, create the <html> tag along with the <form> element and the <body> tag as given below.
<html>
<head><title>A Simple Calculator Using HTML</title></head>
<body>
<h3>A Simple Calculator Using HTML</h3>
<form Name="calc"> </form>
</body>
</html>
Step 2. Now, create a table within <form>……</form> tag using <table> …..</table> tag and insert two types of Input text and buttons within the table data of table row using <tr><td>….</td></tr> tag.
<table id="calc" border=2>
<tr>
<td colspan=5><input id="btn" name="display" type="text"></td>
<td style="display:none"><input name="M" type="number"></td>
</tr>
</table>
Step 3. Then, create buttons using <input> tag, and also set the “id” and “value” of these buttons within the table row having <tr><td>….</td></tr> tags as presented below.
<tr>
<td><input id="btn" type=button value="MC"></td>
<td><input id="btn" type=button value="0"></td>
<td><input id="btn" type=button value="1"></td>
<td><input id="btn" type=button value="2"></td>
<td><input id="btn" type=button value="+"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MS"></td>
<td><input id="btn" type=button value="3"></td>
<td><input id="btn" type=button value="4"></td>
<td><input id="btn" type=button value="5"></td>
<td><input id="btn" type=button value="-"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MR"></td>
<td><input id="btn" type=button value="6"></td>
<td><input id="btn" type=button value="7"></td>
<td><input id="btn" type=button value="8"></td>
<td><input id="btn" type=button value="x"></td>
</tr>
<tr>
<td><input id="btn" type=button value="M+"></td>
<td><input id="btn" type=button value="9"></td>
<td><input id="btn" type=button value="±"></td>
<td><input id="btn" type=button value="="></td>
<td><input id="btn" type=button value="/"></td>
</tr>
<tr>
<td><input id="btn" type=button value="1/x"></td>
<td><input id="btn" type=button value="."></td>
<td><input id="btn" type=button value="x2"></td>
<td><input id="btn" type=button value="√"></td>
<td><input id="btn" type=button value="C"></td>
</tr>
Step 4. Finally, add the following CSS code to give the design for the calculator with <style>…..</style> tag as given below.
<style>
#calc{width:300px;height:250px;}
#btn{width:100%;height:40px;font-size:20px;}
</style>
2. Handling the User Input
Use the following steps in order to design the user interface of the calculator.
#Step1. Assign an “onkeypress” event for a display button that has been created for displaying the input and result of the calculation as given below.
<tr>
<td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td>
<td style="display:none"><input name="M" type="number"></td>
</tr>
Step 2. Assign an OnClick event for all the buttons having numbers and arithmetic operators as given below.
<tr>
<td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td>
<td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td>
<td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td>
<td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td>
<td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td>
<td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td>
<td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td>
<td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td>
<td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td>
<td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td>
<td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td>
<td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td>
<td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td>
</tr>
3. Performing the Calculation
Assign an OnClick event for all the arithmetic operators, provide a double quote with space (“”) for the Clear(C) button, and use the eval() function to evaluate the numbers on the OnClick event as given below.
<tr>
<td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td>
<td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td>
<td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))">
</td>
<td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td>
<td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td>
<td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td>
<td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td>
<td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td>
<td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td>
</tr>
Full HTML Code for a Simple HTML Calculator
<html>
<head></head>
<body>
<h3>Simple Calculator</h3>
<br/>
<style>
#calc{width:300px;height:250px;}
#btn{width:100%;height:40px;font-size:20px;}
</style>
<form Name="calc">
<table id="calc" border=2>
<tr>
<td colspan=5><input id="btn" name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td>
<td style="display:none"><input name="M" type="number"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td>
<td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td>
<td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td>
<td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td>
<td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td>
<td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td>
<td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td>
<td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td>
<td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td>
<td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td>
<td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td>
<td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td>
<td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td>
<td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td>
<td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))">
</td>
<td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td>
<td><input id="btn" type=button value="/" OnClick="calc.display.value+='/'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td>
<td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td>
<td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td>
<td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td>
<td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td>
</tr>
</table>
</form>
</body>
</html>
Preview of Simple HTML Calculator
You can see and use the HTML calculator from the original article published on InfoTechSite.
Click here to view the HTML calculator.
Also published here