Countdown timer

Wappler General How To
#1

I have a countdown timer that will always count doen between 6 am today and 6 am tomorrow. I am trying to follow alomg with this thread on DMXZone website, but not having any luck:

DMX Thread

is it better to do whole calc on backend and then send hours, minutes and seconds back or just format on front end.

To sum up I need hours, minutes and seconds from now to time I have in db.

Please help :slight_smile:

#2

Hello, so following the topic you mention - what is not right?

#3

my set value field with output from back-end is called end. So in front end I bind by entering this:

{{now.hoursUntil(end)}}

end is formatted like this to get to 6 am tomorrow {{bidenddate.dateAdd(ā€œhoursā€, 6)}}

But I think maybe the fields needs formatting before adding hoursuntil?

#4

Hey @Teodor - do you have any pointers for me please?

#5

Please provide a link to your page where i can check this.

#6

Only getting back to you nowā€¦ but here is the page. It will shut down tomorrow at 6 but I will activate it again.

In room name section at top I have the hours, minutes, seconds till the next morning at 6 am.

https://askbob.co.za/bids.php?id=41

My code looks like this

{{serverconnect_bids.data.now.hoursUntil(serverconnect_bids.data.tomorrow).floor()}} / {{serverconnect_bids.data.now.minutesUntil(serverconnect_bids.data.tomorrow).floor()}} / {{serverconnect_bids.data.now.secondsUntil(serverconnect_bids.data.tomorrow).floor()}}

I just need it to count down on the page and show it.

#7

But have you checked my reply in the topic you mentioned?
Your formatting is not what I described there:

1. Create a datetime component and set its interval to seconds:

2. Days would be: 
{{(var1.datetime.secondsUntil("2018-09-14") / 86400).floor()}}

3. Hours:
{{((var1.datetime.secondsUntil("2018-09-14") / 3600) % 24).floor()}}

4. Minutes
 {{((var1.datetime.secondsUntil("2018-09-14") / 60) % 60).floor()}}

Replace the date in my example with your dynamic data.

1 Like
#8

Thanks for the feedback. I changed as per your example. Only added seconds as well and excluded devide by 60 for it. Only thing now is that mine is not counting down on the screenā€¦ Its stays static.

    {{((serverconnect_bids.data.now.secondsUntil(serverconnect_bids.data.tomorrow) / 3600) % 24).floor()}} /
    {{((serverconnect_bids.data.now.secondsUntil(serverconnect_bids.data.tomorrow) / 60) % 60).floor()}} /
    {{(serverconnect_bids.data.now.secondsUntil(serverconnect_bids.data.tomorrow) % 60).floor()}}
#9

Is your datetime component set to seconds?

#10

To be honost I did not know this componant existed and had to be added :scream:

Did add it now:

But still not the countdown.

#11

But you should assign its value as a value you compare to the database value. Just check my explanation in the dmxzone topic you said you followed. Check my code example as well.

#12

Thanks Teodor. I understand the examples better now, except for the minutes, I need it to remain without decimals. Any pointers there: https://askbob.co.za/bids.php?id=41

48

#13

Have you added .floor() to the minutes as per my example?

#14

This is how my code looks now:

{{(var1.datetime.hoursUntil(serverconnect_bids.data.tomorrow)).floor()}} HOURS
{{((var1.datetime.secondsUntil(serverconnect_bids.data.tomorrow)) / 60) % 60).floor()}} MIN
{{(var1.datetime.secondsUntil(serverconnect_bids.data.tomorrow)) % 60).floor()}} SECONDS
#15

In comparing the code that works and code that doesnā€™t work it appears you have an extra ā€˜(ā€™ near the beginning of line two?

#16

Thanks @brad, removed it, but still getting the minutes in real time decimalsā€¦

#17

The minutes code is wrong and was wrong before also.
It should be:

{{(((var1.datetime.secondsUntil(serverconnect_bids.data.tomorrow)) / 60) % 60).floor()}}

Please be careful and always make sure the number of open brackets is the same as the number of close brackets :slight_smile:

2 Likes
#18

Awesome! Thanks @Teodor!

#19

Hi @Teodor - Iā€™m implementing this. Iā€™m using the following code:

{{var1.datetime.timeUntil(end_date, 'true')}}

This works great, but has an output of: hours, minutes and seconds e.g.:

240:51:52

If I try to format it, it fails and wonā€™t render at all.

{{var1.datetime.timeUntil(end_date, 'true'.formatDate('dd-MM-yyyy HH:mm:ss'))}}

If I try using the structure of your code above e.g.

{{(((var1.datetime.timeUntil(end_date, 'true')) / 60) % 60).floor()}}

I just get NaN indicating I have something wrong here.

I have tried combining multiple formatters to get the desired output e.g.

{{(((var1.datetime.secondsUntil(end_date))/ 86400) % 60).floor()}}d {{(((var1.datetime.secondsUntil(end_date))/ 3600) % 24).floor()}}m {{(((var1.datetime.secondsUntil(end_date)) / 60) % 60).floor()}}s left

This works - but then the counter does not count down live for some reason.

This is the output Iā€™d like to get:
22d 54m 45s left

Any help appreciated.

#20

Well, most probably your datetime variableā€™s interval is not set to seconds