Problem 9

Cooldown Button

MEDIUMBUILD

DOM+2

Given an integer cooldownSeconds, build a cooldown button using HTML, CSS, and JavaScript. Render a button with data-testid="cooldown-button" and a label with data-testid="cooldown-label". Initial state: button enabled, label text "Ready". On click: disable the button, count down each second with label text "Wait {n}s", then re-enable and reset label to "Ready". Clicks while disabled have no effect.

Requirements

Render cooldown-button and cooldown-label.
The initial button must be enabled and the label text must be Ready.
Clicking the button must start a countdown using the provided cooldownSeconds value.
While cooling down, the button must be disabled and the label must show Wait {n}s.
Clicks while disabled must have no effect.
When the countdown finishes, re-enable the button and reset the label to Ready.

Examples

Example 1

Input

cooldownSeconds = 3, user clicks at t=0

Output

Label sequence: "Wait 3s" → "Wait 2s" → "Wait 1s" → "Ready". Button re-enables after 3 seconds.

Constraints

Label text must match the exact format "Wait {n}s" / "Ready"
Cooldown timing must not drift on repeated clicks

Follow-up

Persist the cooldown end time so the cooldown continues correctly after a page reload.

Hints

Related Practice

Track

Frontend Fundamentals

Keep moving through related frontend fundamentals problems and build a stronger search-friendly practice loop around this topic.

Console output will appear here...