const cellSize = 25;

const cols = 10;

const rows = 20;

function makeDot(x, y) {

  const dot = document.body.appendChild(

    document.createElement('div')

  );

  dot.classList.add('cell');

  Object.assign(dot.style, {

    position: 'absolute',

    left: `${x}px`,

    top: `${y}px`,

    width: `${cellSize}px`,

    height: `${cellSize}px`,

    outline: '1px solid black',

    cursor: 'pointer',

    background: 'gray'

  });

  return dot;

}

for (let y = 0; y < rows; y++) {

  for (let x = 0; x < cols; x++) {

    makeDot(x * cellSize, y * cellSize);

  }

}

// make a cell red when it is rolled over

document.addEventListener('mouseover', e => {

  if (e.target.classList.contains('cell')) {

    e.target.style.background = 'red';

  }

});