DEV Community

Cover image for Clocks & Countdowns: Timing in CSS and JavaScript

Clocks & Countdowns: Timing in CSS and JavaScript

Mads Stoumann on September 01, 2023

The other day I needed a digital clock-component, so I quickly composed a simple JavaScript-method: function uiDigitalClock(node) { const now ...
Collapse
 
alvaromontoro profile image
Alvaro Montoro

Nice article.

It's funny how the setTimeout solution is clearly running slower than the others in the demo. It gets behind in just a few seconds.

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you! I think stable timing in JS is difficult — once I tried to make a drum sequencer, but the timing was off after random amounts of time!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Have you tried using requestAnimationFrame but tracking the dates with counters, only calling Date() after X ticks to make sure the clock is on time? I think that may be the most accurate (and efficient?) of all the methods.

Thread Thread
 
madsstoumann profile image
Mads Stoumann • Edited

No, but good idea! For the drum-sequencer, I think I ended up using the AudioContext as the “timing source of truth”.

Collapse
 
peerreynders profile image
peerreynders

You have to take the drift of the setTimeout() into account when you schedule the next frame. See:

JavaScript counters the hard way - HTTP 203 - YouTube

You’ve seen loads of counter tutorials online, but they’re all a bit wrong… or at least most of them are. Jake and Surma dissect different techniques and ide...

favicon youtube.com
Thread Thread
 
madsstoumann profile image
Mads Stoumann

Interesting to use performance.now, I’ve only seen that used in testing. Thanks for sharing!

Collapse
 
hugaidas profile image
Victoria • Edited

This is very inspiring, how we can make performant components without moment.js, thank you for sharing! I will try to implement this by myself. But I have a question - why did u decide to consult with Bard? Is it better than chapt GPT?

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you! Bard: No particular reason, just trying it out, comparing code-suggestions with chatGPT etc.

Collapse
 
hugaidas profile image
Victoria

Okay, got it! :)

Collapse
 
wraith profile image
Jake Lundberg

Really nice article. I never would have thought to try using CSS for this, very creative.

Keep up the awesome work!

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!

Collapse
 
tqbit profile image
tq-bit

Great article. One of these days, we'll have a CSS-only frontend framework out there.

Collapse
 
leomiguelb profile image
Leo

hopefully...

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!

Collapse
 
jonathanbolibenga01 profile image
jonathan

J'ai aimé votre article je me suis exercer à faire la même chose... Merci beaucoup

Collapse
 
madsstoumann profile image
Mads Stoumann

Merci

Collapse
 
jonathanbolibenga01 profile image
jonathan

Vous êtes un dev front-end ?

Thread Thread
 
madsstoumann profile image
Mads Stoumann • Edited

Yes, since 1995 — when it was called "webmaster / web-developer" 😂

Thread Thread
 
jonathanbolibenga01 profile image
jonathan

Moi je débuté cette année avec JavaScript du côté back-end

Collapse
 
codewithahsan profile image
Muhammad Ahsan Ayaz

This is awesome 💖 Loved your writing style and presenting your analysis throughout, like a journey. This is definitely something I can use for focusdoro.app
Kudos!

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you! Happy to hear that!

Collapse
 
ademagic profile image
Miko

Really insightful and well broken down. Thanks!

Collapse
 
madsstoumann profile image
Mads Stoumann • Edited

Thank you!

Collapse
 
attallah1981 profile image
attallah guehiri

جيد جدا

Collapse
 
madsstoumann profile image
Mads Stoumann

شكرا لك!

Collapse
 
madsstoumann profile image
Mads Stoumann

Hope Apple Translate did it properly 😉

Collapse
 
artydev profile image
artydev

Really nice thank you

Collapse
 
zirkelc profile image
Chris Cook

You got a nice writing style! :-)

Collapse
 
madsstoumann profile image
Mads Stoumann

Happy to hear that, thank you!

Collapse
 
parzival_computer profile image
Parzival

Absolutely fabulous !

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!

Collapse
 
soutovnc profile image
Vinicius de Souto

Nice article.

This clock turned out amazing.

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!

Collapse
 
scnowak profile image
Shan Nowak

I learned how pseudo elements can really make your website pop.