JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="keypad">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<th id="screen" colspan="3"></th>
</tr>
<tr>
<td align="center" valign="middle" onclick="pad('7');">7</td>
<td align="center" valign="middle" onclick="pad('8');">8</td>
<td align="center" valign="middle" onclick="pad('9');">9</td>
</tr>
<tr>
<td align="center" valign="middle" onclick="pad('4');">4</td>
<td align="center" valign="middle" onclick="pad('5');">5</td>
<td align="center" valign="middle" onclick="pad('6');">6</td>
</tr>
<tr>
<td align="center" valign="middle" onclick="pad('1');">1</td>
<td align="center" valign="middle" onclick="pad('2');">2</td>
<td align="center" valign="middle" onclick="pad('3');">3</td>
</tr>
<tr>
<td align="center" valign="middle" class="tx" onclick="clr();">Clr</td>
<td align="center" valign="middle" onclick="pad('0');">0</td>
<td align="center" valign="middle" class="tx" onclick="del();">Del</td>
</tr>
</tbody>
</table>
</div>

<input id="login" name="login" type=text>

CSS

.keypad {font-family:Courier;font-size:54px;max-width:300px;margin:auto;}
.keypad td {background-color:#cccccc;cursor:pointer;border:solid 2px #ffffff;}
.keypad td:hover {background-color:#dedede;}
.tx {font-size:16px;}
#screen {height:100px;background-color:#cccccc;border:solid 2px #ffffff;}

JavaScript

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

function pad(el) {
if (id('screen').innerHTML.length < 6) {
id('screen').innerHTML += el;
id('login').value += el;
}
}

function del() {
var t  = id('screen');
var b =  id('login');
t.textContent = t.textContent.slice(0, -1);
b.value = b.value.slice(0, -1);
}

function clr() {
id('screen').innerHTML = "";
id('login').value = "";
}