calc

by Sebastian

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>

  <div id="case">

    <div id="screen">
      <div id="output">0</div>
      <div id="chaining"></div>
    </div>

    <div id="two-rows-1">
      <div id="btns-1">
        <div class="small-button">1</div>
        <div class="small-button">2</div>
        <div class="small-button">3</div>
        <div class="small-button">+</div>
        <div class="small-button">4</div>
        <div class="small-button">5</div>
        <div class="small-button">6</div>
        <div class="small-button">-</div>
      </div>
      <div id="clear-all">C</div>
    </div>

    <div id="two-rows-2">
      <div id="btns-2">
        <div class="small-button">7</div>
        <div class="small-button">8</div>
        <div class="small-button">9</div>
        <div class="small-button">&#215;</div>
        <div class="small-button"><b>.</b></div>
        <div class="small-button">0</div>
        <div id="equal">=</div>
        <div class="small-button">&#247;</div>
      </div>
      <div id="clear-entry">
        <i class="fa fa-undo" aria-hidden="true"></i>
      </div>
    </div>

  </div>
</body>

CSS

body {
  margin: 0 auto;
  background-color: #151515;
  color: #BBB;
  background-image: url("https://s32.postimg.org/r1kt08c85/blackboard_lecturesv2.png");
}

#case {
  display: flex;
  flex-direction: column;
  height: 400px;
  width: 600px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 65px auto 10px;
  box-shadow: 2px 2px 9px rgba(0, 0, 0, 1);
}


/* Screen Part */

#screen {
  background-color: rgba(8, 84, 75, 0.2);
  height: 24.8%;
  width: 100%;
  font-size: 50px;
  color: #202040;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #BBB;
  font-family: 'PT Mono';
  letter-spacing: 2px;
  box-shadow: inset 0 0 10px rgba(20, 20, 20, 0.4);
}

#output {
  height: 75%;
  width: 95%;
  line-height: 175%;
  text-align: right;
}

#chaining {
  height: 25%;
  width: 95%;
  font-size: 13px;
  text-align: right;
  color: #888;
}


/* First two rows part */

#two-rows-1 {
  height: 37.6%;
  width: 100%;
  display: flex;
}

#btns-1 {
  height: 100%;
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-around;
}

#clear-all {
  height: 100%;
  width: 20%;
  background-color: rgba(255, 1, 1, 0.2);
  text-align: center;
  line-height: 440%;
  font-size: 200%;
  align-self: center;
}


/* Second two rows part */

#two-rows-2 {
  height: 37.6%;
  width: 100%;
  display: flex;
}

#btns-2 {
  height: 100%;
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#clear-entry {
  height: 100%;
  width: 20%;
  background-color: rgba(255, 77, 77, 0.2);
  text-align: center;
  line-height: 550%;
  align-self: center;
  font-size: 160%;
}

.small-button {
  height: 49.5%;
  width: 24.65%;
  background-color: rgba(18, 94, 85, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  justify-content: center;
  text-align: center;
  line-height: 200%;
  font-size: 200%;
}

#equal {
  height: 49.5%;
  width: 24.65%;
  background-color:...

JavaScript

var ca = document.getElementById('clear-all');
	var ce = document.getElementById('clear-entry');
	var outputVal = document.getElementById('output').innerHTML;
	var chainVal = document.getElementById('chaining');
	var lastClick;
	var lastExp = 0;
	var lastExpVal = 0;
	$(function() {

	  $('.small-button').click(function() {

	    lastClick = $(this).text();
     if ((lastClick.charCodeAt(0) < 47 || lastClick.charCodeAt(0) > 58) && outputVal.length > 0 && (outputVal.charCodeAt(outputVal.length-1) < 47 || outputVal.charCodeAt(outputVal.length-1) > 58)) {
     lastClick = "";
     }
        if (lastClick.charCodeAt(0) > 47 && outputVal === "0" && lastClick.charCodeAt(0) < 58) {
	      outputVal = "";
        lastExp = "";
	    }
	    outputVal += lastClick;
      lastExp+=lastClick;
	    $('#output').text(outputVal);
	  });

	  $('#clear-entry').click(function() {
     outputVal = lastExpVal;
      $('#output').text(outputVal);
	  });


	  $('#clear-all').click(function() {
	    $('#output').html("0");
	    outputVal = "0";
      lastExpVal = "0";
      chainVal.innerHTML = "";
	  });

	  $("#equal").click(function() {
      chainVal.innerHTML += lastExp;
      lastExp = "";
      	    spliceMultiDiv();
	    outputVal = eval(outputVal);
      
	    $('#output').text(outputVal);
	    lastExpVal = outputVal;
	  });
    
if (outputVal === Infinity) {
chainVal.innerHTML = "FALSE";
outputVal = "0";
}

	  function spliceMultiDiv() {
	    var multi = String.fromCharCode(215);
	    var divide = String.fromCharCode(247);
	    var regexp1 = new RegExp(multi, "g");
	    var regexp2 = new RegExp(divide, "g");
	    outputVal = outputVal.replace(regexp1, "*");
	    outputVal = outputVal.replace(regexp2, "/");
	    return outputVal;
	  }

	}); // end doc ready


	// eval() .text() .html()