JSFiddle - React, Tailwind, and code Playground

by Brock Callahan

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div id="output"> <span id="screen" class="pull-right"></span> 
            </div>
        </div>
        <div class="col-md-3">
            <button id="clear" class="btn btn-default btn-block">AC</button>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3">
            <button id="seven" class="btn btn-default btn-block" value="7">7</button>
        </div>
        <div class="col-xs-3">
            <button id="eight" class="btn btn-default btn-block">8</button>
        </div>
        <div class="col-xs-3">
            <button id="nine" class="btn btn-default btn-block">9</button>
        </div>
        <div class="col-xs-3">
            <button id="divide" class="btn btn-default btn-block">/</button>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3">
            <button id="four" class="btn btn-default btn-block">4</button>
        </div>
        <div class="col-xs-3">
            <button id="five" class="btn btn-default btn-block">5</button>
        </div>
        <div class="col-xs-3">
            <button id="six" class="btn btn-default btn-block">6</button>
        </div>
        <div class="col-xs-3">
            <button id="multiply" class="btn btn-default btn-block">x</button>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3">
            <button id="one" class="btn btn-default btn-block">1</button>
        </div>
        <div class="col-xs-3">
            <button id="two" class="btn btn-default btn-block">2</button>
        </div>
        <div class="col-xs-3">
            <button id="three" class="btn btn-default btn-block">3</button>
        </div>
        <div class="col-xs-3">
            <button id="subtract" class="btn btn-default btn-block">-</button>
        </div>
    </div>
   ...

CSS

.container {
    width: 50%;
    padding: 40px;
    background: #397;
}
#output {
    background: #f5f5f5;
    height: 40px;
    padding: 10px;
}
button.btn {
    border-radius:0px;
}
.col-xs-3, .col-md-3 {
    padding: 1px;
}

JavaScript

// Buttons
$("#seven").click(function () {
    $("#screen").append(7);
});

$("#eight").click(function () {
    $("#screen").append(8);
});

$("#nine").click(function () {
    $("#screen").append(9);
});

$("#four").click(function () {
    $("#screen").append(4);
});

$("#five").click(function () {
    $("#screen").append(5);
});

$("#six").click(function () {
    $("#screen").append(6);
});

$("#one").click(function () {
    $("#screen").append(1);
});

$("#two").click(function () {
    $("#screen").append(2);
});

$("#three").click(function () {
    $("#screen").append(3);
});

$("#zero").click(function () {
    $("#screen").append(0);
});

$("#decimal").click(function () {
    var theDec = $(this).text();
    $("#screen").append(theDec);
});


// Operation buttons
$("#add").click(function () {
    $("#screen").append("+");
});
$("#subtract").click(function () {
    $("#screen").append("-");
});
$("#multiply").click(function () {
    $("#screen").append("*");
});
$("#divide").click(function () {
    $("#screen").append("/");
});

// Perform the operations
$("#equals").click(function () {
    var builtString = $("#screen").text();
    var result = eval(builtString);
    $("#screen").text(result);
});

// Clear screen
$("#clear").click(function () {
    $("#screen").empty();
});