# Equalizer

> Build a dynamic equalizer whose bars animate based on a changing array of values.

- Difficulty: beginner
- Tags: useState, useEffect
- Estimated time: 30 minutes
- Tests: 5
- Requires subscription: no

## Overview

Build a dynamic equalizer whose bars animate based on a changing array of values.


## Requirements

- Render **12 bars** (`NUM_BARS = 12`).
- Each bar must render **24 blocks** vertically (`BAR_HEIGHT = 24`).
- Each block is represented visually as a small horizontal bar (`h-1 w-8 rounded`).
- The `Equalizer` component receives:
  - `values: number[]` → an array of 12 numbers, one per bar.
  - `barHeight: number` → number of blocks per bar (always 24).
- For each bar:
  - Blocks **from 0 up to `value - 1`** must be **active** (colored).
  - Blocks **above that** must be **inactive** (`bg-neutral-100`).
- Active block color must be:
  - Red for values **1–8**
  - Yellow for values **9–16**
  - Green for values **17–24**
- The top block has testid: `bar-{i}-block-23`
- The bottom block has testid: `bar-{i}-block-0`
- The App must:
  - Generate a new `values` array every **200ms** (`MS_INTERVAL = 200`).
  - Each value must be a random number from **1 to 24**.
  - Pass those values to `<Equalizer />` so the animation updates.
- The layout must stay identical to the provided initial static markup.


## Notes

- The equalizer animates only because React re-renders with new random values.
- Keep the rendering efficient: avoid unnecessary wrappers or recalculations.
- You can compute colors using a helper like `color(height)`.
- Make sure the height of each bar matches the expected `barHeight` so tests pass.
- Maintain the exact `data-testid` structure — tests depend on it.
- The randomizer should run inside a `useEffect` with `setInterval`.


## Tests

01. renders the app title
02. changes colors after interval
03. renders the correct number of bars
04. renders the correct number of blocks per bar
05. applies correct colors for active blocks