How to Show a Live Countdown Since a Specific Date?

hugoalves · 2024-10-09T13:48:09.036Z

Hi everyone!

I have a timestamp stored in my database, for example: 10-02-2021 11:34:00.

I’d like to display a real-time countdown in a text field, showing the time elapsed since this date until now. It should look something like: “1277 days, 23 hours, 59 minutes, and 0 seconds” with the seconds counting down in real-time.

Any advice would be greatly appreciated!

bubble.trouble · 2024-10-09T15:47:47.522Z

@hugoalves great question! This can be solved in native Bubble which is nice. I’m sure there is more than one way to solve this, but I’ll point you towards a solution.

First you want to reset a date every second. This will allow you to get the real-time countdown since every second the date would be updated. You’ll want to store this in a custom state so that you can access like this:

Screenshot 2024-10-09 at 11.10.48 AM1336×660 56.6 KB

Note that this value is of type “date”. This will allow us to subtract our two dates which Bubble handles nicely. So you want to subtract your “Event Date” from the date in the custom state above which is now changing every second.

When you do this subtraction you will end up with a value in seconds; the number of seconds difference from these two values. The only remaining tasks is to display this in a human readable format (e.g. days/hours/mins/secs) which is a small bit of math.

Days ([seconds difference] / 60 / 60 / 24):
Screenshot 2024-10-09 at 11.19.43 AM

Hours ([seconds difference] / 60 / 60):
Screenshot 2024-10-09 at 11.21.48 AM

Minutes ([seconds difference] / 60):
Screenshot 2024-10-09 at 11.23.22 AM

Seconds([seconds difference])
Screenshot 2024-10-09 at 11.34.25 AM

There is one small detail that is not explained yet. You will note at the end of each date subtraction (with the exception of “Days”) there is an additional subtraction. This is subtracting out all of the previously accounting for “time”. That is to say when we get the difference in “hours”, we don’t want to include all of the days that we have already accounted for in the “Days” total, we only want the remaining hours left in the difference (e.g. “Event Date” - “Current Date” = 22 days 8 hours, to get 8 hours we need the total number of seconds difference with the number of seconds in 22 days removed. If we don’t remove 22 days then we would get 22 days * 24 hours + 8 more hours which would be the total number of hours until the “Event Date”. This would be correct if we trying to specify “hours” until the event. Since we are trying to break it out into days/hours/minutes/seconds we must remove all of the previously accounted for time.

The trick in Bubble is to use an input fields rather than a text fields so that we can easily reference the value in the calculation. Also note the “copy” as we use one input field to store/display and a different field to store/calculate.

Here are the remaining input field calculations.

Screenshot 2024-10-09 at 11.46.45 AM664×514 31.7 KB

Happy Bubbling!

tunacardak · 2024-10-09T15:51:16.536Z

You can use this plugin

Bubble

Templates for Bubble

Buy and sell Bubble templates to speed up app development. Bubble is a visual programing language that lets you build apps without code.

hugoalves · 2024-10-12T15:00:28.947Z

Hi @bubble.trouble ! Thanks for great explanation!

I have two questions, can you help me again?

The txtMinutesCopy, txtHoursCopy and txtDaysCopy are other input fields?

I did not get where did you set their values, for example, the txtDays's value * 24, in txtDaysCopy, references from your first print?

hugoalves · 2024-10-12T15:01:01.703Z

hi @tunacardak ! thanks for your reply, it did not work for days.

tunacardak · 2024-10-12T16:32:20.313Z

It works

Bubble

Bubble - Visual Programming

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

hugoalves · 2024-10-12T18:17:26.021Z

sorry, the countup does not work for months and years

tunacardak · 2024-10-12T21:35:22.856Z

You are right. I improved the plugin and the here is the result

Does it look good?

Hustling-Labs · 2024-10-13T01:32:36.907Z

This is a solution but it’s resource intensive as it triggers a workflow every single second. I think using a plugin, like it’s been pointed out here is the best way to go about it

hugoalves · 2024-10-13T13:26:44.898Z

wow! seems good! are you using countdown? i need to be a countup because it has to be real time from a date until now

can you tell me how to add weeks too? It’s the last thing I ask haha

tunacardak · 2024-10-14T11:15:48.464Z

can you tell me how to add weeks too? It’s the last thing I ask haha

You can ask any question any time

I just created a new plugin and published it. I’ll let you know when it’s approved.

hugoalves · 2024-10-14T12:59:59.406Z

@tunacardak, what is its name? the link you gave previously is made by Assade

tunacardak · 2024-10-14T13:34:31.487Z

It’s live now. The name is Countup and it’s my first plugin

system · 2024-12-18T13:48:42.905Z

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