JSFiddle - React, Tailwind, and code Playground

by olragon

HTML

<script src="https://raw.github.com/silentmatt/javascript-biginteger/master/biginteger.js"></script>
<div id="calculator"></div>

CSS

#calculator {border: 1px solid; overflow: auto; background: #ccc;}
  .io-field {border: 1px solid; height: 156px; margin: 5px; padding: 2px;
    text-align: right; overflow: hidden; position: relative; background: #fff;}
  .calculation, .collapsed-calculation {font-size: 10px; height: 56px; line-height: 14px; overflow: auto;}
  .input {font-size: 16px; height: 48px; line-height: 24px; overflow: auto;}
  .numbers {margin: 5px; width: 120px; float: left;}
  .operations {margin: 5px; width: 160px; float: left;}
  .button {width: 30px; height: 30px; padding: 0; font-size: 14px; line-height: 30px;
    text-align: center; border: 1px solid; cursor: pointer; float: left; margin: 4px; background: #fafafa;}
  .button.number-0 {width: 70px;}

JavaScript

$(function () {


  var Calculator = (function () {

      var operationData = (function () {

      var bi = BigInteger;
      bi.prototype.valueOf = bi.prototype.toString;
      
      return {
        add: {
          precedence: 1,
          name: 'add',
          operation: function (a, b) {return bi.add(a, b);},
          output: function (a, b) {return a + ' + ' + b;},
          buttonHTML: '+'
        },
        subtract: {
          precedence: 1,
          name: 'subtract',
          operation: function (a, b) {return bi.subtract(a, b);},
          output: function (a, b) {return a + ' - ' + b;},
          buttonHTML: '-'
        },
        multiply: {
          precedence: 2,
          name: 'multiply',
          operation: function (a, b) {return bi.multiply(a, b);},
          output: function (a, b) {return a + ' * ' + b;},
          buttonHTML: '*'
        },
        div: {
          precedence: 2,
          name: 'divide',
          operation: function (a, b) {return bi.quotient(a, b);},
          isInvalidInput: function (a, b) {return b == 0 ? 'division by 0' : false;},
          output: function (a, b) {return a + ' / ' + b;},
          buttonHTML: 'Div'
        },
        mod: {
          precedence: 2,
          name: 'modulo',
          operation: function (a, b) {return bi.remainder(a, b);},
          output: function (a, b) {return a + ' % ' + b;},
          buttonHTML: 'Mod'
        },
        negate: {
          precedence: 4,
          singleInput: true,
          name: 'negate',
          operation: function (a) {return bi.negate(a);},
          output: function (a) {return 'negate(' + a + ')';},
          buttonHTML: '&#177;'
        },
        square: {
          precedence: 4,
          singleInput: true,
          name: 'square',
          operation: function (a) {return bi.pow(a, 2);},
          output: function (a) {return 'sqr(' + a + ')';},
          buttonHTML: 'x<sup>2</sup>'
        },
        power: {
          precedence:...