JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<div id="calculator">
    <div class="display">0</div>
    <div class="row">
        <div class="button cancel">C</div>
        <div class="button function memClear">MC</div>
        <div class="button function memRecall">MR</div>
        <div class="button function memAdd">M+</div>
    </div>
    <div class="row">
        <div class="button function del">Del</div>
        <div class="button function">&#177;</div>
        <div class="button function">%</div>
        <div class="button function div">&#247;</div>
    </div>
    <div class="row">
        <div class="button number">7</div>
        <div class="button number">8</div>
        <div class="button number">9</div>
        <div class="button function mult">&#215;</div>
    </div>
    <div class="row">
        <div class="button number">4</div>
        <div class="button number">5</div>
        <div class="button number">6</div>
        <div class="button function sub">&#45;</div>
    </div>
    <div class="row">
        <div class="button number">1</div>
        <div class="button number">2</div>
        <div class="button number">3</div>
        <div class="button function add">&#43;</div>
    </div>
    <div class="row">
        <div class="button zero number">0</div>
        <div class="button">.</div>
        <div class="button equal">&#61;</div>
    </div>
</div>

CSS

#calculator {
    padding:16px;
    width:256px;
    background:#3AA0E8;
    border-radius:8px;
    box-shadow:0px 4px 0px #2D7CB5;
    font-family: Tahoma;
}

#calculator>.display {
    padding:16px;
    height:0px;
    line-height:0px;
    background:#E8E8E8;
    border-radius:8px;
    box-shadow:0px -4px 0px #B5B5B5;
    text-align:right;
}

#calculator>.row:before, #calculator>.row:after {
    content: " ";
    display: table;
}

#calculator>.row:after {
    clear: both;
}

#calculator>.row>.button {
    margin:16px 16px 0px 0px;
    padding:16px;
    width:20px;
    height:0px;
    line-height:0px;
    text-align:center;
    border-radius:8px;
    float:left;
    background:#E8E8E8;
    box-shadow:0px 4px 0px #B5B5B5;
    text-shadow:1px 1px #B5B5B5;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#calculator>.row>.button:hover {
    margin-top:17px;
    margin-bottom:-1px;
    cursor:pointer;
    box-shadow:0px 3px 0px #B5B5B5;
}

#calculator>.row>.button:active {
    margin-top:19px;
    margin-bottom:-3px;
    cursor:pointer;
    box-shadow:0px 1px 0px #B5B5B5;
}

#calculator>.row>.cancel {
    background:#E8AEAE;
    box-shadow:0px 4px 0px #B58888;
    color:#FFF;
    text-shadow:1px 1px #B58888;
}

#calculator>.row>.cancel:hover {
    box-shadow:0px 3px 0px #B58888;
}

#calculator>.row>.cancel:active {
    box-shadow:0px 1px 0px #B58888;
}

#calculator>.row>.function {
    background:#AED0E8;
    box-shadow:0px 4px 0px #88A2B5;
    text-shadow:1px 1px #88A2B5;
}

#calculator>.row>.function:hover {
    box-shadow:0px 3px 0px #88A2B5;
}

#calculator>.row>.function:active {
    box-shadow:0px 1px 0px #88A2B5;
}

#calculator>.row>.zero {
    width:88px;
}

#calculator>.row>.equal {
    background:#B8E8AE;
    box-shadow:0px 4px 0px #90B588;
    text-shadow:1px 1px #90B588;
}

#calculator>.row>.equal:hover {
    box-shadow:0px 3px...

JavaScript

var queue = "";
var memory = 0;
var blank = false;
var display = $("#calculator .display");
$(".number").on("click", function(){
    var val = $(this).text();
    if(display.text() == "0" || blank){
        display.text(val);
        blank = false;
    }else{
        display.text(display.text()+val);
    }
});

$(".equal").on("click", function(){
    queue += display.text();
    display.text(eval(queue));
    queue = "";
    blank = true;
});

$(".add").on("click", function(){
    queue += display.text()+"+";
    display.text(eval(queue.substr(0, queue.length-1)));
    blank = true;
});

$(".sub").on("click", function(){
    queue += display.text()+"-";
    display.text(eval(queue.substr(0, queue.length-1)));
    blank = true;
});

$(".mult").on("click", function(){
    queue += display.text()+"*";
    display.text(eval(queue.substr(0, queue.length-1)));
    blank = true;
});

$(".div").on("click", function(){
    queue += display.text()+"/";
    display.text(eval(queue.substr(0, queue.length-1)));
    blank = true;
});

$(".cancel").on("click", function(){
    display.text("0");
    queue = "";
});

$(".memClear").on("click", function(){
    memory = 0;
});

$(".memAdd").on("click", function(){
    memory += +display.text();
    blank = true;
});

$(".memRecall").on("click", function(){
    display.text(memory);
});

$(".del").on("click", function(){
    if(display.text() != "0"){
        display.text(display.text().substr(1));
        if(display.text() == ""){
            display.text("0");
        }
    }
});