Przejdź do głównej zawartości
Codex13

03. Timer Pomodoro

Cel projektu

Dział zatytułowany „Cel projektu”

Zbudujesz timer do techniki Pomodoro — 25 minut pracy, 5 minut przerwy, po 4 cyklach dłuższa przerwa (15 min). Z powiadomieniami dźwiękowymi i historią sesji.

Czego się nauczysz?

  • Praca z setInterval i clearInterval w React (useEffect)
  • Maszyna stanów (work → short-break → long-break → work)
  • Web Notifications API
  • Dokładne odliczanie czasu w JS

Co ma robić aplikacja?

Dział zatytułowany „Co ma robić aplikacja?”

Stany timera

Dział zatytułowany „Stany timera”
const PHASES = {
  work: { label: 'Praca', duration: 25 * 60 },
  shortBreak: { label: 'Krótka przerwa', duration: 5 * 60 },
  longBreak: { label: 'Długa przerwa', duration: 15 * 60 },
};


// Sekwencja: work, shortBreak, work, shortBreak, work, shortBreak, work, longBreak

Implementacja timera

Dział zatytułowany „Implementacja timera”
function usePomodoroTimer() {
  const [phase, setPhase] = useState('work');
  const [timeLeft, setTimeLeft] = useState(PHASES.work.duration);
  const [isRunning, setIsRunning] = useState(false);
  const [completedPomodoros, setCompletedPomodoros] = useState(0);


  useEffect(() => {
    if (!isRunning) return;


    const interval = setInterval(() => {
      setTimeLeft((prev) => {
        if (prev <= 1) {
          // Przejście do następnej fazy
          handlePhaseEnd();
          return 0;
        }
        return prev - 1;
      });
    }, 1000);


    return () => clearInterval(interval);
  }, [isRunning]);


  function formatTime(seconds) {
    const m = Math.floor(seconds / 60).toString().padStart(2, '0');
    const s = (seconds % 60).toString().padStart(2, '0');
    return `${m}:${s}`;
  }


  return { phase, timeLeft, isRunning, completedPomodoros, formatTime, setIsRunning };
}

Warianty realizacji

Dział zatytułowany „Warianty realizacji”
  • Timer z odliczaniem 25/5 minut
  • Start, pauza, reset
  • Automatyczne przejście do przerwy po zakończeniu
  • Wizualny pasek postępu
  • Tytuł strony pokazuje czas (document.title)
Ocena: 3.0

Do dzieła!

Dział zatytułowany „Do dzieła!”

Powodzenia!

Timer Pomodoro to klasyczny projekt React — pokazuje jak pracować z setInterval w useEffect bez memory leaks. Pamiętaj o cleanup funkcji w useEffect! Brzmi prosto, ale prawidłowa maszyna stanów (praca → przerwa → praca) wymaga przemyślanej logiki.