Best Countdown Timer for the new Eventus Template

I Need Help
1

Hi,
I’ve been playing around with the new ‘Eventus’ Template that came with the Blocs 5.1 update. The template has a countdown section, but its not coded, I was wondering what would be the best countdown timer to use in the code widget?

2

Hi @Peter

We had several posts on this a while back on the link below.
Its pretty basic compared to what others are using but with some code I guess this can styled nice.

3

A touch of JavaScript is all you need for a Low Code solution. Ensure the IDs are assigned accurately, and your counter will function properly. When you review the script, you’ll see that the counter will be replaced with a different element once it hits the specified date/time.

Small Potato Ltd 04-07-2023 at 06.14

<script>
const end = new Date("September 07, 2023 09:00:00").getTime();
const dayEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');
const seconds = 1000;
const minutes = seconds * 60;
const hours = minutes * 60;
const days = hours * 24;

const x = setInterval(function () {
  let now = new Date().getTime();
  const difference = end - now;
  
  if (difference < 0) {
    clearInterval(x);
    document.getElementById("done").innerHTML = "The Concert has Started";
    return;
  }
    
  dayEl.innerText = Math.floor(difference / days);
  hoursEl.innerText = Math.floor( (difference % days) / hours );
  minutesEl.innerText = Math.floor( (difference % hours) / minutes );
  secondsEl.innerText = Math.floor( (difference % minutes) / seconds );  
}, seconds);
</script>
2 Likes
4

I’ll give this a go later too :+1:

5

One thing to be aware of is time zones. That code will display the users time, not necessarily the website / business location. Which may or may not be an issue for its use case.

I would amend it to be a specific time zone personally.

1 Like
6

I would first start by adding months to the script to make it fully compatible with this template. :grin:

Now you got 2 ways of doing so. 1. The lazy route and take 30.44 days as an average month length or go for the full comprehensive method, requiring a complete calculation.

But I agree, a timezone would be handy in some cases.

7

Hi Jerry

Many thanks for the input, I’m not sure where in Blocs you assign the ID’s? do you use a container and just add the ID, or do you create a class?

cheers

Pete

8

Just wrap the number in a span and give it the ID.

Small Potato Ltd 04-07-2023 at 16.59

9

Thanks for your help Jerry, works a treat

regards

Pete

10

@Jerry You should package that up as a custom bric and offer it for sale, handy extension to that events template.

LowCode for the win :smile:

1 Like
11

What would be brilliant if possible if this could be added into the template with a small popup or PDF showing how can be styled and adjusted! - now that would be brilliant!!! @Helen will love to do that ! @Jerry will want some form of commission payment for the code though :rofl:

12

Or he can commission me to make it, and then collect a commission off you guys after paying me a commission, and then Helen gets a commission because she made such a great template. And if we were in the military, we all deserve a commission for our efforts. :upside_down_face:

1 Like
13

Do I get a commission for putting the idea forward to add it to the template…just wondering, we can all share a slice of the pie! :pie: :rofl:

14

You can sit in the corner and think about what you did. :thinking:

15

Thats fine ! - the last 2 weeks have been that hectic and this weekend coming up, I can do with a sit down ! :chair: :laughing:

1 Like
16

That’s why I basically had a long weekend break. Friday - Monday. It was nice.

Good timing too. Tuesday morning started with client emails and urgent updates. :joy:

1 Like
17

I’ll drop off some puppies to play with. :dog: :dog:

2 Likes