Streaming live at 10am (PST)

Please help - Adding 2 or multiple countdown timers

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

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