Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Pomodoro timer in React/Material UI/TypeScript

P
Curtis 890

@webguy83

Desktop design screenshot for the Pomodoro app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

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

P
MarcinFiuk 260

@MarcinFiuk

Posted

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

0

P
Curtis 890

@webguy83

Posted

@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
P
MarcinFiuk 260

@MarcinFiuk

Posted

@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
P
Curtis 890

@webguy83

Posted

@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
Discord logo

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