JSFiddle - React, Tailwind, and code Playground

by Graham Dixon

HTML

<div class="grid-box">
  <div class="grid-box-row">
    <div class="grid-box-item"></div>
    <div class="grid-box-item"></div>
    <div class="grid-box-item"></div>
    <div class="grid-box-item"></div>
  </div>
  <div class="grid-box-row">
    <div class="grid-box-item"></div>
    <div class="grid-box-item"></div>
    <div class="grid-box-item"></div>
    <div class="grid-box-item"></div>
  </div>
</div>

CSS

.grid-box {
   width: auto;
   height: auto;
   display: block;
}

.grid-box-row {
  width:auto;
  height:16px;
  padding:2px;
}

.grid-box-item {
  height:16px;
  width:16px;
  display: inline-block;
  box-shadow: 0 0 0 1px #000;
  padding: 0 2px;
  box-sizing: border-box;
}

.grid-box-item.highlighted {
  background: blue;
}

JavaScript

const gridBox = document.querySelector(".grid-box");


let curY = 2;
let curX = 4;
const maxY = 20;
const maxX = 20;

const rows = gridBox.querySelectorAll(".grid-box-row");

[...rows].forEach((row, rowPos) => {
	console.log(row);
  const items = row.querySelectorAll(".grid-box-item");
  [...items].forEach((item, itemPos) => {
    console.log(item);
    item.addEventListener("mouseover", (e) => {
        if (rowPos+1 >= curY && rowPos+2 < maxY) {
        		curY = rowPos + 2;
        }
        if (itemPos+1 >= curX && itemPos+2 < maxX) {
        		curX = itemPos + 2;
        }
        console.log(curY, curX);
    });
  });
});