<table class="animated bounceInDown" ontouchstart="">  
  <caption>Drag me</caption>
  <tr>            
    <th colspan="4" id="result">0</th>    
  </tr>
  <tr>
    <td>C</td>
    <td>+/-</td>
    <td>%</td>
    <td>÷</td>
  </tr>
    <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>×</td>
  </tr>
    <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>–</td>
  </tr>
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>+</td>
  </tr>
  <tr>
    <td colspan="2" id="key0">0</td>    
    <td title="not implemented yet 🤷‍♂️">.</td>
    <td>=</td>    
  </tr>
</table>

<pre class="not-implemented">comma not implemented yet <span>💩🤷‍♂️</span></pre>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
body{
  padding: 2em;
}
table {  
    margin: 0 auto;
  border-collapse: collapse;
  background-color: black;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
td {
  padding: 15px;
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 2em;   /* 1em = 16px */
  background-color: #CECFD3;
  color: #040404;
  font-weight: 100;  
    transition: opacity .20s ease-in-out;
   -moz-transition: opacity .20s ease-in-out;
   -webkit-transition: opacity .20s ease-in-out;
}

th,
td {
   
   border-bottom: 1px solid #58595B;
   border-right: 1px solid #58595B;  
  font-family: 'Open sans';
  
  
}

th {  
  word-wrap: break-word;
  border-right:none;
  background-color: black;
  color: white;
  text-align: right;
  font-size: 3.5em;  
  padding-right: 15px;
  padding-bottom: 5px;
  padding-top: 0px;
  font-weight: normal;
}

td:last-child {
  border-right: none;
  background-color: #F88A11;
  color: white;
}
tr:last-child td {
  border-bottom: none;  
}

/* 0 key */
tr:last-child td:first-child{
  text-align: left;
  padding-left: 30px;
}

td:hover, th:hover {
  opacity: 0.9;
  cursor:default;
}

caption {
  background-color:black;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  height: 40px
}
.not-implemented {
  text-align: center;
display: flex;
  align-items: center;
  justify-content: center;
}

.not-implemented span {
  font-size: 3em;
}

let result = 0;
let keyVal1 = undefined;
let keyVal2 = undefined;
let operator = undefined;

const constructCalculation = (key) => {
  
  
  switch (key) {
    case "0":
    case "1":
    case "2":
    case "3":
    case "4":
    case "5":
    case "6":
    case "7":
    case "8":
    case "9":
    case ".":
      if (operator === undefined) {
        if (keyVal1 === undefined) {
          keyVal1 = key;
        } else {
          keyVal1 += key;
        }
        keyVal1 = Number(keyVal1);
      } else {
        if (keyVal2 === undefined) {
          keyVal2 = key;
        } else {
          keyVal2 += key;
        }
        keyVal2 = Number(keyVal2);
      }
      break;
    case "C":
      keyVal1 = 0;
      keyVal2 = undefined;
      operator = undefined;
      break;
    case "+/-":
      if(keyVal2 !== undefined) {
        keyVal2 *= -1;
      } else {
        keyVal1 *= -1;        
      }      
      break;
    case "%":

      break;
    default:
      if (operator !== undefined) {
        switch (operator) {
          case "+":
            result = keyVal1 + keyVal2;
            break;
          case "–":
            result = keyVal1 - keyVal2;
            break;
          case "÷":
            result = keyVal1 / keyVal2;
            break;
          case "×":
            result = keyVal1 * keyVal2;
            break;
        }
        operator = undefined;
        keyVal1 = result;
        keyVal2 = undefined;
      }
      operator = key;
      break;
  }

  if (keyVal2 === undefined) {
    $("#result").text(keyVal1);
  } else {
    $("#result").text(keyVal2);
  }
}

$("td").click(function() {
  constructCalculation(this.textContent);
});

$("*").keydown(function() {
  event.preventDefault();
    event.stopPropagation();
  var x = event.which || event.keyCode;
 console.log('x',x);
  switch (x) {
    case 13:
       constructCalculation('=');
      break;
    case 48:
    case 49:
    case 50:
    case 51:
    case 52:
    case 53:
    case 54:
    case 55:
    case 56:
    case 57:
    case 106:
    case 107:
    case 109:
    case 111:
    case 187:
      constructCalculation(event.key);
      break;
    case 27:
    case 8:
      constructCalculation('C');
  }
});

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})