JSFiddle - React, Tailwind, and code Playground

by arunzo

HTML

<table id="table">
    <tbody>
        <tr>
            <td class="table">
                <div class="box"></div>
            </td>
            <td class="table">
                <div class="box"></div>
            </td>
            <td class="table">
                <div class="box"></div>
            </td>
        </tr>
        <tr>
            <td class="table">
                <div class="box"></div>
            </td>
            <td class="table">
                <div class="box"></div>
            </td>
            <td class="table">
                <div class="box"></div>
            </td>
        </tr>
        <tr>
            <td class="table">
                <div class="box"></div>
            </td>
            <td class="table">
                <div class="box"></div>
            </td>
            <td class="table">
                <div class="box"></div>
            </td>
        </tr></tbody>
</table>

CSS

.box {
    width:15px;
    height:15px;
}

JavaScript

var box = document.getElementsByClassName("box");

 function getRandomColor() {
     var letters = '0123456789ABCDEF'.split('');
     var color = '#';
     for (var i = 0; i < 6; i++) {
         color += letters[Math.floor(Math.random() * 16)];
     }
     return color;
 }

 setInterval(function () {
     console.log("Tick");
     if (Math.random() > 0.5) {

         for (var i = 0; i < box.length; i++) {
             box[i].style.borderRadius = "100px";
         }

     } else {

         for (var i = 0; i < box.length; i++) {
             box[i].style.borderRadius = "0";
         }

         for (var i = 0; i < box.length; i++) {
             box[i].style.backgroundColor = getRandomColor();
         }

         for (var i = 0; i < box.length; i++) {
             box[i].style.display = "block";
         }


     }
 }, 1000);