JSFiddle - React, Tailwind, and code Playground

by ananyaneogi

HTML

<button id="start">Start</button>
<button id="stop">Stop</button>

<div class="game">
  <div class="field pawn"></div>
  <div class="field"></div>
  <div class="field"></div>
  <div class="field"></div>
  <div class="field"></div>
  <div class="field"></div>
  <div class="field"></div>
  <div class="field"></div>
  <div class="field"></div>
</div>

CSS

.game {
   display: grid;
    max-width: 40px;
    grid-row-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-column-gap: 10px;
}

.field {
  background-color: #ccc;
  width: 30px;
  height: 30px;
}

.pawn {
    background-color: red;
}

JavaScript

const gridCols = Array.from(document.querySelector('.game').children);
let timer = null

const startBtn = document.getElementById('start');
const stopBtn = document.getElementById('stop');

startBtn.addEventListener('click', start);
stopBtn.addEventListener('click', stop);


function start() {
  for (let i = 0; i < gridCols.length; i++) {
    timer = setTimeout(() => {
      gridCols[i+1].classList.add('pawn');
      gridCols[i].classList.remove('pawn');
    }, i * 1000);
  }
}

function stop() {
	console.log(timer)
	clearTimeout(timer);
  timer = null;
}