Simple JavaScript Calculator code with example

Here we going to learn simple javascript calculator code. Generally for beginners, they think its difficult to writing code for calculator. But its not that much difficult in the codding.
We just know only simple things in function like add, sub, mutli and div functions in php. If you know that then the calci code is very simple, you may try it now

Step 1:
First create html file

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Simple JavaScript Calculator</title>

</head>
 
<body>
<h2>Simple JavaScript Calculator</h2>
 
<form name="calcForm">
<table>
<tr>
  <td colspan="4"><input type="text" name="display"
                         style="text-align:right"></td>
</tr>
<tr>
  <td><input type="button" name="btn1" value="1"
             onclick="calcForm.display.value += '1'"></td>
  <td><input type="button" name="btn2" value="2"
             onclick="calcForm.display.value += '2'"></td>
  <td><input type="button" name="btn3" value="3"
             onclick="calcForm.display.value += '3'"></td>
  <td><input type="button" name="btnAdd" value="+"
             onclick="calcForm.display.value += ' + '"></td>
</tr>
<tr>
  <td><input type="button" name="btn4" value="4"
             onclick="calcForm.display.value += '4'"></td>
  <td><input type="button" name="btn5" value="5"
             onclick="calcForm.display.value += '5'"></td>
  <td><input type="button" name="btn6" value="6"
             onclick="calcForm.display.value += '6'"></td>
  <td><input type="button" name="btnSub" value="-"
             onclick="calcForm.display.value += ' - '"></td>
</tr>
<tr>
  <td><input type="button" name="btn7" value="7"
             onclick="calcForm.display.value += '7'"></td>
  <td><input type="button" name="btn8" value="8"
             onclick="calcForm.display.value += '8'"></td>
  <td><input type="button" name="btn9" value="9"
             onclick="calcForm.display.value += '9'"></td>
  <td><input type="button" name="btnMul" value="x"
             onclick="calcForm.display.value += ' * '"></td>
</tr>
<tr>
  <td><input type="button" name="btnClear"
             value="C" onclick="calcForm.display.value = ''"></td>
  <td><input type="button" name="btn0" value="0"
             onclick="calcForm.display.value += '0'"></td>
  <td><input type="button" name="btnEqual" value="="
             onclick="calcForm.display.value = eval(calcForm.display.value)"></td>
  <td><input type="button" name="btnDiv" value="/"
             onclick="calcForm.display.value += ' / '"></td>
</tr>
</table>
</form>
 
</body>
</html>

Step 2: Add Css file for the page

input {
       font-family: consola, monospace;
       color: blue;
     }
     td {
       margin-left: auto;
       margin-right: auto;
       text-align: center;
     }
     table {
       border: thick solid;
     }

Step 3: Add javascript for the calci function.

window.onload = initClock;
 
function initClock() {
  var now = new Date();
  var hr  = now.getHours();
  var min = now.getMinutes();
  var sec = now.getSeconds();
  if (min < 10) min = "0" + min;  // insert a leading zero
  if (sec < 10) sec = "0" + sec;
  document.getElementById('clockDisplay').innerHTML
        = "Time is " + hr + ":" + min + ":" + sec;
  setTimeout('initClock()', 500);
}

Here the Demo –

See the Pen KpvNZR by Rajaseka G (@SekarG) on CodePen.

Share this:

About Author