Build a grid of light cells where you can click on cells to activate them, turning them green. When all the cells are activated, all the cells will be deactivated one by one in the reverse order they were activated with a 300ms interval in between them.
Requirements
-
Show the heading: Grid Lights
-
Render a 3x3 grid
<div data-testid="grid-lights">
-
Each cell:
- Has
data-testid="cell-{index}" (index from 0 to 8)
- Uses class
cell and optionally active when turned on
- Activates (adds
active class) on click, unless already active or deactivating
-
Once all 9 cells are active:
- They should deactivate in reverse order (from last clicked to first) with a 300ms delay between each
-
Show a Reset Grid button
<button data-testid="reset-btn">
-
On click, it resets the grid to the initial state
Reference UI
