JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="keypadContain">
<div class="keypad">
<div id="keyScreen"><input id="" type="text"></div>
<div id="key1">1</div>
<div id="key2">2</div>
<div id="key3">3</div>
<div id="keyDone">Done</div>
<div id="key4">4</div>
<div id="key5">5</div>
<div id="key6">6</div>
<div id="keyDel">Del</div>
<div id="key7">7</div>
<div id="key8">8</div>
<div id="key9">9</div>
<div class="keyBlank"></div>
<div class="keyBlank"></div>
<div id="key0">0</div>
<div class="keyBlank"></div>
<div class="keyBlank"></div>
</div>
</div>

CSS

.keypadContain {border:1px solid #999999;display:inline-block;background-color:#dddddd;}


.keypad { max-width:176px;padding:1px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    


    }
    
.keypad div {cursor:pointer;width:40px;height:40px;background-color:#ffffff;margin:2px;text-align:center;line-height:40px;border-radius:10px;}

#keyDone {font-size:14px;color:#ffffff;background-color:green;}
#keyDel {font-size:14px;background-color:pink;}
.keyBlank {opacity:0.5;}
#keyScreen {width:100%;}
#keyScreen {}
#keyScreen input {padding:5px 0;width:90%;box-sizing: border-box;border:0;margin:auto;text-align:center;}

JavaScript

function id(x) {var y = document.getElementById(x);return y;}

id("key1").addEventListener("click", function() { dial(1); });
id("key2").addEventListener("click", function() { dial(2); });
id("key3").addEventListener("click", function() { dial(3); });
id("key4").addEventListener("click", function() { dial(4); });
id("key5").addEventListener("click", function() { dial(5); });
id("key6").addEventListener("click", function() { dial(6); });
id("key7").addEventListener("click", function() { dial(7); });
id("key8").addEventListener("click", function() { dial(8); });
id("key9").addEventListener("click", function() { dial(9); });
id("key0").addEventListener("click", function() { dial(0); });

id("keyDel").addEventListener("click", function() { dial("del"); });
id("keyDone").addEventListener("click", function() { dial("done"); });

var screen = id("keyScreen");

function dial(x) {
if (x == "del") {screen.firstChild.value = screen.firstChild.value.slice(0, -1);}
else if (x == "done") {}
else {screen.firstChild.value += x;} 
}

function del(x) {
screen.firstChild.value += x;
}