Pomodoro Focus Timer

The Pomodoro technique involves 25 minutes of focus followed by a 5-minute break. This project integrates setInterval with a SVG circular progress bar.

The Core Timer

We convert total minutes into seconds and tick down every 1000ms.

let time = 25 * 60; // 25 mins
let isRunning = false;
let interval;

function updateDisplay() {
  const min = Math.floor(time / 60).toString().padStart(2, '0');
  const sec = (time % 60).toString().padStart(2, '0');
  document.getElementById('display').innerText = `${min}:${sec}`;
}

function startTimer() {
  if (isRunning) return;
  isRunning = true;
  interval = setInterval(() => {
    time--;
    updateDisplay();
    if (time <= 0) {
      clearInterval(interval);
      alert("Session Complete!");
    }
  }, 1000);
}

Try the Live Demo to see the interactive circular ring that animates as the timer decreases!