Design comparison
SolutionDesign
Solution retrospective
I found this project to be quite challenging. I couldn't find any other way to create a circular progress bar besides using SVG.
To manage states I've used React Recoil. breakTypeAtom to manage which break is active and the actual time of it, settingsAtom is taking care of which color, and font is activated, if Modal is open, and if the clock is paused.
Current font and color I passed through useSettings hook.
Community feedback
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