Build a simple JavaScript Calculator for basic arithmetic operations

In this article, we will build a simple calculator using JavaScript that can carry out basic arithmetic operations.

Steps for Building Simple JavaScript Calculator

1. Select a suitable text editor. We will be using Notepad++ for now.

2. The HTML will be as follows:

<center>
  <table border="4">
    <tr>
      <td colspan="1">
        <input class="display" type="text" style="width:415px;" size="30" name="Display">
      </td>
    </tr>
    <tr>
      <td>
        <table>
          <tr>
            <td><input class="calc-btn" data-role="number" type="button" value="7"></td>
            <td><input class="calc-btn" data-role="number" type="button" value="8"></td>
            <td><input class="calc-btn" data-role="number" type="button" value="9"></td>
            <td><input class="calc-btn" data-role="operator" type="button" value="+"></td>
          </tr>
          <tr>
            <td><input class="calc-btn" data-role="number" type="button" value="4"></td>
            <td><input class="calc-btn" data-role="number" type="button" value="5"></td>
            <td><input class="calc-btn" data-role="number" type="button" value="6"></td>
            <td><input class="calc-btn" data-role="operator" type="button" value="-"></td>
          </tr>
          <tr>
            <td><input class="calc-btn" data-role="number" type="button" value="1"></td>
            <td><input class="calc-btn" data-role="number" type="button" value="2"></td>
            <td><input class="calc-btn" data-role="number" type="button" value="3"></td>
            <td><input class="calc-btn" data-role="operator" type="button" value="*"></td>
          </tr>
          <tr>
            <td><input class="clear-btn" type="button" value="C"></td>
            <td><input class="calc-btn" data-role="number" type="button" value="0"></td>
            <td><input class="calculate-btn" type="button" value="="></td>
            <td><input class="calc-btn" data-role="operator" type="button" value="/"></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

</center>

We are using button input to build the keyboard for the calculator.

3. Now we need to include JQuery library in our page. For Google JQuery CDN, use the following link:

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

4. Also the following script is to be included for the calculation and operations of the calculator.

<script type="text/javascript">
$(".calc-btn").on('click',function(){
  if($(this).attr('data-role')!='operator'){
    $(".display").val($(".display").val()+$(this).val());
  }
  else{
    if($(".display").val()!=''){
      $(".display").val($(".display").val()+$(this).val());
    }
  }
});

$(".clear-btn").on('click',function(){
  $(".display").val('');
});


$(".calculate-btn").on('click',function(){
  var expression = $(".display").val();
  $(".display").val(eval(expression));
});

</script>

The inputs are taken as either number or operator from the calculator keyboard and appended to the display input. When the button ‘=’ is clicked the calculation is done using JavaScript function eval().

The eval() function evaluates or executes an argument. If the argument is an expression, eval() evaluates the expression. If the argument is one or more JavaScript statements, eval() executes the statements.

5. For better UI experience, we will add the following CSS in our page.

<style>
input{
  font-size:2em;
  width:100;
  height:85;
}
</style>

Here’s the complete code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<style>
input{
  font-size:2em;
  width:100;
  height:85;
}
</style>

<center>
  <table border="4">
    <tr>
      <td colspan="1">
        <input class="display" type="text" style="width:415px;" size="30" name="Display">
      </td>
    </tr>
    <tr>
      <td>
        <table>
          <tr>
            <td><input class="calc-btn" data-role="number" type="button" value="7"></td>
            <td><input class="calc-btn" data-role="number" type="button" value="8"></td>
            <td><input class="calc-btn" data-role="number" type="button" value="9"></td>
            <td><input class="calc-btn" data-role="operator" type="button" value="+"></td>
          </tr>
          <tr>
            <td><input class="calc-btn" data-role="number" type="button" value="4"></td>
            <td><input class="calc-btn" data-role="number" type="button" value="5"></td>
            <td><input class="calc-btn" data-role="number" type="button" value="6"></td>
            <td><input class="calc-btn" data-role="operator" type="button" value="-"></td>
          </tr>
          <tr>
            <td><input class="calc-btn" data-role="number" type="button" value="1"></td>
            <td><input class="calc-btn" data-role="number" type="button" value="2"></td>
            <td><input class="calc-btn" data-role="number" type="button" value="3"></td>
            <td><input class="calc-btn" data-role="operator" type="button" value="*"></td>
          </tr>
          <tr>
            <td><input class="clear-btn" type="button" value="C"></td>
            <td><input class="calc-btn" data-role="number" type="button" value="0"></td>
            <td><input class="calculate-btn" type="button" value="="></td>
            <td><input class="calc-btn" data-role="operator" type="button" value="/"></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

</center>


<script type="text/javascript">

$(".calc-btn").on('click',function(){
  if($(this).attr('data-role')!='operator'){
    $(".display").val($(".display").val()+$(this).val());
  }
  else{
    if($(".display").val()!=''){
      $(".display").val($(".display").val()+$(this).val());
    }
  }
});

$(".clear-btn").on('click',function(){
  $(".display").val('');
});


$(".calculate-btn").on('click',function(){
  var expression = $(".display").val();
  $(".display").val(eval(expression));
});

</script>

For complete guidance on building the calculator, follow this video: