🍅Pomodoro Clock ⏱with React

Pomodoro Clock. The name has its own charm already. I love pomodori (the tomatoes in Italian) and I’ve lived in Italy, but regardless how much interests I have in Pomodoro, I didn’t know what it was for.

Pomodoro Technique

So it is more like a timer than a clock. You can set a session time, 25 mins by default, and a break time, 5 mins by default. Every period finishes, it gives you an alarm. It is a very useful tool for people with short focusing ability like I have.

I used beep sound to alarm the change of session and tried to make a flat design on the page with colors of pomodoro.

https://poianakim.github.io/pomodoro/

I’ve built this single page web site with React. This was one of the front end projects in freeCodeCamp.org and I refactored the codes with Hooks. The memorable things during the refactoring was the use of ‘setInterval()’. Since it’s not working in useEffect(), I needed to use it with useRef().

POMODORO CLOCK