Skip to main content
ELYTE
MediumFrontendBuild

Cooldown Button

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 en...

Start problemBrowse all problems

What you will practice

HTMLCSSJavaScriptDOM & EventsAsync PatternsDOMEventsTiming

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`.

Starter files

index.htmlEditable template
styles.cssEditable starter
main.jsEditable starter

What the judge checks

  • Runs in the browser environment with the browser-eval runner.
  • Uses a 2000ms judge budget.
  • Requires test IDs: app, cooldown-button, cooldown-label.
  • Checks exact text for: cooldown-label.
  • Behavior rules include: Initial Render Required, Js Logic Required, Html Only Shortcut Disallowed, Label Updates Once Per Second.

Constraints

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

Example behavior

Input
cooldownSeconds = 3, user clicks at t=0
Output
Label sequence: "Wait 3s" → "Wait 2s" → "Wait 1s" → "Ready". Button re-enables after 3 seconds.

Follow-up

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