JSFiddle - React, Tailwind, and code Playground

by jlspake

HTML

<body style="background-color: black;">
    <form id="form1">
    <div>
        <table class="auto-style3">
            <tr>
                <td style="text-align: center">
                    <h2>
                        <span ID="Label2" style="color:White" Font-Size="XX-Large">CHILD ACTION, INC. PUNCH BOARD</span>
                    </h2>
                </td>
            </tr>
            <tr>
                <td style="text-align: center">

                        <asp:Timer ID="Timer1" Interval="500" Enabled="False"></asp:Timer>
                        <label ID="lblToday" ForeColor="White" Font-Size="X-Large"></label>&nbsp;<label ID="lblcurrenttime"ForeColor="White" Font-Size="X-Large"></label>
</td>
            </tr>
            <tr>
                <td style="text-align: center">
                    <label ID="lblPrompt" style="font-weight: 700; color:white;" Font-Size="X-Large">Please enter your 8-digit PIN (consists of Employee # + PIN)</label>
                </td>
            </tr>
            <tr>
                <td style="text-align: center">
                    <label ID="lblLocation" ForeColor="White" Visible="False"></label>
                    <label ID="lblCode" ForeColor="White" Visible="False"></label>&nbsp; <label ID="lblAsterisk" style="color: Yellow; font-size: xx-large"></label>
                    <input type="text" ID="hidden" style="visibility: hidden" />
                </td>
            </tr>
            </table>         
        <div align="center">
        <table class="auto-style1">
            <tr>
                <td class="auto-style2">
                    <input type="button" ID="imgbtn1" ImageUrl="~/Images/1.png" OnClick="return logText('1');" Height="120px" Width="120px" value="1" />
                </td>
                <td class="auto-style2">
                    <input type="button" ID="imgbtn2" runat="server" ImageUrl="~/Images/2.png" OnClick="return logText('2');" Height="120px" Width="120px" value="2" />
           ...

CSS

.auto-style1
        {
            width: 500px;
            border-style: solid;
            border-width: 1px;  
        }
        .auto-style2
        {
            text-align: center;
        }
        .auto-style3
        {
            width: 100%;
        }

JavaScript

var icon = new Image(28, 28);
        icon.src = 'https://apps.childaction.org/CATSOnlineWeb/Images/cailogo.jpg';
        
        function logText(pin) {
            var pincode; 
            var asterisk = document.getElementById('lblAsterisk');
            if (pin !== "c")
            {
               pincode = document.getElementById('hidden').value + pin;
               asterisk.appendChild(icon.cloneNode());
            }
            else
            {
                pincode = "";                
              	asterisk.innerHTML = '';
						}
            
            updateCodes(pincode);           
            return false;
        }

        function updateCodes(pincode) {
            document.getElementById('hidden').value = pincode;
            beep();
        }

        function beep() {
            var snd = new...