JSFiddle - React, Tailwind, and code Playground

by neama

HTML

<table>
  <tr>
    <td class="point1"></td>
    <td class="point2"></td>
    <td class="point3"></td>
    <td class="point3"></td>
    <td class="point2"></td>
    <td class="point1"></td>
  </tr>

  <tr>
    <td class="point8"></td>
    <td class="point9"></td>
    <td class="point4"></td>
    <td class="point4"></td>
    <td class="point9"></td>
    <td class="point8"></td>
  </tr>

  <tr>
    <td class="point7"></td>
    <td class="point6"></td>
    <td class="point5"></td>
    <td class="point5"></td>
    <td class="point6"></td>
    <td class="point7"></td>
  </tr>

  <tr>
    <td class="point7"></td>
    <td class="point6"></td>
    <td class="point5"></td>
    <td class="point5"></td>
    <td class="point6"></td>
    <td class="point7"></td>
  </tr>

  <tr>
    <td class="point8"></td>
    <td class="point9"></td>
    <td class="point4"></td>
    <td class="point4"></td>
    <td class="point9"></td>
    <td class="point8"></td>
  </tr>

  <tr>
    <td class="point1"></td>
    <td class="point2"></td>
    <td class="point3"></td>
    <td class="point3"></td>
    <td class="point2"></td>
    <td class="point1"></td>
  </tr>


</table>

CSS

.point1 {
  width: 30px;
  height: 30px;
  background-color: blue;
}

.point2 {
  width: 30px;
  height: 30px;
  background-color: blue;
}

.point3 {
  width: 30px;
  height: 30px;
  background-color: blue;
}

.point4 {
  width: 30px;
  height: 30px;
  background-color: blue;
}

.point5 {
  width: 30px;
  height: 30px;
  background-color: blue;
}

.point6 {
  width: 30px;
  height: 30px;
  background-color: blue;
}

.point7 {
  width: 30px;
  height: 30px;
  background-color: blue;
}

.point8 {
  width: 30px;
  height: 30px;
  background-color: blue;
}

.point9 {
  width: 30px;
  height: 30px;
  background-color: blue;
}

JavaScript

basetTimeClick();
/*0 
0 white rgb(0,0,0)
1red rgb(255, 0, 0)
2 orange rgb(255,165,0)
3 yellow rgb(255,255,0)
4 green rgb(0,128,0)
5 blauw rgb(0, 255, 255)
6 blue rgb(0, 0, 255)
7 violet rgb(138, 43, 226)
8 black rgb(255,255,255)*/
var timer_click = 0;
var point1 = 0;
var point2 = 0;
var point3 = 0;
var point4 = 0;
var point5 = 0;
var point6 = 0;
var point7 = 0;
var point8 = 0;
var point9 = 0;

var color_set = [{
  0: "rgb(255, 255, 255)",
  1: "rgb(255,0,0)",
  2: "rgb(255,165,0)",
  3: "rgb(255,255 ,0)",
  4: "rgb(0 ,128 ,0)",
  5: "rgb(0, 255, 255)",
  6: "rgb(0, 0, 255)",
  7: "rgb(138, 43, 226)",
  8: "rgb(0, 0, 0)"
}];

function basetTimeClick() {
  timerId = setInterval(function() {
    timer_click++;

    if (timer_click > 1000) timer_click = 0;
    if (timer_click % 9 == 0) point9++;
    if (timer_click % 8 == 0) point8++;
    if (timer_click % 7 == 0) point7++;
    if (timer_click % 6 == 0) point6++;
    if (timer_click % 5 == 0) point5++;
    if (timer_click % 4 == 0) point4++;
    if (timer_click % 3 == 0) point3++;
    if (timer_click % 2 == 0) point2++;
    point1++;
    //console.log(color_set);
    //console.log([point9]);
    if (point1 > 8) point1 = 0;
    if (point2 > 8) point2 = 0;
    if (point3 > 8) point3 = 0;
    if (point4 > 8) point4 = 0;
    if (point5 > 8) point5 = 0;
    if (point6 > 8) point6 = 0;
    if (point7 > 8) point7 = 0;
    if (point8 > 8) point8 = 0;
    if (point9 > 8) point9 = 0;
    $('.point1').css("background-color", color_set[0][point1]);
    $('.point2').css("background-color", color_set[0][point2]);
    $('.point3').css("background-color", color_set[0][point3]);
    $('.point4').css("background-color", color_set[0][point4]);
    $('.point5').css("background-color", color_set[0][point5]);
    $('.point6').css("background-color", color_set[0][point6]);
    $('.point7').css("background-color", color_set[0][point7]);
    $('.point8').css("background-color", color_set[0][point8]);
    $('.point9').css("background-color",...