<!DOCTYPE html>
<html>
    <head>
        <title>Javascript Calculator</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
			*{
				user-select: none;
			}
            .container .show-calc{border: 2px solid #95A5A6; 
                                  height:50px;
                                  width:100%;
                                  font-size:25px;
                                  line-height: 50px;
                                  border-radius: 5px;
                                  padding: 0 10px;
				box-sizing: border-box;
                                }
            .container .box{width: 100%; 
                            height: 50px;
                            float: left;
                            border: 1px solid #FFF; 
                            font-size:25px;
                            line-height: 50px; 
                            text-align: center;
                            font-family: sans-serif;
                            transition: all .25s ease-in-out;
                            background-color: #26C281;
                            color: #fff; 
                            cursor: pointer;
                          }
            .container .box:hover{background: #1E8BC3}
            
            .container .box-opr{background: #F89406;}
            
            .container .box-reset,.container .box-clear{width: 100%}
            
            .container .box-reset{background: #446CB3}
            .container .box-clear{background: #F22613} 
            
			table{
				border-collapse: collapse;
			}
			table td{
				width: 100px;
			}
			
        </style>
        
    </head>
<body>
        
<div class="container">
			
<table align="center">
  <tbody>
    <tr>
      <td colspan="4"><div class="show-calc" id="sc">0</div></td>
      </tr>
    <tr>
      <td><div class="box box-reset" id="reset">CA</div></td>
      <td><div class="box box-opr">/</div></td>
      <td><div class="box box-opr">X</div></td>
      <td><div class="box box-clear" id="clear">Del</div></td>
    </tr>
    <tr>
      <td><div class="box box-num">7</div></td>
      <td><div class="box box-num">8</div></td>
      <td><div class="box box-num">9</div></td>
      <td><div class="box box-opr">-</div></td>
    </tr>
    <tr>
      <td><div class="box box-num">4</div></td>
      <td><div class="box box-num">5</div></td>
      <td><div class="box box-num">6</div></td>
      <td><div class="box box-opr">+</div></td>
    </tr>
    <tr>
      <td><div class="box box-num">1</div></td>
      <td><div class="box box-num">2</div></td>
      <td><div class="box box-num">3</div></td>
      <td rowspan="2"><div class="box box-opr" style="height: 105px; line-height: 105px;">=</div></td>
    </tr>
    <tr>
      <td colspan="2"><div class="box box-num">0</div></td>
      <td><div class="box box-num">.</div></td>
      </tr>
  </tbody>
</table>

			
              
</div>
        
<script>
            
            // create our variable
            var num1 = 0, num2 = 0, opr = "",
                divNumbers = document.querySelectorAll(".container .box-num"),
                divOpers = document.querySelectorAll(".container .box-opr"),
                showCalcBox = document.getElementById("sc"),
                resetBox = document.getElementById("reset"),
                clearBox = document.getElementById("clear"),
                // isOprClick = check if an operator is clicked
                // isEqClick = check if equal is clicked
                // fco = first click on operator
                isOprClick = false, isEqClick = false, fco = 0;
        
        // add action to all divs
        // clear show-calc box letter by letter
        
        clearBox.onclick = function(){
            showCalcBox.innerHTML = showCalcBox.innerHTML.substring(0,showCalcBox.innerHTML.length - 1);
        };
        
        // reset div to clear and start again
        resetBox.onclick = function(){
            isOprClick = false;
            isEqClick = false;
            fco = 0;
            num1 = 0;
            num2 = 0;
            opr = "";
            
            sc.innerHTML = "0";
        };
            
            // add action to show numbers
            for(var i = 0; i < divNumbers.length; i++)
            {
                divNumbers[i].onclick = function(){
                  
                  if(isOprClick)
                  {
                      num1 = parseFloat(sc.innerHTML);
                      sc.innerHTML = "";
                  }
                  // check if the text dont contain '.'
                  if(sc.innerHTML.toString().indexOf(".") === -1)
                  {
                      // if text is equal to 0 and the div pressed is not a '.'
                      if(sc.innerHTML === "0" && this.innerHTML !== "."){
                        sc.innerHTML = this.innerHTML;    
                        isOprClick = false;
                      }else{
                          sc.innerHTML = sc.innerHTML + this.innerHTML;
                          isOprClick = false;
                      }
                      
                  }else if(this.innerHTML !== ".")
                    {
                      sc.innerHTML = sc.innerHTML + this.innerHTML;
                      isOprClick = false;
                    }
                  
                 
                };
            }
            
            // add action to do operations
            for(var i = 0; i < divOpers.length; i++)
            {
                divOpers[i].onclick = function(){
                  
                    if(fco === 0)
                    {
                        fco++;
                        num1 = parseFloat(sc.innerHTML);
                        // get the operator
                        opr = this.innerHTML;
                        isOprClick = true;
                    }
                    else{
                        if(this.innerHTML !== "="){// if the clicked div is not '='
                            if(!isEqClick){// if '=' is not already clicked
                                
                                num2 = parseFloat(sc.innerHTML);
                                sc.innerHTML = calc(opr, num1, num2);
                                opr  = this.innerHTML;
                                num2 = parseFloat(sc.innerHTML);
                                isOprClick = true;
                                isEqClick = false;
                            }else{
                                isEqClick = false;
                                opr = this.innerHTML;
                            }
                        }else{
                                num2 = parseFloat(sc.innerHTML);
                                sc.innerHTML = calc(opr, num1, num2);
                                opr  = this.innerHTML;
                                num1 = parseFloat(sc.innerHTML);
                                isOprClick = true;
                                isEqClick = true;
                        }
                    }
        
                };
            }
            
            // create a calc function to do the operations
            function calc(op,n1,n2)
            {
                var result = 0;
                
                switch(op){
                    case"+":
                        result = n1 + n2;
                        break;
                   case"-":
                        result = n1 - n2;
                        break;  
                    case"X":
                        result = n1 * n2;
                        break;
                    case"/":
                        if(n2 > 0)
                        result = n1 / n2;
                    
                        break;
                }
                return result;
            }
            
            
        </script>
        
</body>
</html>