JSFiddle - React, Tailwind, and code Playground

by Ravi Shankar Kumar

HTML

<div class="container">
    <div id="lastCalculation"></div>
    <input type="text" step="any" size="16" value="0" id="display" readonly />
    <div class="keypad">
        <span class="clear" onclick="reset()">C</span>
        <span class="del" onclick="deleteValue()">Del</span>
        <div class="clr"></div>
        <span onclick="setNum(7)">7</span>
        <span onclick="setNum(8)">8</span>
        <span onclick="setNum(9)">9</span>
        <span onclick="operator('/')">/</span>
        <span onclick="setNum(4)">4</span>
        <span onclick="setNum(5)">5</span>
        <span onclick="setNum(6)">6</span>
        <span onclick="operator('*')">*</span>
        <span onclick="setNum(1)">1</span>
        <span onclick="setNum(2)">2</span>
        <span onclick="setNum(3)">3</span>
        <span onclick="operator('-')">-</span>
        <span onclick="setNum(0)">0</span>
        <span onclick="setNum('.')">.</span>
        <span class="isEqualTo" onclick="calculate()">=</span>
        <span onclick="operator('+')">+</span>
        <div class="clr"></div>
    </div><!-- //keypad -->
</div><!-- //container -->

CSS

*{margin:0; padding:0; outline:none;}
.clr{clear:both;}
.container{border:1px solid #666; margin:20px auto; padding:10px; width:500px;}
#lastCalculation{border:1px solid #eee; color:#666; display:none; font-family:'digital-7_monoitalic'; font-size:18px; padding:10px; margin:0 0 10px 0; text-align:right;}
#display{border:1px solid #666; font-family:'digital-7_monoitalic'; font-size:80px; padding:10px 10px 0px 10px; text-align:right; width:476px;}
.keypad{margin:20px 0 0 0;}
.keypad span{border:1px solid #eee; background:#eee; font-family:'digital-7_monoitalic'; float:left; font-size:40px; cursor:pointer; margin:5px; padding:20px 47px;}
.keypad span:hover{background:#fff;}
.keypad span.isEqualTo, .keypad span.clear{background:#4787ed; color:#fff;}
.keypad span.isEqualTo:hover, .keypad span.clear:hover{background:#1A68E5;}
.keypad span.del{color:#f00;}

JavaScript

var operation="";
var restValue="";
var lastValue="";
function setNum(num){
    var disp = document.getElementById("display");
    if(disp.value == 0){
        disp.value = num;
    }else{
        disp.value = disp.value + num;
    }
    
    
}


// For clear value
function reset(){
    document.getElementById("display").value='0';
    restValue="";
    operation="";
}

// For Delete value
function deleteValue(){
    var displayValue = document.getElementById("display").value;
    var array = displayValue.split('');
    array.pop();
    array.join(',');
    document.getElementById("display").value=array;
    console.log(array);
    
}


function operator(op){
    if(op == '+'){
        alert("Plus");
        restValue = Number(document.getElementById("display").value);
        document.getElementById("display").value="";
        if(restValue == ""){
            alert("Zero");
        }else{
            lastValue = Number(document.getElementById("display").value);
            
        
        }
        //document.getElementById("display").value=restValue + lastValue;
    }
    
    
    
    
    
    
    
    
    console.log("restValue : " + restValue);
    console.log("lastValue : " + lastValue);
    console.log("operation : " + operation);
    
    
    //lastValue = restValue.charAt(restValue.length - 1);
    //console.log(lastValue)
    
    
    
    
}


function calculate(){
   // if(lastValue == operation){
       // totalValue = restValue.length-1;
        //Number(document.getElementById("display").value=restValue);
        console.log(restValue + operation);
    //}
}