Skip to content
Submitted over 2 years ago

Vanilla JS, syncing of progress bar in CSS with JS timer

animation
Geochi Nova•40
@ar78studio
A solution to the Pomodoro app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

All feedback is welcome! :)

  1. One of the improvements I'm working on is the: new Date().getTime() as there is a slight drift over-time with the progress bar if using setInterval() only.
  2. The progress bar is counting seconds and is showing the progress of each minute passed, I would also like to have the progress bar display total time elapsed/remaining.
Code

Please log in to post a comment

Log in

Community feedback

  • Danilo Parra Jr•430
    @daniloparrajr

    Hi Geochi,

    You can follow this video by Google Chrome Developers about JavaScript accurate timer. I used this in my solution also.

    Another suggestion is to actually use an existing pomodoro app to compare how it works, like the pomofocus app

    Hope this helps, all the best!

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