Calculator

Calculator.markdown

Calculator

A Pen by Scott Kennedy on CodePen.

License.

index.html

<div class="container-fluid">
  <div class="row-fluid col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
    <div class="display col-xs-12">
      <div class="row">
        <span class="col-xs-12 br"><h1> 0</h1></span> 
      </div>
    </div>
    <div class="topOperations col-xs-12">
      <div class="row">
        <span class="col-xs-3">AC</span> 
        <span class="col-xs-3">CE</span> 
        <span class="col-xs-3">%</span> 
        <span style="background-color: tomato;" class="col-xs-3 br">÷</span> 
      </div>
    </div>
    <div class="numbers col-xs-9">
      <div class="row">
        <span class="col-xs-4">1</span>
        <span class="col-xs-4">2</span>
        <span class="col-xs-4">3</span>
        <span class="col-xs-4">4</span>
        <span class="col-xs-4">5</span>
        <span class="col-xs-4">6</span>
        <span class="col-xs-4">7</span>
        <span class="col-xs-4">8</span>
        <span class="col-xs-4">9</span>
        <span class="col-xs-8 bb">0</span>
        <span class="col-xs-4 bb">.</span>
      </div>
    </div>
    <div class="operations col-xs-3">
      <div class="row">
        <span class="col-xs-12 br">x</span>
        <span class="col-xs-12 br">-</span>
        <span class="col-xs-12 br">+</span>
        <span id="equals" class="col-xs-12 br bb">=</span>
      </div>
    </div>
  </div>
</div>

script.js

var currentSum = "";

$("span").click(function() {
  var value = ($(this).text());
  
  if(value == '='){
      currentSum = eval(currentSum);
      $( ".display h1" ).text(currentSum);
    }else if(value == "x"){
      currentSum += "*";
      $( ".display h1" ).text(currentSum);
    }else if(value == "÷"){
      currentSum += "/";
      $( ".display h1" ).text(currentSum);
    }else if(value == 'AC'){
      currentSum = "";
      $( ".display h1" ).text('0');
    }else if(value == 'CE'){
      currentSum = currentSum.substring(0, currentSum.length - 1);
      $( ".display h1" ).text(currentSum);
    }else{
      currentSum += value;
      $( ".display h1" ).text(currentSum);
    }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

*, html, body { 
  margin: 0; 
  padding: 0; 
  text-align: center;
}
body{
  background-color: #444;
  color: #fff;
}
.container-fluid{
  margin: 5% 0;
}
span{
  border-top: 1px solid #222;
  border-right: none;
  border-bottom: none;
  border-left: 1px solid #222;
  padding: 20px 0;
  text-shadow: 0 1px .5px #111;
  -webkit-box-shadow:inset 0 1px 0px .5px rgba(255,255,255,.2),
                     inset 0 -1px 0px .5px rgba(1,1,1,.2);
  box-shadow: inset 0 1px 0px .5px rgba(255,255,255,.2), 
              inset 0 -1px 0px .5px rgba(1,1,1,.2);
}
.display span{
  background-color: #333;
  text-shadow: 0 2px 3px #111;
  box-shadow: none;
}
.display h1{
  text-align: right;
}
.numbers span{
  background-color: #555;
}
.operations span{
  background-color: tomato;
}
.topOperations span{
  background-color: #444;
}
#equals{
  border-bottom: 1px solid #222;
  background-color: #ffb973;
}
.bb{
  border-bottom: 1px solid #222;
}
.br{
  border-right: 1px solid #222;

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />