JSFiddle - React, Tailwind, and code Playground

by winns

HTML

<div id='wrapper'>
    <div id='display'>
        
    </div>
    <div id='keyboard'>
        <table>
            <tr>
                <td><button id="aclear">C</button></td>
            </tr>
            <tr>
                <td><button id="n7">7</button></td>
                <td><button id="n8">8</button></td>
                <td><button id="n9">9</button></td>
                <td><button id="adivide">/</button></td>
            </tr>
            <tr>
                <td><button id="n4">4</button></td>
                <td><button id="n5">5</button></td>
                <td><button id="n6">6</button></td>
                <td><button id="amulti">*</button></td>
            </tr>
            <tr>
                <td><button id="n1">1</button></td>
                <td><button id="n2">2</button></td>
                <td><button id="n3">3</button></td>
                <td><button id="aminus">-</button></td>
            </tr>
            <tr>
                <td><button id="n0">0</button></td>
                <td></td>
                <td><button id="acoma">.</button></td>
                <td><button id="aplus">+</button></td>
                <td><button id="aresult">=</button></td>
            </tr>
            
        </table>
    </div>
</div>

CSS

*{margin: 0; padding: 0;}

body{color: #fff; background: #000;}

#wrapper{
    margin: 20px auto 0 auto; padding: 10px;
    width: 300px;
    background: #474749;
    
    border: 2px solid #aaa;
    border-radius: 4px;
}

#display{
    padding: 4px; margin-bottom: 10px;
    height: 46px;
    font-size: 36px;
    line-height: 46px;
    text-align: right;
    background: #272729;
}

#keyboard button{
    margin: 2px; padding: 4px;
    width: 40px; height: 40px;
    font-size: 22px;
}

JavaScript

var x=0; afteraction = false, action = '';

$('#n0').click(function(){
    if(afteraction == false){$('#display').append(0);}
    else {$('#display').text(0); afteraction = false;}
});
$('#n1').click(function(){
    if(afteraction == false){$('#display').append(1);}
    else {$('#display').text(1); afteraction = false;}
});
$('#n2').click(function(){
    if(afteraction == false){$('#display').append(2);}
    else {$('#display').text(2); afteraction = false;}
});
$('#n3').click(function(){
    if(afteraction == false){$('#display').append(3);}
    else {$('#display').text(3); afteraction = false;}
});
$('#n4').click(function(){
    if(afteraction == false){$('#display').append(4);}
    else {$('#display').text(4); afteraction = false;}
});
$('#n5').click(function(){
    if(afteraction == false){$('#display').append(5);}
    else {$('#display').text(5); afteraction = false;}
});
$('#n6').click(function(){
    if(afteraction == false){$('#display').append(6);}
    else {$('#display').text(6); afteraction = false;}
});
$('#n7').click(function(){
    if(afteraction == false){$('#display').append(7);}
    else {$('#display').text(7); afteraction = false;}
});
$('#n8').click(function(){
    if(afteraction == false){$('#display').append(8);}
    else {$('#display').text(8); afteraction = false;}
});
$('#n9').click(function(){
    if(afteraction == false){$('#display').append(9);}
    else {$('#display').text(9); afteraction = false;}
});

$('#acoma').click(function(){
    if ($('#display').html().indexOf('.') == -1){
        $('#display').append('.');
    }
});
$('#aclear').click(function(){
    $('#display').text(''); 
    x=0; afteraction = true;
});

function action(action_type){
    switch (action_type){
        case 'plus':
            x += parseFloat($('#display').text());
            break;
        case 'minus':
            x = x - parseFloat($('#display').text());
            break;
    }
}

/* PLUS */
$('#aplus').click(function(){
    x +=...