Countdown format like Kickstarter [Solved]

I am trying to create a countdown timer that displays the time that is left for a live campaign by the largest number only (like Kickstarter’s campaign countdown timer).

Here is how I am looking to have it display:
6 5 4 3 2 (Days)
It then switches to:
24 23 22 21 20 19 18 17 16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 (Hours)
Next:
60 59 58 57 56 55 54 53 52 51 50 49 48 47 46 45 44 43 42 41 40 39 38 37 36 35 34 33 32 31 30 29 28 27 26 25 24 23 22 21 20 19 18 17 16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 (Minutes)
Next:
60 59 58 57 56 55 54 53 52 51 50 49 48 47 46 45 44 43 42 41 40 39 38 37 36 35 34 33 32 31 30 29 28 27 26 25 24 23 22 21 20 19 18 17 16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 (Seconds)
Lastly:
1 (Second)

After reading through a bunch of other threads on countdown timers all published at different times I am confused and I am looking to know 3 things:
Can I display the time changing without the user refreshing the page?
Is it possible to build this function without wasting monthly workflow calls?
What would be the most efficient way going about building this?

Yes. Yes. Here’s how:

Set a WF to run “every x seconds.” Set that to run every 1 seconds. Include an action within the workflow that sets the value of a custom state to be the current time. Note - this won’t count against your WF’s run since it’s run entirely client side (i.e., on the users computer).

That is how you get a timer of the current time.

Then, create a text element that shows the amount of time. Have is say X days. Set the logic for the x to be calculated correctly using dynamic values. You may need to use “modulo” to round the time to a full number for number of days. There are some threads in the forum about how to use that with countdown timers.

Then, set a condition on that text field, when number of hours remaining is less than 24 hours then make the text value equal to X hours. And, use similar logic to calculate x.

Do the same for minutes and seconds.

@sridharan.s thank you!! I am relatively new to bubble so please forgive me.

I have the first part with the current time work flow updating every second.

I am now trying to figure out the text element and how it will display the remaining time… would you be able to provide a deeper explanation of that part?

Sure.

Do you understand what I mean by adding conditions to a text box so that it shows days by default and hours, minutes, or seconds if other conditions are met?

Can you look through the forum for an explanation of how to use modulo to display numbers within a countdown timer? …the explanations in the forum are good, and I don’t actually recall how it works off the top of my head.

Yeah I am comfortable setting up conditions. I understand modulos somewhat after reading through the forum I am just stuck on what I put in for my dynamic data as far as calculating the remaining time?

Okay, great.

The calculation will be something along these lines. Let’s say “event time” is when zero seconds are left. I assume this is a field in your database.

So, the math is something like “event time - current time” = number of seconds until event time.

If you want that as days, then you’d need to divide that number by (24 * 60 * 60) [I believe that’s right, but double check]. And, you may need to round that up or down to show the right number.

This make sense so far? If so, see if you can get the days version working first.

How’s this coming along @daniel5?

Thanks to your help I have the math working to show the days but I am still trying to get the conditions to change the text when certain parameters are met.

Great to hear!

One last piece of advice with this then – be sure to check that the timing works for the entire period of time, especially the beginning and end of a transition (e.g., it says 1 day when there is just barely over 1 day and also just barely under 2 days.)

The reason is that it’s easy for it to show the correct time some of the time, but perhaps the rounding is off or something like that and it’s wrong on one end or the other.

Sent you a PM.

@sridharan.s thanks to your help I was able to finally get the countdown timer to work properly without using any workflow calls!

1 Like

Awesome! Glad you got it.

This topic was automatically closed after 70 days. New replies are no longer allowed.