A clean, customizable pomodoro timer to help you set up distraction-free focus time.
The Pomodoro Technique is a method of time management where you divide your work into long-ish focus blocks (e.g. 25 minutes) with shorter breaks in between (e.g. 5 minutes). Every 4 pomodoros, you should take a longer break (e.g. 10 min).
Created as my final project for the FreeCodeCamp Frontend Frameworks certificate. Bootstrapped with Create React App.
>> Try it out!
For simplicity, the '+' and '-' buttons only appear when user mouses over "Focus Time" or "Break Time" controls.
For mobile users all controls are always visible.
- Add link to github
- Add ability for user to switch to dark mode
- I looked at awwwards and dribbble for design inspo.
- This answer explains that a
switchcan be written either with or without brackets for each case. Mind blown. - I took some pointers from this simple redux stopwatch.
- However I had to change
getStatetogetState()for it to work. Thanks to this answer. - Implementing this also taught me about thunks.
- However I had to change
- How to add seconds and minutes to current time with date-fns.
- Playing audio in React
- Using Audio() objects. I wanted to do it this way, but one of the FreeCodeCamp requirements is to use an
<audio>tag. - Using refs. This codepen introduced me to
React.createRef()which helped to play audio using<audio>tags in React.
- Using Audio() objects. I wanted to do it this way, but one of the FreeCodeCamp requirements is to use an
- Browser extension to avoid distracting sites 💯