Multiple countdown timers on one page

Hi,

Does anyone know how to get two countdowns on the same page without problems?

I have been looking around and this seems to be the only successful attempt to achieve this, Can we have 2 countdown timers on the same page? if anyone could let me know how I could reproduce this effect with more countdowns I would really appreciate it!

Thank you in adavnce!
Aron

1 Like

Hi @Aron_Matthie one of solution will be set in CMS your deadline or release date as DATE and in code you have found just replace hardcoded “deadline” value with value of this CMS field.

1 Like

here is a simple example of another approach how to create multiple countdowns on one page

READ ONLY

LIVE

Hope that will help you to solve your problem

1 Like

Hey @Stan

You’re a legend, thank you so much for taking the time to explain this to me, your example allowed me to achieve the effect I was looking for!

https://aronmatthie.webflow.io/uni

I hope this thread helps anyone else looking to get this working :slight_smile:

All the best,
Aron

Do you have any advice on how I could change the text “NaNd NaNh NaNm NaNs” (that is displayed when no date is entered) to "NOT SET." I’ve tried adding a text block with conditional visibility but it seems the countdown overwrites anything inside the “countdown-holder”

Hi @Aron_Matthie I have set this example based on suggestion that event date will be set in CMS and shown immediately. Now you are saying that you want to also publish events without day be set and show eg. “Coming Soon”. It will need a bit different approach and more conditions need to be set, like if(!day) or it it can be done with adding custom attributes based on some condition etc. Im now busy but I probably may look on this in few days.

If you have any further questions you can PM me and we can talk about how exactly you have set your events.

1 Like

Hi @Stan,

Thank you for the advice, I am looking into if( now as an option and I’ll update this thread if I get anywhere!

All the best,
Aron

Hi @Stan ,

Still stuck with this one!

Please let me know if you have any possible solutions :slight_smile:

Thank you in advance,
Aron

hi @Aron_Matthie I’m sorry to let you wait but I’m in middle of project. I will get back to this issue when it will be done (approx. 2 weeks)

Hi @Aron_Matthie I have updated code by adding condition if day is not set. In this example is shown “Coming soon” Feel free to check it out.

in meantime here is JS


const allEvents = Array.from(document.querySelectorAll(".event-item"));

allEvents.forEach((event) => {

  const releaseDay = event.querySelector(".rt").innerHTML;
  const countDownTime = new Date(releaseDay).getTime();
  const cdHolder = event.querySelector(".countdown-holder");
  if(!releaseDay){
    cdHolder.innerHTML = "Comming soon"
  }else{
    initializeClock(releaseDay, cdHolder);
}
  
});

function initializeClock(releaseDay, cdHolder) {
  const timeinterval = setInterval(() => {
    countDownTimer(releaseDay, cdHolder, timeinterval);
  }, 1000);
}

function countDownTimer(releaseDay, cdHolder, timeinterval) {
  const countDownTime = new Date(releaseDay).getTime();
  const now = new Date().getTime();
  const dif = countDownTime - now;

  const d = Math.floor(dif / (1000 * 60 * 60 * 24));
  const h = Math.floor((dif % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const m = Math.floor((dif % (1000 * 60 * 60)) / (1000 * 60));
  const s = Math.floor((dif % (1000 * 60)) / 1000);

  const formatted = `${d}d ${h}h ${m}m ${s}s`;

  cdHolder.innerHTML = dif < 0 ? "Expired" : formatted;

  if (dif < 0) {
    clearInterval(timeinterval);
  }
}

Hey Stan,

Thank you for that, it’s working perfectly!

Definitely couldn’t have done it without your help (I’m still a java noob) :grin:

Thanks again & all the best,
Aron

hi @Aron_Matthie glad to help. Feel free to mark any response as solution to close this request as solved

Hi Stan,

Thanks for directing me here. I have tried to follow along but I just can’t figure this out. In your read only site your countdown holder appears to be empty.

Also in the attached code I couldn’t find any reference to “deadline”

I have tried to get it working on this test site of mine.

Any help is much appreciated.

https://preview.webflow.com/preview/simracinggp?utm_medium=preview_link&utm_source=designer&utm_content=simracinggp&preview=59b167fd35bba032bab8988314b8939e&workflow=preview

hi @stevenworrell85 javascript doesn’t run in Designer preview mode.

Thanks for the reply. But this is also on my published site.
https://simracinggp.webflow.io/

H i @stevenworrell85 I have now shortly looked on you project. You can’t just copy paste code and thing that will magically work. :wink: As you can see I’ve named collection item event-item that I’m grabbing with javascript. Please take your time to study a bit more this code to get understanding how and what.

When you will get hard time with JS just reach me here on forum.

PS: you do not need second script as it is conversion of date into Czech so day and month names are in Czech language. But I have make changes that is not showing now correctly and like I have mentioned you do not need this script as have nothing to do with timers.

Hi @stevenworrell85 I had now (after dinner) customised code slightly as you have for each time unit different field that will make code a bit more complex because of need to handle how to display text that will show note expired or coming soon and hide timer. In my first example it is sorted as I use only one element to hold message or time.

I have only add some HTML elements to be similar to yours and tweak code a bit . It is not optimal as can be simplified but at least will give you an idea. I have kept original timer to be visible so it is a bit messy but important is code. :wink:

read only

live

Hi Stan.

Thanks for your help, it’s greatly appreciated. I am not very (at all) familiar with code unfortunately so it takes me a bit longer than most people to figure this stuff out but I will keep trying and I usually manage to get there.

I will let you know how I get on.

Thanks,
Steve

I’m sorry that i’m not getting it. I decided to start fresh and try to replicate it.

If you get a chance can you see where I have gone wrong with this new one? I will keep trying in the meantime.

https://preview.webflow.com/preview/stevens-supercool-site-d53041?utm_medium=preview_link&utm_source=designer&utm_content=stevens-supercool-site-d53041&preview=5a4229c9788595384e452c3724171b8e&workflow=preview

Ok I will look into it

EDIT: you do not have start-day to get date from !!!