The Timer That Forgets

Dashboard

Start the focus timer — it should count whole seconds while it runs. Right now it never gets past 1s. Fix the timer logic.

After you fix it

After Start, the displayed seconds should increase by 1 every second (0 → 1 → 2 → …).
The value should keep climbing while the timer is running, not stall at 1.
No page refresh should be needed to see correct counting.

import { useState, useEffect } from "react";

export default function App() {
  const [running, setRunning] = useState(false);
  const [elapsed, setElapsed] = useState(0);

  useEffect(() => {
    const b = document.body;
    const pb = b.style.background;
    const pm = b.style.margin;
    b.style.background = "#fafafa";
    b.style.margin = "0";
    return () => {
      b.style.background = pb;
      b.style.margin = pm;
    };
  }, []);

  useEffect(() => {
    if (!running) return;
    const id = setInterval(() => {
      setElapsed(elapsed + 1);
    }, 1000);
    return () => clearInterval(id);
  }, [running]);

  return (
    <div style={styles.page}>
      <div style={styles.card}>
        <h1 style={styles.h1}>Today</h1>
        <p style={styles.sub}>Focus time on your dashboard.</p>
        <p data-testid="elapsed-display" style={styles.timer}>{elapsed}s</p>
        <button
          type="button"
          data-testid="start-btn"
          disabled={running}
          onClick={() => setRunning(true)}
          style={styles.btn}
        >
          {running ? "Running" : "Start"}
        </button>
      </div>
    </div>
  );
}

const styles = {
  page: { display: "flex", alignItems: "center", justifyContent: "center", padding: "48px 24px", fontFamily: "'Segoe UI', system-ui, sans-serif" },
  card: { background: "#fff", borderRadius: 16, padding: "32px 36px", boxShadow: "0 1px 3px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.04)", minWidth: 300, textAlign: "center" },
  h1: { margin: "0 0 8px", fontSize: 22, fontWeight: 700, color: "#1a1a2e" },
  sub: { margin: "0 0 20px", fontSize: 14, color: "#666" },
  timer: { margin: "0 0 24px", fontSize: 44, fontWeight: 700, color: "#1a1a2e", letterSpacing: "-0.02em" },
  btn: { padding: "10px 28px", fontSize: 15, fontWeight: 600, cursor: "pointer", background: "#4f46e5", color: "#fff", border: "none", borderRadius: 8 },
};

Open Sandbox