Pomodoro Countdown Timer — Free HTML CSS JS Snippet

<div class="pcd-wrap">
  <div class="pcd-tabs" id="pcdTabs">
    <button class="pcd-tab pcd-tab-active" data-mode="focus" data-mins="25">Focus</button>
    <button class="pcd-tab" data-mode="short" data-mins="5">Short Break</button>
    <button class="pcd-tab" data-mode="long" data-mins="15">Long Break</button>
  </div>

  <div class="pcd-display" id="pcdDisplay">25:00</div>
  <div class="pcd-status" id="pcdStatus">Ready to focus</div>

  <div class="pcd-controls">
    <button class="pcd-btn pcd-btn-primary" id="pcdStartBtn">Start</button>
    <button class="pcd-btn" id="pcdResetBtn">Reset</button>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }

.pcd-wrap { width: 100%; max-width: 340px; background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 28px; text-align: center; box-shadow: 0 16px 36px rgba(30,41,59,0.08); }

.pcd-tabs { display: flex; gap: 6px; background: #f1f5f9; padding: 4px; border-radius: 12px; margin-bottom: 24px; }
.pcd-tab {
  flex: 1; padding: 8px 6px; border: none; background: none; border-radius: 9px; font-family: inherit;
  font-size: 11.5px; font-weight: 700; color: #64748b; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.pcd-tab-active { background: #fff; color: #1e293b; box-shadow: 0 2px 6px rgba(30,41,59,0.08); }

.pcd-display { font-size: 56px; font-weight: 800; color: #1e293b; font-variant-numeric: tabular-nums; letter-spacing: -1px; margin-bottom: 6px; }
.pcd-display.pcd-done { color: #ef4444; }
.pcd-status { font-size: 12.5px; color: #94a3b8; font-weight: 600; margin-bottom: 22px; }

.pcd-controls { display: flex; gap: 10px; }
.pcd-btn {
  flex: 1; padding: 12px; border-radius: 12px; border: 1.5px solid #e2e8f0; background: #fff; color: #475569;
  font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all 0.15s;
}
.pcd-btn:hover { background: #f8fafc; }
.pcd-btn-primary { background: #6366f1; border-color: #6366f1; color: #fff; }
.pcd-btn-primary:hover { background: #4f46e5; }

const MODE_LABELS = { focus: 'Ready to focus', short: 'Time for a short break', long: 'Time for a long break' };
const NEXT_MODE = { focus: 'short', short: 'focus', long: 'focus' };

const tabs = document.querySelectorAll('.pcd-tab');
const display = document.getElementById('pcdDisplay');
const statusEl = document.getElementById('pcdStatus');
const startBtn = document.getElementById('pcdStartBtn');
const resetBtn = document.getElementById('pcdResetBtn');

let currentMode = 'focus';
let durationMs = 25 * 60 * 1000;
let endTime = null;
let remainingMs = durationMs;
let running = false;
let tickId = null;

function formatTime(ms) {
  const totalSeconds = Math.max(0, Math.ceil(ms / 1000));
  const mins = Math.floor(totalSeconds / 60);
  const secs = totalSeconds % 60;
  return String(mins).padStart(2, '0') + ':' + String(secs).padStart(2, '0');
}

function render() {
  display.textContent = formatTime(remainingMs);
  display.classList.toggle('pcd-done', remainingMs <= 0);
}

function setMode(mode, mins, skipStatusReset) {
  currentMode = mode;
  durationMs = mins * 60 * 1000;
  remainingMs = durationMs;
  running = false;
  endTime = null;
  clearInterval(tickId);
  startBtn.textContent = 'Start';
  if (!skipStatusReset) statusEl.textContent = MODE_LABELS[mode];
  tabs.forEach((t) => t.classList.toggle('pcd-tab-active', t.dataset.mode === mode));
  render();
}

function tick() {
  remainingMs = endTime - Date.now();
  if (remainingMs <= 0) {
    remainingMs = 0;
    render();
    clearInterval(tickId);
    running = false;
    statusEl.textContent = "Time's up!";
    startBtn.textContent = 'Start';
    const next = NEXT_MODE[currentMode];
    const nextMins = next === 'focus' ? 25 : (next === 'short' ? 5 : 15);
    setTimeout(() => {
      setMode(next, nextMins, true);
      statusEl.textContent = MODE_LABELS[next] + ' (up next)';
    }, 1800);
    return;
  }
  render();
}

function start() {
  if (running) return;
  running = true;
  endTime = Date.now() + remainingMs;
  statusEl.textContent = currentMode === 'focus' ? 'Focusing...' : 'On a break...';
  startBtn.textContent = 'Pause';
  tickId = setInterval(tick, 250);
}

function pause() {
  running = false;
  clearInterval(tickId);
  remainingMs = Math.max(0, endTime - Date.now());
  startBtn.textContent = 'Start';
  statusEl.textContent = 'Paused';
  render();
}

startBtn.addEventListener('click', () => {
  if (running) pause();
  else start();
});

resetBtn.addEventListener('click', () => {
  const mins = parseInt(document.querySelector('.pcd-tab-active').dataset.mins, 10);
  setMode(currentMode, mins);
});

tabs.forEach((tab) => {
  tab.addEventListener('click', () => {
    setMode(tab.dataset.mode, parseInt(tab.dataset.mins, 10));
  });
});

render();