Code a JavaScript Countdown Timer with a Flip Clock

In this JavaScript beginner tutorial, we'll code a cool looking flip clock that can be used as countdown timer.

00:00 Intro
00:48 Markup
04:52 Styles
13:26 Animation
19:29 JavaScript
47:54 Conclusion

So in this Javascript countdown timer tutorial for beginners I will show you the basics of creating a flip clock with some simple HTML markup and CSS.

I'll then use some CSS animations to animate the flipping over the segments of the clock to give a realistic flip clock animation.

I'll then finally show you how to create the JavaScript code for this flip clock countdown timer to automatically countdown to a preset date and time updating each of the particular digits within the countdown timer all whilst animating each digit with the flip effect.

#javascript #javascriptproject #javascriptbeginners Channel Handle @codebubb

[codewithbubb]

Here's a bit of an extra challenge: can you extend the project to include days (as well as hours, minutes, seconds)? Have a tinker with the Codepen and create your own version!

[alexanderpoplawski]

Great Tutorial. Didn't expect the solution to keep the unchanged digits from animating to be so simple.

[fede]

I get a TypeError: Cannot set properties of null (setting 'textContent') and it points to the line of code you wrote at 24:21. Even after copying the code from your CodePen!

There's no elements called displayElement and overlayElement, so what is it updating?

[trentanderson]

Hi, Bubb! Thank-you so much for all of your help with the countdown timer. Is there a way to make the countdown date UTC essentially? I'm hoping to find a way so that no matter where the countdown is set, the countdown timer will show up the same for everyone no matter where they are in the world. So, for example, say it's July Third, 2024 at 10:00 AM Eastern Standard Time, and I'm in New York City. I set the countdown date to July Fifth, 2024 at 2:00 PM, which is 52 hours from the time I set the countdown timer (so, the timer should read 52:00:00). On July Fifth at 1:00 PM Eastern Standard Time in New York City, there should be showing 01:00:00 left on the countdown timer. I also want my friend in Los Angeles California (where they're three hours behind me in New York City) to see that one hour is remaining at 1:00 PM Eastern Standard Time/10:00 AM Pacific Standard Time. So, my friend in California should also see 01:00:00 on the countdown timer at 10:00 AM Pacific Standard Time in Los Angeles, California. Is there a way to help ensure this happens? Thanks!

So, essentially I want everyone in the world to have the same UTC countdown date/time, which, in the above example, would be 6:00 PM, July Fifth, 2024.

[DominikaLochmanova]

Hi, I honestly loved your tutorial but is it possible to make it so that the flipclock starts after clicking on it and not immediately after I load the website?

[trentanderson]

Thanks so much, Bubb! I followed your video, and the finished result (after taking care of maybe a couple of issues/bugs and adjustments of my own) has been awesome! I was hoping to maybe go further and build this as a plugin on Shopify or something I could market on Upwork to make for clients for profit. I don't want to just take your idea and much or all of the code you've shared and profit for myself, but I think this could be a great thing to share and make more accessible on multiple platforms. Do you have any thoughts on this in particular?

[philyu]

did the time shows same with system time？

[douglas]

I Am Trying To Use The Code Twice At The Same Page But, It Does Not Work? Could Someone Help Me?