🍅 Build a Pomodoro Timer Web App

Track elapsed time, update the display, and animate the ring.

// app.js
const MODES = { work:25*60, short:5*60, long:15*60 };
const CIRCUMFERENCE = 2 * Math.PI * 96; // ~603

let currentMode = 'work';
let totalSecs, remaining, interval, running = false, sessions = 0;

function setMode(mode) {
  clearInterval(interval); running = false;
  document.getElementById('startBtn').textContent = 'Start';
  document.querySelectorAll('.mode-btn').forEach((b,i) =>
    b.classList.toggle('active', ['work','short','long'][i] === mode));
  const ring = document.getElementById('ring');
  ring.classList.toggle('break', mode !== 'work');
  document.getElementById('startBtn').style.background = mode === 'work' ? '#e74c3c' : '#22c55e';
  currentMode = mode;
  totalSecs = remaining = MODES[mode];
  updateDisplay();
  updateRing(1);
}

function updateDisplay() {
  const m = Math.floor(remaining / 60);
  const s = remaining % 60;
  document.getElementById('display').textContent =
    `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;
  document.title = `${document.getElementById('display').textContent} — Pomodoro`;
}

function updateRing(fraction) {
  const offset = CIRCUMFERENCE * (1 - fraction);
  document.getElementById('ring').style.strokeDashoffset = offset;
}

function toggle() {
  if (running) {
    clearInterval(interval); running = false;
    document.getElementById('startBtn').textContent = 'Resume';
  } else {
    running = true;
    document.getElementById('startBtn').textContent = 'Pause';
    interval = setInterval(() => {
      remaining--;
      updateDisplay();
      updateRing(remaining / totalSecs);
      if (remaining <= 0) {
        clearInterval(interval); running = false;
        if (currentMode === 'work') {
          sessions++;
          document.getElementById('sessionCount').textContent = sessions;
        }
        notify(currentMode === 'work' ? 'Work session done! Take a break.' : 'Break over! Time to work.');
      }
    }, 1000);
  }
}

function reset() {
  clearInterval(interval); running = false;
  document.getElementById('startBtn').textContent = 'Start';
  remaining = MODES[currentMode];
  updateDisplay(); updateRing(1);
}

function notify(msg) {
  if (Notification.permission === 'granted') {
    new Notification('🍅 Pomodoro', { body: msg });
  } else {
    alert(msg);
  }
}

// Request notification permission on load
if (Notification.permission === 'default') Notification.requestPermission();

setMode('work');