HTML code to create a Calculator

In this section we are going to create a calculator using html langauge. We will also use css for styling and JavaScript to make it work.You must have the basic knowledge of html language to understand the given program. You can learn HTML from our HTML Tutorial.

You must have the basic knowledge of html language to understand the given program. Please see our HTML Tutorial.

Click the Button to See Demo
calculator

HTML Program : create a calculator

<html>
<head>
<title>Html calculator</title>
</head>
<body>
<form name="calculator" >
<style>
div.container {
width: 47em;
border: 5px solid;
}
</style>
<style>
button {
color: #FFF;
background-color: ORANGE;
font-weight: bold;
}
</style>
<div class="container">
<center><p><font size="7" face="Arial" color="RED">HTML CALCULATOR</font></p></center><strong><hr/></strong>
<font size="5" face="Arial" color="BLUE"> Result: </font><input type="textfield" name="ans" value="">
<br><br>
<input type="button" value=" 1 "style="background-color:#c00; color:#fff;"
onClick="document.calculator.ans.value+='1'">
<input type="button" value=" 2 "style="background-color:#c00;
color:#fff;"onClick="document.calculator.ans.value+='2'">
<input type="button" value=" 3 "style="background-color:#c00; color:#fff;"
onClick="document.calculator.ans.value+='3'">
<input type="button" value=" + "style="background-color:#c00; color:#fff;"
onClick="document.calculator.ans.value+='+'">
<br><br>
<input type="button" value=" 4 "style="background-color:BLUE; color:#fff;"
onClick="document.calculator.ans.value+='4'">
<input type="button" value=" 5 "style="background-color:BLUE; color:#fff;"
onClick="document.calculator.ans.value+='5'">
<input type="button" value=" 6 "style="background-color:BLUE; color:#fff;"
onClick="document.calculator.ans.value+='6'">
<input type="button" value=" - "style="background-color:BLUE; color:#fff;"
onClick="document.calculator.ans.value+='-'">
<br><br>
<input type="button" value=" 7 "style="background-color:GREEN; color:#fff;"
onClick="document.calculator.ans.value+='7'">
<input type="button" value=" 8 "style="background-color:GREEN; color:#fff;"
onClick="document.calculator.ans.value+='8'">
<input type="button" value=" 9 "style="background-color:GREEN; color:#fff;"
onClick="document.calculator.ans.value+='9'">
<input type="button" value=" * "style="background-color:GREEN; color:#fff;"
onClick="document.calculator.ans.value+='*'">
<input type="button" value=" / "style="background-color:GREEN; color:#fff;"
onClick="document.calculator.ans.value+='/'">
<br><br>
<input type="button" value=" 0 "style="background-color:ORANGE; color:#fff;"
onClick="document.calculator.ans.value+='0'">
<input type="button" value=" = "style="background-color:ORANGE; color:#fff;"
onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<button type="reset" value=" Reset ">Reset</button>
<br><br>
</div>
</form>
</body>
</html>


Click the Button to See Demo


Explanation

  • In the above code I have made a working calculator which will work on all the browsers.
  • In the above code I have created a form and it's name is calculator.
  • Input types are used as the form element which played important role in making text field and buttons.
  • The value attribute defines the value of each input element. eval() function is a function that takes the expression and calculate that accordingly.
  • 'On click' is the event which occurs when the user clicks on an element.
  • In this way I have created the above calculator project in html.