JSFiddle - React, Tailwind, and code Playground

by Hristo Petrov

HTML

<table>
        <colgroup>
            <col />
            <col />
            <col />
            <col />
        </colgroup>
        <thead>
            <tr>
                <th colspan="4">
                    <form>
                        <input type="text" id="result-field" name="display" value="" disabled="disabled"/>
                    </form>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <button value="1">
                        1
                    </button>
                </td>
                <td>
                    <button value="2">
                        2
                    </button>
                </td>
                <td>
                    <button value="3">
                        3
                    </button>
                </td>
                <td>
                    <button value="+">
                        +
                    </button>
                </td>
            </tr>
            <tr>
                <td>
                    <button value="4">
                        4
                    </button>
                </td>
                <td>
                    <button value="5">
                        5
                    </button>
                </td>
                <td>
                    <button value="6">
                        6
                    </button>
                </td>
                <td>
                    <button value="-">
                        -
                    </button>
                </td>
            </tr>
            <tr>
                <td>
                    <button value="7">
                        7
                    </button>
                </td>
                <td>
                    <button value="8">
                        8
                    </button>
                </td>
                <td>
                    <button value="9">
                        9
                ...

CSS

body, table, thead, tbody, th, td, form, button {
    margin: 0;
    padding: 0;
}

col {
    width: 55px;
}

table {
    margin: 20px;
    padding: 10px;
    /*height: 350px;*/
    background-color: orange;
    border-spacing: 0;
    border-radius: 5px;
}

td {
    padding: 5px 0;
    text-align: center;
    vertical-align: middle;
    background-color: #b9b9b9;
}

th {
    padding-bottom: 10px;
}

tbody tr:first-child td:first-child {
    border-top-left-radius: 7px;
}

tbody tr:first-child td:last-child {
    border-top-right-radius: 7px;
}

tbody tr:last-child td:first-child {
    border-bottom-left-radius: 7px;
}

tbody tr:last-child td:last-child {
    border-bottom-right-radius: 7px;
}

button {
    width: 45px;
    height: 45px;
    font-size: 24px;
    text-align: center;
    color: #1f1f1f;
    vertical-align: middle;
    line-height: 0;
    background-color: #00BC8A;
    border-radius: 50px;
}

input[type='text'] {
    padding: 10px 5px;
    width: 210px;
    font-family: Consolas, 'Lucida Console', 'DejaVu Sans Mono', monospace;
    font-size: 25px;
    text-align: right;
    color: #24335B;
    border: none;
    border-top: 2px inset #8FB0F7;
    border-radius: 5px;
    /*Gradient*/
    background: #a2d4f0; /* Old browsers */
    background: -moz-linear-gradient(top,  #a2d4f0 45%, #88c8ef 56%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(45%,#a2d4f0), color-stop(56%,#88c8ef)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #a2d4f0 45%,#88c8ef 56%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #a2d4f0 45%,#88c8ef 56%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #a2d4f0 45%,#88c8ef 56%); /* IE10+ */
    background: linear-gradient(to bottom,  #a2d4f0 45%,#88c8ef 56%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a2d4f0', endColorstr='#88c8ef',GradientType=0 ); /* IE6-9 */
}

JavaScript

var buttons = document.getElementsByTagName('button');
var operators = ['+', '-', '*', '/'];
var operatorUsed = false;
var tempValue;
var currValArr = [];

function buttonAction(index) {

    //You need to return a new function that does your job otherwise it wont wait for onclick event and just finish
    return function () {
        var currentInput = document.getElementById('result-field');
        var btnValue = buttons[index].value;

        if (btnValue === 'C') { //Clear the display and reset the calculator
            currentInput.value = '';
            operatorUsed = false;

        } else if (btnValue === '=') { //Try to solve whats in the display
            currentInput.value = eval(currentInput.value);

        } else {
            if (operators.indexOf(btnValue) > -1) { //Check if its an operator
                if (!operatorUsed) { //If not used -> use it
                    currentInput.value += btnValue;
                    operatorUsed = true;

                } else { //If already used but want to use another -> swap it
                    tempValue = currentInput.value;
                    currValArr = tempValue.split('');
                    currValArr[currValArr.length - 1] = btnValue;
                    currentInput.value = currValArr.join('');

                }

            } else if (operators.indexOf(btnValue) == -1) { //Check if its a number
                if (operatorUsed) {
                    operatorUsed = false;

                }

                currentInput.value += btnValue;
            }

        }
    };
}

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', buttonAction(i), false);
}