JSFiddle - React, Tailwind, and code Playground

by Naeel Maqsudov

HTML

<div id="screen"></div>
<div>
    <input type="submit" class="numKey" value="7" />
    <input type="submit" class="numKey" value="8" />
    <input type="submit" class="numKey" value="9" />
</div>
<div>
    <input type="submit" class="numKey" value="4" />
    <input type="submit" class="numKey" value="5" />
    <input type="submit" class="numKey" value="6" />
</div>
<div>
    <input type="submit" class="numKey" value="1" />
    <input type="submit" class="numKey" value="2" />
    <input type="submit" class="numKey" value="3" />
</div>
<div>
    <input type="submit" class="numKey" value="0" />
    <input type="submit" id="backKey" value="←" />
</div>

CSS

#screen {
    width:90px;
    height:20px;
    border: 1px solid red
}

JavaScript

window.onload = function(){
    var MAX_LEN = 4,
        currentValue = "",
        elScreen = document.getElementById('screen'),
        addDigit = function(digit){
            digit = digit instanceof MouseEvent ? this.value : digit;
            if (elScreen.innerHTML.length < MAX_LEN) elScreen.innerHTML += digit;
        },
        delDigit = function(){
            elScreen.innerHTML = elScreen.innerHTML.slice(0,elScreen.innerHTML.length - 1);
        };
    //setting handlers for numKeys
    numBtns = document.getElementsByClassName('numKey');
    for (var i = 0 ; i < numBtns.length; i++) numBtns[i].onclick = addDigit;
    //setting handler for backKey
    document.getElementById('backKey').onclick = delDigit;
}