Responsive Pomodoro timer in React/Material UI/TypeScript
Design comparison
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!
Community feedback
- @MarcinFiukPosted over 2 years ago
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 helpful0@webguy83Posted over 2 years ago@MarcinFiuk thanks for the feedback! Yeah .. do you think it should go from like Pomodoro > Short Break > Pomodoro > Long Break then stop right after that? I guess that is what they intended. If it is I can implement that logic for sure. As for the modal I think in the Figma they didn't have the change in place for the modal so I left it out. Having the white text on say a light blue color Apply button would be sooo hard to read too. I wish the Figma diagrams for this project were more accurate :/. I was trying to make things as exact as it was designed on there.
0@MarcinFiukPosted over 2 years ago@webguy83 I think i should go like: Pomodoro > Short Break > (first period) Pomodoro > Short Break > (second period) Pomodoro > Short Break > (third period) Pomodoro > Long Break> RESET (fourth period)
You are right and Figma doesn't have that functionality (change modal font and color). I just assume it would be consistent to change it as well (personal opinion).
0@webguy83Posted over 2 years ago@MarcinFiuk so if that's the case then what happens if the user clicks another tab item like in this example? https://pomofocus.io/. Does it reset back to the beginning? Ah well I think I sort of see the idea of this one and will just make modifications later.
0
Please log in to post a comment
Log in with GitHub
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