Grid training

by sosegon

HTML

<body>
  
</body>

CSS

body {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 1.5vh 1.5vh;
  width: 100vw;
  height: 100vh;
  margin: 0;
}
.cell {
  background-color: red;
}

JavaScript

const GRID_SIZE = 8
const mapEls = new Map()

Array.from(Array(GRID_SIZE).keys()).forEach((r, i) => {
	Array.from(Array(GRID_SIZE).keys()).forEach((c, j) => {
		const cell = document.createElement('div')
    cell.style.gridRow = `${i + 1}/${i + 2}`
    cell.style.gridColumn = `${j + 1}/${j + 2}`
    cell.classList.add('cell')
    cell.id = `cell-${i + 1}-${j + 1}`
    mapEls.set(cell.id, cell)
    document.body.appendChild(cell)
	})
})

function animateCells() {
  let start
  
  function step(timestamp) {
  	if(start === undefined) {
    	start = timestamp
    }
    const elapsed = timestamp - start
    
    if(elapsed % (GRID_SIZE * 10) === 0) {
	  	mapEls.get('cell-1-1').style.backgroundColor = 'yellow'
    } else {
    	mapEls.get('cell-1-1').style.backgroundColor = 'red'
    }
    
    if(elapsed < 100) {
    	requestAnimationFrame(step)
    }
  }
  
  requestAnimationFrame(step)
}

animateCells()