Javascript Calculator

index.html

<div id="calculator">
  
  <div class="top">
    <span class="clear">C</span>
    <div class="screen"></div>
  </div>
  
  <div class="keys">
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span class="operator">+</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span class="operator">-</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span class="operator">/</span>
    <span>0</span>
    <span>.</span>
    <span class="eval">=</span>
    <span class="operator">*</span>
  </div>
</div>

Javascript Calculator.markdown

Javascript Calculator

Javascript Calculator for FreeCodeCamp

A Pen by db on CodePen.

License.

script.js

var keys = document.querySelectorAll('#calculator span');

for (var i = 0; i <keys.length; i++) {
  keys[i].onclick = function(e) {
    var input = document.querySelector('.screen');
    var inputVal = input.innerHTML;
    var btnVal = this.innerHTML;
           
    if (btnVal == 'C') {
      input.innerHTML = '';
    }
    
    else if (btnVal == "=") {
      var equation = inputVal;
      
      if(equation) {
        input.innerHTML = eval(equation);
      }
    }
    
    else {
      input.innerHTML += btnVal;
    }
  }
}

style.css

body {
  font-family: "Arial", sans-serif;
  font-weight: bold;
}

#calculator {
  width: 325px;
  height: auto;
  margin: 100px auto;
  padding: 20px 20px 9px;
  background: #555555;
  background-image: linear-gradient(
    to top right,
    #3c3c3c 45%,
    grey 50%,
    #3c3c3c 55%);
  border-radius: 15px;
  
  box-shadow: 5px 5px 0px #a5a5a5;
}

.top span.clear {
  float: left;
}

.top .screen {
  height: 36px;
  width: 200px;
  
  float: right;
  margin-right: 13px;
  padding: 0 19px;
  background: #ffffff;
  border-radius: 3px;
  
  font-size: 17px;
  line-height: 40px;
  text-align: right;
  }

.keys, .top {overflow: hidden;}

.keys span, .top span.clear {
  float: left;
  width: 66px;
  height: 36px;
  
  background: white;
  border-radius: 3px;
  
  margin: 0 7px 11px 0;
  
  line-height: 36px;
  text-align: center;
  
  box-shadow: 2px 2px 0px #d3d3d3;
  
}