JSFiddle - React, Tailwind, and code Playground

by guyluchenbill

HTML

<h2>OOP Calculator</h2>

<div id="calculator">
    <form action='index.html' method='post' name='calc'>
        <input type='text' disabled='true' name='output' id='output' />
        <table id="buttontable">
            <tr>
                <td>
                    <input type='button' value='C' />
                </td>
                <td>
                    <input type='button' value='BS' />
                </td>
                <td>
                    <input type='button' value='MR' />
                </td>
                <td>
                    <input type='button' value='MC' />
                </td>
                <td>
                    <input type='button' value='M+' />
                </td>
            <tr>
                <td>
                    <input type='button' value='1' />
                </td>
                <td>
                    <input type='button' value='2' />
                </td>
                <td>
                    <input type='button' value='3' />
                </td>
                <td>
                    <input type='button' value='+' />
                </td>
                <td>
                    <input type='button' value='sin' />
                </td>
            </tr>
            <tr>
                <td>
                    <input type='button' value='4' />
                </td>
                <td>
                    <input type='button' value='5' />
                </td>
                <td>
                    <input type='button' value='6' />
                </td>
                <td>
                    <input type='button' value='-' />
                </td>
                <td>
                    <input type='button' value='cos' />
                </td>
            </tr>
            <tr>
                <td>
                    <input type='button' value='7' />
                </td>
                <td>
                    <input type='button' value='8' />
                </td>
                <td>
      ...

CSS

#calculator {
    border: solid black 1px;
    display: inline-block;
    padding: 4px;
    border-radius: 4px;
}
#calculator input[type="text"] {
    text-align: right;
}
#buttontable {
    position: relative;
}
#buttontable input {
    width: 32px;
    height: 32px;
    padding: 0px;
}

JavaScript

(function () {
    var Calc = function () {
        this.result = 0;
        this.operand = '';
        this.operation = '';
    };
    Calc.prototype = {
        constructor: Calc,
        apply_and_set_operation: function (next_op) {
            if (next_op == 'C') {
                this.result = 0;
                this.operand = '';
                this.operation = '';
                return;
            }
            if (this.operand != '') {
                switch (this.operation) {
                    case '':
                        this.result = +this.operand;
                        break;
                    case '+':
                        this.result += +this.operand;
                        break;
                    case '-':
                        this.result -= +this.operand;
                        break;
                    case '*':
                        this.result *= +this.operand;
                        break;
                    case '/':
                        this.result /= +this.operand;
                        break;
                }
            }
            this.operation = next_op != '=' ? next_op : '';
            this.operand = '';
        },
        add_input: function (character) {
            if (this.trancendental[character] !== undefined) {
                this.operand = ''+this.trancendental[character](+this.get_operand());
            } else if (character == '.') {
                this.operand += this.operand == '' ? '0.' : '.';
            } else if (character >= '0' && character <= '9') {
                this.operand += character;
            } else {
                this.apply_and_set_operation(character);
            }
        },
        get_operand: function () {
            return this.operand == '' ? this.result : this.operand;
        },
        trancendental: {
            log: Math.log,
            sin: Math.sin,
            cos: Math.cos,
            tan: Math.tan
        }
    };

    var $ = function (id)...