JSFiddle - React, Tailwind, and code Playground

by andrey90vs

SCSS

* {
    box-sizing: border-box;
}
.op {
    border:2px solid #000;
    display: block;
    margin: 0 auto;
    position: relative;
    width: 90%;
    height: auto;
}

.elements {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.elements:hover {
    cursor: pointer;
    background-color: #000;
    color: #fff;
    transition: all .5s ease;
}

.result {
    box-sizing: initial;
    border: 2px solid #000;
    border-top: none;
    display: block;
    position: absolute;
    left: -2px;
    width: 100%;
    height: 52px;
    line-height: 52px;
    bottom: -52px;
}

JavaScript

function calculate(param){
    var eachVal = param.split('');
    var res = eachVal.reduce(function(prev, curr, index) { return prev + curr; });
    return eval(res);
}

$(document).ready(function() {
    var elem = [1,2,3,4,5,6,7,8,9,0,'+','-','/','*','=','DEL','RES'];
    var op = $('<div class="op"></div>');
    var result = $('<div class="result"></div>');
  
    for(var i = 0; i < elem.length; i++) {
        var elements = $('<div class="elements">'+elem[i]+'</div>');
        op.append(elements);
    }
    op.append(result);
    $('html').append(op);
    
    var val;
    var r = null;
    $(document).on('click','.elements', function() {
        val = $(this).text();
        
        if(val === '=') {
            param = result.text();
            r = calculate(param);
        }
        
        if(val === 'RES') {
            return result.text('');
        }
        
        if(val === 'DEL') {
            return;
        }
        
        result.append(val);
        
        if(r) {
            result.html(r);
        }
    });
});