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

Pomodoro timer using Tailwind, React, Typescript and SVG voodoo

P
Jose Monge 340

@josemongedev

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


Well I didn't expect this to be this challenging, I enjoyed it a lot though. I had to rewrite the timer hooks to be able to setup the different timers accordingly and reset the controls when any change happens. The SVG animation was also hard, at the end I just tailored it for tablet and desktop dimensions and scaled it down for the mobile screen size using scale class in tailwind. It's probably better to try regular CSS for animations, rather than trying to use tailwind for everything.

Community feedback

@SebastianDev-Vue

Posted

Good job on completing this challenge.

The only detail or "problem" I see is that the timer starts two seconds less than the set time. I think maybe it's because of the interval in the code or I don't know if you used it inside a useEffect, but again this is an amazing job. Keep it up !

1

P
Jose Monge 340

@josemongedev

Posted

@SebastianDev-Vue Thanks, yeah I noticed that as well, and I did use useEffect hook(which is async) with setInterval(sync) inside.The hook clears the interval ID to avoid creating a new interval every time a variable in the dependency list changes, but it's slow at the start when the setup is done. I tried using useLayoutEffect, but got worse results. Hmm I need to think about it more and maybe refactor it, thanks for the tip anyway!

0
jeanmax1me 160

@jeanmax1me

Posted

nice, when you start a chronometer it automatically jumps 2 seconds kind of weird

1

P
Jose Monge 340

@josemongedev

Posted

@jeanmax1me Yeah thanks, I was examining that bug before and noticed that behavior. I'll try to fix it later! Thanks!

1

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