Zipline: Build a JavaScript Calculator

index.html

<div class="container center-block">
  <div class="col-md-4 col-md-offset-4 text-center brd wireframe">
    <h1 class="text-primary title">Javascript Calculator</h1>
    <div class="">
      <p class="well text-right displaytext" id="calcdisplay"></p>
    </div>
    <div class="keypad">
      <div class="row">
        <button class="col-xs-2 col-xs-offset-1" id="btnSeven">7</button>
        <button class="col-xs-2" id="btnEight">8</button>
        <button class="col-xs-2" id="btnNine">9</button>
        <button class="col-xs-2 col-xs-offset-2 btn-warning" id="btnDiv">÷</button>
      </div>
      <div class="row">
        <button class="col-xs-2 col-xs-offset-1" id="btnFour">4</button>
        <button class="col-xs-2" id="btnFive">5</button>
        <button class="col-xs-2" id="btnSix">6</button>
        <button class="col-xs-2 col-xs-offset-2 btn-warning" id="btnMult">x</button>
      </div>
      <div class="row">
        <button class="col-xs-2 col-xs-offset-1" id="btnOne">1</button>
        <button class="col-xs-2"  id="btnTwo">2</button>
        <button class="col-xs-2"  id="btnThree">3</button>
        <button class="col-xs-2 col-xs-offset-2 btn-warning" id="btnMin">-</button>
      </div>
      <div class="row">
        <button class="col-xs-2 col-xs-offset-1" id="btnZero">0</button>
        <button class="col-xs-2 col-xs-offset-2" id="btnFloating">.</button>
        <button class="col-xs-2 col-xs-offset-2 btn-warning" id="btnSum">+</button>
      </div>
      <div class="row" >
        <button class="col-xs-4 col-xs-offset-2 btn-info" id="btnEqual">=</button>
        <button class="col-xs-2 col-xs-offset-2 btn-danger" id="btnClear">C</button>
        <button class="col-xs-2 btn-danger" id="btnCorrectEntry">CE</button>
      </div>
      <div class="row">
        <p></p>
      </div>
    </div>
  </div>
</div>

script.js

var displayNumber = 0;
var acumulator = 0;
var showingResult = true;
var nextOperation = "";
var operation = "";

$(document).ready(function (){
  $("#calcdisplay").html(displayNumber);
});

$("#btnFloating").click(function(){
  updateDisplay(".");
});
$("#btnZero").click(function(){
  updateDisplay("0");
});
$("#btnOne").click(function(){
  updateDisplay("1");
});
$("#btnTwo").click(function(){
  updateDisplay("2");
});
$("#btnThree").click(function(){
  updateDisplay("3");
});
$("#btnFour").click(function(){
  updateDisplay("4");
});
$("#btnFive").click(function(){
  updateDisplay("5");
});
$("#btnSix").click(function(){
  updateDisplay("6");
});
$("#btnSeven").click(function(){
  updateDisplay("7");
});
$("#btnEight").click(function(){
  updateDisplay("8");
});
$("#btnNine").click(function(){
  updateDisplay("9");
});

$("#btnClear").click(function(){
  displayNumber = 0;
  acumulator = 0;
  showingResult = true;
  nextOperation = "";
  operation = "";
  $("#calcdisplay").html(displayNumber);
});
$("#btnCorrectEntry").click(function(){
  $("#calcdisplay").html("0");
  showingResult = true;
});

$("#btnSum").click(function(){
  calc("sum");
});
$("#btnMin").click(function(){
  calc("min");
});
$("#btnMult").click(function(){
  calc("mult");
});
$("#btnDiv").click(function(){
  calc("div");
});
$("#btnEqual").click(function(){
  calc("solve");
});


function updateDisplay(value){
  if (showingResult) {
    showingResult = false;
    $("#calcdisplay").html(value);
  } else {
    //Capture current text in calcdisplay text
    var currentDisplay = $("#calcdisplay").text();
    //Add value to the string
    var addedValue = currentDisplay + value;
    //Updates display
    $("#calcdisplay").html(addedValue);
  }
}

function calc(buttonPressed) {
  operation = nextOperation;
  nextOperation = buttonPressed;
  var operator = $("#calcdisplay").text();
  if (operation === "sum") {
    acumulator += parseFloat(operator);
  }
  if (operation === "min") {
    acumulator -= parseFloat(operator);
  }
  if (operation === "mult") {
    acumulator *= parseFloat(operator);
  }
  if (operation === "div") {
    acumulator /= parseFloat(operator);
  }
  if (operation === "" || operation === "solve"){
    acumulator = parseFloat(operator);
  }
  showingResult = true;
  $("#calcdisplay").html(acumulator);
}

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

* {
  font-size: 25px;
}

.wireframe {
  border: solid 3px;
  border-radius: 3%;
  background-color: silver;
}

.title{
  font-family: Pacifico;
  padding: 10px;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.keypad {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-right: 20px;
  padding-bottom: 10px;
  font-family: Exo;
  font-weight: bold;
}

.displaytext {
  color: green;
  font-size: 25px;
  border-radius: 10px;
  background-color: black;
  font-family: "Press Start 2P", VT323, Courier;
}

button {
  border-radius: 5px;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" />

Zipline: Build a JavaScript Calculator.markdown

Zipline: Build a JavaScript Calculator

A Pen by Manuel on CodePen.

License.