JSFiddle - React, Tailwind, and code Playground

by Sebastian

HTML

<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 outputVal = document.getElementById('output').innerHTML;
var chainVal = document.getElementById('chaining');
var lastClick;
var lastExp = 0;
var lastExpVal = 0;
var multi = String.fromCharCode(215);
var divide = String.fromCharCode(247);
var regexp1 = new RegExp(multi, "g");
var regexp2 = new RegExp(divide, "g");
 var aritSign = /\+|-/g;
$(function() {

  $('.small-button').click(function() {
    if (chainVal.innerHTML === "FALSE") {
      chainVal.innerHTML = "";
    }

    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 = ""; 
    }
 var matchArit = String(outputVal).match(/[^0-9.]/g);
   if (matchArit === null) {
   matchArit = 0;
   }
   else {matchArit = matchArit.length;}
   var matchDot = String(outputVal).match(/\./g);
   if (matchDot === null) {
   matchDot = 0;
   }
   else {matchDot = matchDot.length;}
  if (lastClick.charCodeAt(0) === 48 && outputVal.charCodeAt(outputVal.length - 1) === 48 && matchDot !== (matchArit+1)) {
		 lastClick = "";
	 }
 
	 if (lastClick.charCodeAt(0) < 47 && outputVal === "0" && lastClick.charCodeAt(0) > 58) {
		 lastExp = "0";
	 }
    outputVal += lastClick;
    lastExp += lastClick;
    $('#output').text(outputVal);
    if (outputVal === Infinity || lastExp.length > 15) {
      chainVal.innerHTML = "FALSE";
      outputVal = "0";
    }
  });

  $('#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() {
   if (aritSign.test(outputVal) || regexp1.test(outputVal) ||...