Skip to content
Submitted almost 2 years ago

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

Geochi Nova•40
@ar78studio
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Pomodoro app
  • HTML
  • CSS
  • JS
4advanced

Design comparison

SolutionDesign

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.

Community feedback

  • Danilo Parra Jr•390
    @daniloparrajrPosted over 1 year ago

    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!

    0

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