JSFiddle - React, Tailwind, and code Playground

by Ruchi Samdariya

HTML

<h1>JavaScript Calculator</h1>
<p class="warning">Don't divide by zero</p>

<div id="calculator" class="calculator">

  <button id="clear" class="clear">C</button>

  <div id="viewer" class="viewer">0</div>

  <button class="num" data-num="7">7</button>
  <button class="num" data-num="8">8</button>
  <button class="num" data-num="9">9</button>
  <button data-ops="plus" class="ops">+</button>

  <button class="num" data-num="4">4</button>
  <button class="num" data-num="5">5</button>
  <button class="num" data-num="6">6</button>
  <button data-ops="minus" class="ops">-</button>

  <button class="num" data-num="1">1</button>
  <button class="num" data-num="2">2</button>
  <button class="num" data-num="3">3</button>
  <button data-ops="times" class="ops">*</button>

  <button class="num" data-num="0">0</button>
  <button class="num" data-num=".">.</button>
  <button id="equals" class="equals" data-result="">=</button>
  <button data-ops="divided by" class="ops">/</button>
</div>

<button id="reset" class="reset">Reset Universe?</button>

CSS

html {
  background: #100a1c;
  background-image:
    radial-gradient(50% 30% ellipse at center top, #201e40 0%, rgba(0,0,0,0) 100%),
    radial-gradient(60% 50% ellipse at center bottom, #261226 0%, #100a1c 100%);
  background-attachment: fixed;
  color: #6cacc5;
}

body {
  color: #6cacc5;
  font: 300 18px/1.6 "Source Sans Pro",sans-serif;
  margin: 0;
  padding: 5em 0 2em;
  text-align: center;
}

h1 {
  font-weight: 300;
  margin: 0;
}


.warning {
  background: -webkit-linear-gradient(45deg,  #c97874 10%, #463042 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #8c5059;
  font-weight: 400;
  margin: 0 auto 6em;
  max-width: 9em;
}

.calculator {
  font-size: 28px;
  margin: 0 auto;
  width: 10em;
  
  &::before,
  &::after {
    content: " ";
    display: table;
  }
  
  &::after {
    clear: both;
  }
}


.broken {
  animation: broken 2s;
  transform: translate3d(0,-2000px,0);
  opacity: 0;
}

.viewer {
  color: #c97874;
  float: left;
  line-height: 3em;
  text-align: right;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 7.5em;
  height: 3em;
}

button {
  border: 0;
  background: rgba(42,50,113, .28);
  color: #6cacc5;
  cursor: pointer;
  float: left;
  font: inherit;
  margin: 0.25em;
  width: 2em;
  height: 2em;
  transition: all 0.5s;
  
  &:hover {
    background: #201e40;
  }
  
  &:focus {
    outline: 0; 
    
    &::after {
      animation: zoom 1s;
      animation-iteration-count: 1;
      animation-fill-mode: both; 
      content: attr(data-num);
      cursor: default;
      font-size: 100px;
      position: absolute;
           top: 1.5em;
           left: 50%;
      text-align: center;
      margin-left: -24px;
      opacity: 0;
      width: 48px;    
    }
  }
}


.ops:focus::after {
  content: attr(data-ops);
  margin-left: -210px;
  width: 420px;
}


.equals:focus::after {
  content: attr(data-result);
  margin-left: -300px;
  width: 600px;
}



.reset {
  background: rgba(201,120,116,.28);
 ...

JavaScript

(function() {
  "use strict";

  
  var el = function(element) {
    if (element.charAt(0) === "#") { 
      return document.querySelector(element); 
    }

    return document.querySelectorAll(element); 
  };

  // Variables
  var viewer = el("#viewer"), 
    equals = el("#equals"), 
    nums = el(".num"), 
    ops = el(".ops"), 
    theNum = "", 
    oldNum = "", 
    resultNum, 
    operator; 

  
  var setNum = function() {
    if (resultNum) { 
      theNum = this.getAttribute("data-num");
      resultNum = "";
    } else { 
      theNum += this.getAttribute("data-num");
    }

    viewer.innerHTML = theNum; 

  };

  
  var moveNum = function() {
    oldNum = theNum;
    theNum = "";
    operator = this.getAttribute("data-ops");

    equals.setAttribute("data-result", ""); 
  };

  
  var displayNum = function() {

    
    oldNum = parseFloat(oldNum);
    theNum = parseFloat(theNum);

    switch (operator) {
      case "plus":
        resultNum = oldNum + theNum;
        break;

      case "minus":
        resultNum = oldNum - theNum;
        break;

      case "times":
        resultNum = oldNum * theNum;
        break;

      case "divided by":
        resultNum = oldNum / theNum;
        break;

       
      default:
        resultNum = theNum;
    }

    
    if (!isFinite(resultNum)) {
      if (isNaN(resultNum)) { 
        resultNum = "You broke it!";
      } else { 
        resultNum = "Look at what you've done";
        el('#calculator').classList.add("broken");
        el('#reset').classList.add("show"); 
      }
    }

    
    viewer.innerHTML = resultNum;
    equals.setAttribute("data-result", resultNum);

    
    oldNum = 0;
    theNum = resultNum;

  };

 
  var clearAll = function() {
    oldNum = "";
    theNum = "";
    viewer.innerHTML = "0";
    equals.setAttribute("data-result", resultNum);
  };

 
  for (var i = 0, l = nums.length; i < l; i++) {
    nums[i].onclick = setNum;
  }

  
  for (var i = 0, l = ops.length; i < l; i++) {
   ...