Pomodoro timer using Tailwind, React, Typescript and SVG voodoo
Design comparison
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-VuePosted over 1 year ago
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@josemongedevPosted over 1 year ago@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 - @jeanmax1mePosted over 1 year ago
nice, when you start a chronometer it automatically jumps 2 seconds kind of weird
1@josemongedevPosted over 1 year ago@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
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