Build a Countdown Timer | Interview Question

Q: Build a Countdown Timer

**Target Audience:** Beginners preparing for a frontend machine coding round. You know a little JavaScript and React; deadlines, timeouts, effect cleanup and live regions are explained from zero. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the vocabulary interviewers expect. Every output under "Verified" was printed by running this exact solution on React 19.3.1 inside <StrictMode> in jsdom. ## 1. Why This Even Matters — A Story First You put a pizza in the oven and need it out in 12 minutes. You could stand there counting "one, two, three..." up to 720. Lose count once and the pizza burns. Or you could look at the kitchen clock, see it is 7:03, and decide: "out at 7:15". From then on you only glance at the clock and compare. Get distracted for five minutes and you still know exactly how long is left. A countdown timer in the browser has the same two options. Decrementing a second

The problem

Question presented to candidate: "Build a countdown timer. The user enters minutes and seconds, presses Start, and can pause, resume and reset it. It must stop exactly at zero and tell the user, including screen-reader users, that time is up."

Requirements:

Two number inputs: minutes (0-99) and seconds (0-59); out-of-range or junk input is clamped.
Start is disabled when the total is zero; inputs are locked while the timer is running or paused.
One button reads Start, Pause while running, Resume while paused; Reset returns to the entered time.
The display is mm:ss and reaches 00:00 exactly when the time is over, then shows a "Time is up!" alert once.
Correct even if the page is busy or the tab was in the background; no timers left running.

What a strong answer should cover:

A deadline (endAt = Date.now() + remaining) as the source of truth, with remaining time derived as endAt - now, instead of decrementing a counter.
Rounding the display up (Math.ceil) so 00:00 appears only when time has really run out.
Pausing banks the remaining milliseconds; resuming creates a new deadline.
A single timer, ideally a timeout aimed at the moment the shown second changes (left % 1000), cleared on pause, reset and unmount.
Completion handled in exactly one place so it fires once.
Input validation (clamping) and an accessible completion message with role="alert".

Clarifying questions expected:

"Should it keep counting if the user reloads the page?"
"Any sound or browser notification at the end, or only an on-screen message?"
"Is hours support needed, or are 99 minutes enough?"

Code / implementation expected: Yes. A working countdown with validated inputs, a deadline model, pause/resume/reset, single-fire completion and cleanup.

Timers
State
Effects

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Beginners preparing for a frontend machine coding round. You know a little JavaScript and React; deadlines, timeouts, effect cleanup and live regions are explained from zero. Difficulty: Easy

How to read this doc: Plain language first, then 📌 Interview term: callouts with the vocabulary interviewers expect. Every output under "Verified" was printed by running this exact solution on React 19.3.1 inside <StrictMode> in jsdom.

1. Why This Even Matters — A Story First

You put a pizza in the oven and need it out in 12 minutes. You could stand there counting "one, two, three..." up to 720. Lose count once and the pizza burns. Or you could look at the kitchen clock, see it is 7:03, and decide: "out at 7:15". From then on you only glance at the clock and compare. Get distracted for five minutes and you still know exactly how long is left.

A countdown

The solution is hidden so you can try first

12 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import CountdownTimer from "./src/components/CountdownTimer";

export default function App() {
  return (
    <main className="page">
      <CountdownTimer />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.