JSFiddle - React, Tailwind, and code Playground

by wverhe

HTML

<body>
    <table id="Table">
        <tr id="Row1">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr id="Row2">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr id="Row3">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr id="Row4">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr id="Row5">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <div id="Start">Start</div>
    <div id="Time">Time:</div>
</body>

CSS

table {
    margin-left: 100px
}
#Start {
    position: absolute;
    top: 0%;
    left: 0%;
    padding: 175px 210px;
    font-size: 25px;
    border: solid black;
    text-align: center;
    display: inline-block;
    background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
    color: white;
}
td {
    display: inline-block;
    position:relative;
    vertical-align: middle;
    padding: 25px;
    margin: 5px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
}
/* Outline Out */
 td:before {
    content:'';
    position: absolute;
    border: solid 4px rgba(0, 0, 0, 1);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 5px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
td:hover:before, td:focus:before, td:active:before {
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
}
#Time {
    margin-left: 36.5%;
}

JavaScript

var Items = document.querySelectorAll("td");
var ItemNum = 0;
var Correct = 0;
var Time = 30;
var gameActive = false;
var Random = function (Multiplyer) {
    return String(Math.round(Math.random() * Multiplyer));
};
var FuncRGB = function () {
    var RGB = [Random(255), Random(255), Random(255)].join(",");
    return RGB;
};
var ClearData = function () {
    ItemNum = 0;
    Correct = 0;
    Time = 30;
    gameActive = false;
    $("#Start").fadeIn();

};

var StartTimer = function () {
    var Timer = setInterval(function () {
        if (Time > 0) {
            Time = Time - 1;
            document.getElementById("Time").innerHTML = "Time: " + Time;
        } else {
            alert("Finished" + "\n" + "Correct: " + String(Correct) + "\n" + "Total: " + String(ItemNum) + "\n" + "Percentage: " + (Correct / ItemNum) * 100 + "%");
            ClearData();
            clearInterval(Timer);
1
        }
    }, 1000);
};
var StartGame = function () {
    gameActive = true;
    StartTimer();
    SetSquares();

};
var SetSquares = function () {
    while (gameActive) {
        var RGB = FuncRGB();
        var Different = Math.round(Math.random() * 24);
        for (var i = 0; i <= Items.length; i++) {
            if (i == Different) {
                Items[i].style.backgroundColor = "rgba(" + RGB + ",.8" + ")";
                Items[i].id = ItemNum;
            } else {
                Items[i].style.backgroundColor = "rgb(" + RGB + ")";
            }
        }
    }
};

document.getElementById("Start").onclick = StartGame;
$("#Start").click(function () {
    $(this).fadeOut();
});
$("td").click(function () {
    if ($(this).attr("id") == ItemNum) {
        Correct = Correct + 1;
    }
    ItemNum = ItemNum + 1;
    $(this).fadeOut("fast");
    $(this).fadeIn("fast");
    SetSquares();
});