Create Calculator using HTML, CSS and JavaScript

In this tutorial,we are going to create a calculator. We need to create a basic structure using HTML, style it using CSS and make it work using JavaScript, which works on browser.

This calculator will only have the division, multiplication, addition and subtraction operations but you can easily include more functions if you need.

You can also use keyboard number keys to calculate the value. Input type are included in the code for a form which makes ‘textfield’ and ‘button’. Every input field is specified with attribute value. The  attribute value specifies the value of an <input> element. Eval() function takes the expression and evaluates it accordingly. ‘On click’ is the event. It occurs when  the user clicks on an element. 

HTML CODE:

 The following  code is to make html calculator.

<div align="center">
<form onsubmit="javascript:cal(document.getElementById('valueshow').value);return false;">
<table align="center">
<tbody>
<tr>
<td colspan="4"><input id="valueshow" type="text" value="0" />
</tr>
<tr>
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="1" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="2" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="3" />
<td><input class="bgoperationcolor" onclick="cals(this.value);" type="button" value="/" />
</tr>
<tr>
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="4" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="5" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="6" />
<td><input class="bgoperationcolor" onclick="cals('*');" type="button" value="x" />
</tr>
<tr>
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="7" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="8" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="9" />
<td><input class="bgoperationcolor" onclick="cals(this.value);" type="button" value="-" />
</tr>
<tr>
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="0" />
<td><input class="bgcolornumber" onclick="cals(this.value);" type="button" value="." />
<td><input class="bgclear" onclick="cals(this.value);" type="button" value="C" />
<td><input class="bgoperationcolor" onclick="cals(this.value);" type="button" value="+" />
</tr>
<tr>
<td colspan="4"><input class="equal" onclick="cal(document.getElementById('valueshow').value);" type="button" value="=" />
</td>
</tr>
</tbody>
</table>
</form>
</div>

Most of the HTML is coding for all the input buttons and their associated onclick event handlers. All the buttons, except for the = button, will call the cal JavaScript when clicked and passes it’s associated value. The = button calls the calculate JavaScript function and passes the value that is in the text input which represents the string of numbers and operators that were pushed. 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.

CSS CODE:

//div control the all calculator component like (buttons, text field ). It also control the left, top margin of calculator.
div {
    width: 500px;
    margin-left: 30%;
    margin-top: 5%
}
table {
    width: 100%;
    border: 2px solid #fff;
    box-shadow: 0 0 2px 1px #f1f1f1;
}
input[type="button"] {
    border: none;
    width: 100%;
    padding: 10px;
    font-size: 60px;
    outline: none;
    height: 90px;
    transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
input[type="text"] {
    border: none;
    width: 100%;
    height: 100px;
    padding: 10px;
    font-size: 70px;
    outline: none;
    font-weight: normal;
    color: #555
}
 
//.bgcolornumber class is use for all button number buttons (0-9)
.bgcolornumber {
    background-color: #f1f1f1;
    color: #333;
    transition: all 0.3s ease-in-out;
}
.bgclear {
    background: #CC0000;
    color: #f9f9f9;
    transition: all 0.3s ease-in-out;
}
 
//.bgoperationcolor is use for all operation buttons (+,-,*,/)
.bgopeationcolor {
    background-color: #663399;
    color: #f9f9f9;
    transition: all 0.3s ease-in-out;
}
.equal {
    background-color: #66CC33;
    color: #f9f9f9;
    transition: all 0.3s ease-in-out;
}
.bgcolornumber:hover {
    background-color: #222;
    color: #f5f5f5;
    transition: all 0.3s ease-in-out;
}
.bgclear:hover {
    background-color: #FF0000;
    color: #f5f5f5;
    transition: all 0.3s ease-in-out;
}
.bgoperationcolor:hover {
    background-color: #0033CC;
    ;
    color: #f9f9f9;
    transition: all 0.3s ease-in-out;
}
.equal:hover {
    background-color: #66FF00;
    transition: all 0.3s ease-in-out;
}
input[type="text"]:active {
    font-size: 75px;
}

JAVASCRIPT CODE:
Here is the JavaScript code for the 2 functions:

<script type="text/javascript">
function cals(buttonValue) 
{
if (buttonValue == 'C') 
{
   document.getElementById('valueshow').value = '0';
}
else
  {
    if(document.getElementById('valueshow').value == '0') 
 {
  
   document.getElementById('valueshow').value = buttonValue;
}
  
  else
   {
    
    document.getElementById('valueshow').value += buttonValue;
   }
  }
 }
  function cal(equation)  
   
  {
  var answer = eval(equation);
document.getElementById('valueshow').value = answer;
 }
 </script>

The cal function does 2 things for us. If the user clicks on the C button or the clear button, it accesses the text input object, which represents our calculator screen, via the DOM . Once it is accessed, the value inside the text input is set to ” (2 single quotes) which is an empty string. This will basically remove whatever string is already inside the text input. If the user clicks on any other button, the function will access the text input object and append the value that was passed over to whatever is already in our text input. This allows us to build our string with numbers and operators.

The eval() function treats the string as if it were JavaScript code and executes it and returns the results. The function will then access the text input object and replace whatever the current value is with the answer from the eval() function.