# How to Create a Simple calculator Using HTML and JavaScript

Here are the steps to create a simple calculator using HTML and JavaScript which can evaluate simple arithmetic on integer numbers. Two types of inputs text and button are used here on a table within a form element and OnClick event was used to insert button values on the screen or to evaluate the numbers.

### Steps to create a Simple calculator Using HTML and JavaScript

1. At first Insert a <form> element within <body> tag.
2. Create a table using <table> …..</table> tag.
3. Insert two types of Input text and button within table data of table row using <tr><td>….</td></tr> tag.
4. Assign OnClick event for all the buttons having numbers and arithmetic operators.
5. Give blank value for Clear(C) button.
6. Use eval() function to evaluate the numbers on OnClick event of equal to sign button.

### Full HTML code for a Simple HTML calculator

```<html>
<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

Shuseel Baral is a web programmer and the founder of InfoTechSite has over 5 years of experience in software development, internet, SEO, blogging and marketing digital products and services is passionate about exceeding your expectations.

#### 1 Comment

1. shuseel
Please tell me how to design two inputs type=text that the question appear in the first input
and the result appear in the second one?