A Flexible Countdown Timer

Hi Jonathan!
Thank You for this! :slight_smile: I am new at coding and Hype as well, but so far I think that Hype is amazing!
I need to create a banner which is counting down to 19:00 o'clock every day, so the countdown timer has to refresh itself to the following day when reached at 19:00. I can't seem to figure it out.

If anybody would help me I would be super-grateful! :slight_smile:

I made some adjustments so that it will reset for the day when it gets to 0. Feel free to give it a try:

FlexibleCountdownTimer-day.hype.zip (68.8 KB)

You'll probably need to hide the day part, since it would always show 0.


OMG THANK YOU!!!!! :heart::heart::heart:

Everything works now perfectly!!!


how to make days can be 3 digit:


The class name itself embeds how many digits you want. So if you want days to have 3 digits (including 0 padding), then you would select the day element, and adjust Class Name in the Identity Inspector from countdown_days countdown_format_1 to countdown_days countdown_format_3.

For the inner html version, you'd likewise change:

<span class="countdown_days">0</span>d


<span class="countdown_days countdown_format_3">0</span>d

1 Like

how to use that in your "flexible countdown timer" ?
it's look different

3 days… version of the mechanical countdown:
MechanicalLetterCountdownTimer-3days.hype.zip (74,6 KB)


2 posts were split to a new topic: Display problems in wedding invitation

thank you so much... this is perfect countdown.

But your countdown day and hour always be 222:22:
when I preview on my mac and mobile with hype reflect it's working clearly, but when I upload in my hosting, the countdown is always be like that.

this is my file: