JavaScript Calculator

JavaScript Calculator

CodePen"

<div id="calculator">
  
  <div id="screen"> 0 </div>
  
  <div>
    <button id="ac">AC</button>
    <button id="del">←</button>
    <button class="op">%</button>
    <button class="op">/</button>
  </div>
  
  <div>
    <button class="num">7</button>
    <button class="num">8</button>
    <button class="num">9</button>
    <button class="op">x</button>
  </div>
  
  <div>
    <button class="num">4</button>
    <button class="num">5</button>
    <button class="num">6</button>
    <button class="op">-</button>
  </div>
  
  <div>
    <button class="num">1</button>
    <button class="num">2</button>
    <button class="num">3</button>
    <button class="op">+</button>
  </div>
  
  <div>
    <button class="num" id="0">0</button>
    <button class="num" id=".">.</button>
    <button id="equal">=</button>
  </div>
  
</div>

body {
  background-color: #EBEBEB;
  text-align: center;
  color: white;
}

#calculator {
  margin: 80px auto;
  background-color: silver;
  width: 280px;
  padding: 4px 0px 10px 0px;
  border-radius: 10px;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.7);
}

#screen {
  text-align:right !important;
  margin: 8px 11px;
  height: 30px;
  padding: 4px 5px 4px 0px;
  background-color:#F2F2F2;
  font-size: 28px;
  border-radius: 5px;
  color: black;
}

button {
  width: 60px;
  height: 40px;
  margin-bottom: 6px;
  font-size: 20px;
  background-color: #5754EF;
  border-radius: 5px;
  color: white;
  border-style: none;
  outline: 0;
  box-shadow: 2px 2px 2px black;
}

#equal {
  width: 124px;
}

#ac, #del {
  background-color: #b30000;
}

button:hover {
  box-shadow: inset 0 -1px 1px rgba(0,0,0,0), inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px rgba(255,255,0,.5);
}
button:active {
  padding: calc(.25em + 1px) .5em calc(.25em - 1px);
  border-color: rgba(42,35,255,1);
  box-shadow: inset 0 -1px 1px rgba(0,0,0,.1), inset 0 1px 2px rgba(0,0,0,.3), inset 0 0 0 60px rgba(255,255,0,.45);
}

var x = 0;
var y = 0;
var operator = null;
var result = null;


function fixed(floater) {
    return Math.round(floater * 1000) / 1000;
}

function doMath(x, operator, y) {
  
  x = parseFloat(x);
  y = parseFloat(y);
  switch(operator) {
    case "+":
      result = fixed(x + y);
      break;
    case "-":
      result = fixed(x - y);
      break;
    case "x":
      result = fixed(x * y);
      break;
    case "/": 
      result = fixed(x / y);
      break;
    case "%":
      result = fixed(x / y * 100);
      break;
    }
  return result;
}


$("button").click(function() {
  
 
  if ($(this).attr("class") === "num" ) {
    
    if (!operator && x !== result) {
     
      if ($(this).attr("id") === "." || $(this).attr("id") === "0") {
        x = x + ($(this).text());
        $("#screen").text(x);
      }
      else {
      x = parseFloat(x + ($(this).text()));
      $("#screen").text(x);
      }
    }
   
    else if (operator) {
    
      if ($(this).attr("id") === "." || $(this).attr("id") === "0") {
        y = y + ($(this).text());
        $("#screen").text(y);
      }
      else {
      y = parseFloat(y + ($(this).text()));
      $("#screen").text(y);
      }
    }
  }
  
  
  else if ($(this).attr("class") === "op" ) {
   
    if (y) {
      doMath(x, operator, y);
      x = res;
      y = 0;
    }
    operator = $(this).text();
    $("#screen").text(operator);
  }
  
  
  else if ( operator && ($(this).attr("id") === "equal") ) {

    doMath(x, operator, y);
    x = result;
    $("#screen").text(x);
    y = 0;
    operator = null;
  }
  

  else if ($(this).attr("id") === "ac") {
    x = 0;
    y = 0;
    operator = null;
    result = null;
    $("#screen").text(x);
  }
  
  
  else if ($(this).attr("id") === "del") {
    if (x && !operator) {
      x = 0
      $("#screen").text(x);
    }
    else if (x && operator && y) {
      y = 0;
      $("#screen").text(operator);
    }
    else {
      operator = null;
      $("#screen").text(x);
    }
  }
  
});

See the Pen JavaScript Calculator by YaroslavW (@YaroslavW) on CodePen.

CodePen