Simple Calculator using JavaScript

How to Bulid a Calculator using JavaScript

Calculator is a widely used device in our daily life to perform various mathematical operations. In this we develop the following mathematical operations:

  • + : Addition
  • - : Subtraction
  • * : Multiplication
  • / : Division
  • % : This operator is in between the expression it can be act as modulo-division operator. If it placed at the end of expression which calculates percentage.

Other functionalities in our calculator are:

  • = : Evaluting expression
  • AC : All Clear
  • <- : Delete
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Calculator</title>
  <style type="text/css">
    input[type='button']{
      font-family: 'Courier New';
      font-size: 20px;
      font-weight: bold;
      width: 50px;
      height: 50px;
      border-style: solid;
      border-color: cyan;
      background-color: #FFFFFF;
    }
    input[type='text']{
      font-family: 'Courier New';
      font-size: 28px;
      width: 260px;
      height: 50px;
      text-align: right;
    }
  </style>
</head>
<body>
<script type="text/javascript">
  var expr = '', lastOp='';
 
  function Clear(){
    document.getElementById('res').value = '';
    expr = '';
  }
 
  function Expression(op){
    if(lastOp=='='){
      lastOp = '';
      if(op>='0' && op<='9' || op=='00'){
        expr = '';
      }
    }
    if(op=='=' && expr[expr.length-1]>='0' && expr[expr.length-1]<='9'){
      expr = (eval(expr)).toString();
      lastOp = '=';
    }else if(op=='=' && expr[expr.length-1]=='%'){
      expr = (eval(expr.substring(0,expr.length-1))/100).toString();
      lastOp = '=';
    }else{
      expr = expr + op;
    }
    document.getElementById('res').value = expr;
  }
 
  function Delete(){
    expr = expr.substring(0,expr.length-1);
    document.getElementById('res').value = expr;
  }
</script>

<form name="Calcform" align="center">
  <table align="center" cellpadding="10px;">
    <tr>
      <td colspan="4"><input type="text" id="res" value="" readonly /></td>
    </tr>
    <tr>
      <td><input type="button" name="clr" value="AC" onclick="Clear()" style="background-color: #FF0000;color: #FFFFFF;"/></td>
      <td><input type="button" name="div" value="*" onclick="Expression(this.value)" /></td>
      <td><input type="button" name="mul" value="/" onclick="Expression(this.value)" /></td>
      <td><input type="button" name="sub" value="%" onclick="Expression(this.value)" /></td>
    </tr>
    <tr>
      <td><input type="button" name="7" value="7" onclick="Expression(this.value)" /></td>
      <td><input type="button" name="8" value="8" onclick="Expression(this.value)" /></td>
      <td><input type="button" name="9" value="9" onclick="Expression(this.value)" /></td>
      <td><input type="button" name="add" value="-" onclick="Expression(this.value)" /></td>
    </tr>
    <tr>
      <td><input type="button" name="4" value="4" onclick="Expression(this.value)" /></td>
      <td><input type="button" name="5" value="5" onclick="Expression(this.value)" /></td>
      <td><input type="button" name="6" value="6" onclick="Expression(this.value)" /></td>
      <td><input type="button" name="add" value="+" onclick="Expression(this.value)" /></td>
    </tr>
    <tr>
      <td><input type="button" name="1" value="1" onclick="Expression(this.value)" /></td>
      <td><input type="button" name="2" value="2" onclick="Expression(this.value)" /></td>
      <td><input type="button" name="3" value="3" onclick="Expression(this.value)" /></td>
      <td><input type="button" name="equal" value="=" onclick="Expression(this.value)" /></td>
    </tr>
    <tr>
      <td><input type="button" name="0" value="0" onclick="Expression(this.value)" /></td>
      <td><input type="button" name="00" value="00" onclick="Expression(this.value)" /></td>
      <td><input type="button" name="dot" value="." onclick="Expression(this.value)" /></td>
      <td><input type="button" name="del" value="<-" onclick="Delete()" /></td>
    </tr>
  </table>
</form>
</body>
</html>
Test Here
Posted by