Implement a simple Countdown Timer: Frontend/Fullstack(MERN) developers, Machine Coding Round Interview Question (Exp: 2–5years)

What We’re Building

• Input field to enter time in mm:ss format
• Start button to trigger the countdown
• Live countdown display (minutes, seconds, milliseconds)
• Auto-stop when the timer reaches zero

Key Concepts Used

1. State Management (useState)

We manage multiple states:

• addTimer → stores user input (mm:ss)
• timerStatus → whether timer is running
• startTimer → stores start timestamp
• elapsed → time passed since start

2. Refs (useRef)

We use intervalRef to store the interval ID so we can clear it when needed.

3. Side Effects (useEffect)

Used to:

• Start the interval when the timer begins
• Clean up interval on unmount or when timer stops

How It Works

Step 1: Decode Input Time

We convert mm:ss into milliseconds:

const decodeTimer = () => {
  const [minStr, secStr] = addTimer.split(":");
  return (Number(minStr) || 0) * 60000 + (Number(secStr) || 0) * 1000;
};

Step 2: Start Timer

When the user clicks start:

• Validate input
• Store current timestamp
• Reset elapsed time

setTimerStatus(true);
setStartTimer(Date.now());
setElapsed(0);

Step 3: Run Interval

We update elapsed time every 50ms:

intervalRef.current = setInterval(() => {
  setElapsed(Date.now() - startTimer);
}, 50);

Step 4: Format Remaining Time

We calculate remaining time and format it as:

mm:ss:ms

const remainingTime = totalTime - elapsed;

If time runs out:

• Stop the interval
• Reset timer status

Final UI Behavior

import { useState, useEffect, useRef } from "react";

export default function App() {
  const [addTimer, setAddTimer] = useState("");
  const [timerStatus, setTimerStatus] = useState(false);
  const [startTimer, setStartTimer] = useState(null);
  const [elapsed, setElapsed] = useState(0);
  const intervalRef = useRef(null);
  const handleOnchange = (e) => {
    setAddTimer(e.target.value);
  };
  const decodeTimer = () => {
    if (!addTimer || !addTimer.includes(":")) return 0; // prevent crash
    const [minStr, secStr] = addTimer.split(":");
    const minutes = Number(minStr) || 0;
    const seconds = Number(secStr) || 0;
    return minutes * 60 * 1000 + seconds * 1000;
  };
  const formatTimer = () => {
    const totalTime = decodeTimer();
    if (totalTime > elapsed) {
      const remainingTime = totalTime - elapsed;
      const min = String(Math.floor(remainingTime / (60 * 1000))).padStart(
   2,
        "0"
      );
      const sec = String(Math.floor((remainingTime / 1000) % 60)).padStart(
        2,
        "0"
      );
      const milisec = String(Math.floor((remainingTime % 1000) / 10)).padStart(
        2,
        "0"
      );

      return `${min}:${sec}:${milisec}`;
    } else if (timerStatus) {
      clearInterval(intervalRef.current);
      setTimerStatus(false);
    }
    return "00:00:00";
  };

  const handleOnClick = () => {
    const totalTime = decodeTimer();
    if (totalTime === 0) {
      alert("Please enter a valid time in mm:ss format");
      return;
    }

    setTimerStatus(true);
    setStartTimer(Date.now());
    setElapsed(0);
  };

  useEffect(() => {
    if (timerStatus && startTimer !== null) {
      intervalRef.current = setInterval(() => {
        setElapsed(Date.now() - startTimer);
      }, 50);
    }
    return () => clearInterval(intervalRef.current);
  }, [timerStatus, startTimer]);

  return (
    <div style={{ textAlign: "center", marginTop: "40px" }}>
      <input
        type="text"
        placeholder="mm:ss"
        value={addTimer}
        onChange={handleOnchange}
      />
      <button onClick={handleOnClick}>Start Timer</button>
      <div>Timer set for: {timerStatus ? addTimer : ""}</div>
      <div style={{ fontSize: "2rem", marginTop: "10px" }}>{formatTimer()}</div>
    </div>
  );
}

• User enters 02:30
• Clicks Start Timer
• Timer begins counting down like:

02:29:95
02:29:90
...
00:00:00

Edge Cases Handled

• Invalid input (no : or empty input)
• The timer automatically stops at zero
• Interval cleanup to prevent memory leaks

Improvements You Can Add

If you want to level this up:

• Pause / Resume functionality
• Reset button
• Sound alert when the timer ends
• Better UI (progress bar / circular timer)