Responsive Pomodoro timer in React/Material UI/TypeScript
Solution retrospective
I capped out the time to no more than 500 minutes which works out to be 8h and 20min and no less than 1 min. Also the progress updates every second. I tried to make it look as close to the Figma diagrams as possible.
Some of the debatable functionality I did was when the timer reaches 0 it won't go from say Pomodoro to Short Break automatically. The reason is on the Figma diagrams they have a screenshot of the timer with a "Restart" state when it reaches 0 seconds which would never occur if it advances to another tab. I tried to match the requirements as given even though I do agree it should go automatically to Short Break after it finishes at Pomodoro.
Hope to hear any feedback!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @MarcinFiuk
Hi Curtis :)
Overall, the code works how you intended it to work. However, I agree that the Figma and readme file are not clear how pomodoro works. I found pomodoro definition "The pomodoro technique is a time management method based on 25-minute stretches of focused work broken by 3-to-5 minute breaks and 15-to-30 minute breaks following the completion of four work periods". I think it should automatically move to the next step and stop when it goes the whole set.
I noticed that when you update the color and font it doesn't apply to modal and they stay unchanged.
I hope this helps
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord