Pomodoro Timer
Hard · Timers
Build a (very fast) pomodoro timer. Goal: practise useReducer for the timer state.
Show <p className="phase">Work</p>, <p className="time">3</p>, <p className="sessions">Sessions: 0</p>, a "Start" button and a "Reset" button.
- "Start" starts the timer and its text changes to "Pause". "Pause" stops the timer and the text goes back to "Start".
- While running, the timer ticks every 200ms. Each tick decreases the time by 1.
- When the time would reach 0, the phase switches instead: Work becomes Break with time 2, and Break becomes Work with time 3.
- Every finished Work phase adds 1 to Sessions.
- "Reset" stops the timer and goes back to Work, 3 and Sessions: 0.
Stop the interval in the useEffect cleanup.
Next: Undo / Redo Editor