Project - 9

Project 9: Focus Cycle Timer

Build a focus timer with 60-minute work sessions and 15-minute breaks.

Your challenge: Create Start, Pause, and Reset controls, count down once per second, and automatically switch between Focus Mode and Break Mode.

✦ HTML + CSS + JS Editor

▶ Live Output

Format the time

Divide timeLeft by 60 to get the minutes, and use % 60 to get the remaining seconds.

Use padStart(2, "0") so values such as 7 display as 07.

Start and pause the timer

Use setInterval() to decrease timeLeft once per second.

Use clearInterval() to pause it.

Switch modes

When the countdown reaches 0, switch isFocus and replace timeLeft with either focusTime or breakTime.

Reset the timer

Reset should stop the interval, return to Focus Mode, and restore the timer to 60:00.

Try it: For testing, temporarily change the focus and break times to a few seconds so you can watch the timer switch modes quickly.

Good JavaScript habit: Keep the timer state in variables and use one updateDisplay() function to keep the page synchronized with that state.

👀 Show Full Working Solution

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Focus Cycle Timer</title>

  <style>
    body {
      background: #000;
      color: #8A8A8A;
      font-family: 'Courier New', monospace;
      text-align: center;
      padding: 60px;
      margin: 0;
    }

    #timer {
      font-size: clamp(3rem, 12vw, 6rem);
      color: #fff;
      margin: 35px 0;
    }

    .mode {
      font-size: 1.2rem;
      margin-bottom: 10px;
    }

    button {
      padding: 12px 18px;
      margin: 5px;
      font-size: 16px;
      cursor: pointer;
    }

    button:focus-visible {
      outline: 3px solid #fff;
      outline-offset: 3px;
    }
  </style>
</head>

<body>

  <h2>Focus Cycle Timer</h2>

  <div class="mode" id="mode">Focus Mode</div>

  <div id="timer">60:00</div>

  <button id="startBtn" type="button">Start</button>
  <button id="pauseBtn" type="button">Pause</button>
  <button id="resetBtn" type="button">Reset</button>

  <script>
    const focusTime = 60 * 60;
    const breakTime = 15 * 60;

    let timeLeft = focusTime;
    let isRunning = false;
    let isFocus = true;
    let interval = null;

    const timerDisplay =
      document.getElementById("timer");

    const modeDisplay =
      document.getElementById("mode");

    const startBtn =
      document.getElementById("startBtn");

    const pauseBtn =
      document.getElementById("pauseBtn");

    const resetBtn =
      document.getElementById("resetBtn");

    function updateDisplay() {
      const minutes =
        Math.floor(timeLeft / 60);

      const seconds =
        timeLeft % 60;

      timerDisplay.textContent =
        String(minutes).padStart(2, "0") +
        ":" +
        String(seconds).padStart(2, "0");

      modeDisplay.textContent =
        isFocus
          ? "Focus Mode"
          : "Break Mode";
    }

    function switchMode() {
      isFocus = !isFocus;

      timeLeft =
        isFocus
          ? focusTime
          : breakTime;

      updateDisplay();
    }

    function startTimer() {
      if (isRunning) {
        return;
      }

      isRunning = true;

      interval = setInterval(function() {
        timeLeft--;

        if (timeLeft <= 0) {
          switchMode();
        } else {
          updateDisplay();
        }
      }, 1000);
    }

    function pauseTimer() {
      clearInterval(interval);

      interval = null;
      isRunning = false;
    }

    function resetTimer() {
      clearInterval(interval);

      interval = null;
      isRunning = false;
      isFocus = true;
      timeLeft = focusTime;

      updateDisplay();
    }

    startBtn.addEventListener(
      "click",
      startTimer
    );

    pauseBtn.addEventListener(
      "click",
      pauseTimer
    );

    resetBtn.addEventListener(
      "click",
      resetTimer
    );

    updateDisplay();
  </script>

</body>
</html>