JSFiddle - React, Tailwind, and code Playground

by Barbara Laird

HTML

<section id="calculator">
    <div class="display"></div>
    <div id="numbersContainer">
        <table id="numbers">
            <tr>
                <td>
                    <button class="number" id="one">1</button>
                </td>
                <td>
                    <button class="number" id="two">2</button>
                </td>
                <td>
                    <button class="number" id="three">3</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button class="number" id="four">4</button>
                </td>
                <td>
                    <button class="number" id="five">5</button>
                </td>
                <td>
                    <button class="number" id="six">6</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button class="number" id="seven">7</button>
                </td>
                <td>
                    <button class="number" id="eight">8</button>
                </td>
                <td>
                    <button class="number" id="nine">9</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button class="number" id="zero">0</button>
                </td>
            </tr>
        </table>
        <table id="operators">
            <tr>
                <td>
                    <button class="operator" id="plus">+</button>
                </td>
                <td>
                    <button class="operator" id="minus">-</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button class="operator" id="divide">/</button>
                </td>
                <td>
                    <button class="operator" id="times">x</button>
                </td>
            </tr>
        </table>
    </div>
</section>

CSS

section {
		    padding: 2em;
		}
		.display {
		    height: 5em;
		    color: #333;
		}

JavaScript

var storedCalculation = '';

            $('.number, .operator').click(function () {
                 var numberOrOperator = $(this).html();
                storedCalculation += numberOrOperator;
                $('.display').html(storedCalculation);
             });