JSFiddle - React, Tailwind, and code Playground

by Arjun Singh

HTML

<button type="button" id="startButton">Start</button>
  <button type="button" id="stopButton">Stop</button>

  <table>
    <tr>
      <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
     <tr>
      <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
     <tr>
      <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
     <tr>
      <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
  </table>

CSS

td{
  width : 5px;
  height : 5px;
  border : 1px solid black;
}
td.alive{
  background : #000;
}

JavaScript

window.onload = e => {
  const TIME_BETWEEN_ITERATIONS = 1*1000;

  let cells = new Array(),
      startButton = document.querySelector("#startButton"),
      stopButton = document.querySelector("#stopButton"),
      stopFlag = true,
      pauseComp = n =>
{
    var date = new Date();
    var curDate = null;
    do { curDate = new Date(); }
    while(curDate-date < n);
}

  document.querySelectorAll("tr").forEach((current, index, array) => {
    cells[index] = [];
    let childElements = current.children;

    for(let i=0; i<childElements.length; i++){
      childElements[i].onclick = e => {
     childElements[i].classList.toggle("alive");
      }
      cells[index].push(childElements[i]);
    }
  });

  startButton.onclick = e => {
   while(stopFlag){
      let tempCells = cells;

      for(let i=0; i<tempCells.length; i++){
        for(let j=0; j<tempCells[i].length; j++){

          let isAlive = (x,y) => (0<=x&&x<=9) && (0<=y&&y<=9) ? tempCells[x][y].classList.contains("alive"):0;

          let noOfNeighbours = isAlive(i-1,j-1)+isAlive(i-1,j)+isAlive(i-1,j+1)+isAlive(i,j-1)+isAlive(i,j+1)+isAlive(i+1,j-1)+isAlive(i+1,j)+isAlive(i+1,j+1);
console.log(noOfNeighbours);
          if(isAlive(i,j) && !(4 > noOfNeighbours > 1)) cells[i][j].classList.remove("alive");

          if(!isAlive(i,j) && noOfNeighbours == 3) cells[i][j].classList.add("alive");
        }
      }
    }
    pauseComp(TIME_BETWEEN_ITERATIONS);
  }

  stopButton.onclick = e => stopFlag=false;
}