Grid navigation

Your task is to display a 6x6 grid and implement navigation using keyboard arrows.

Requirements:

  • Display a fixed grid: 6 rows and 6 columns.
  • Each cell has a number from 1 - 36. Display it in the cell.
  • Add proper test attributes to cell elements. If the cell number is 4, set data-test="cell-4". Refer to the provided html code.
  • Add an active class to the active cell. Only one cell should be active at the same time.
  • Cell 1 should be active by default.
  • Implement keyboard navigation. Listen to events on the body document.
  • Pressing ArrowUp should go up.
    Example: 10 -> 4.
  • Pressing ArrowLeft should go left.
    Example: 10 -> 9.
  • Pressing ArrowRight should go right.
    Example: 10 -> 11.
  • Pressing ArrowDown should go down.
    Example: 10 -> 16.
  • If the navigation is not possible (e.g. moving up from cell 4), then nothing should happen.

You are free to add classes, styles, ids, but don't edit or remove data-test attributes.
Create an account to start coding
Create account