Streaming live at 10am (PST)

Can we have 2 countdown timers on the same page?

Hey,

This might be an easy solution, but I’m stuck here. I want to add 2 similar countdown timers on the same page, I copied the same code, with a different ID.

This is the link: https://preview.webflow.com/preview/countdown-life-double?utm_medium=preview_link&utm_source=designer&utm_content=countdown-life-double&preview=2cc386220cfa50abdb94aae71bf844c5&mode=preview

Live: https://countdown-life-double.webflow.io/

Can you help me?

Thank you! :webflow_heart:

I found the solution :smiley:

Here it is:

<script> 
(function() {
    var deadline = '2019/09/08 00:00';
  
    function pad(num, size) {
        var s = "0" + num;
        return s.substr(s.length-size);
    }
  
    function getTimeRemaining(endtime) {
      var t = Date.parse(endtime) - Date.parse(new Date()),
          seconds = Math.floor((t / 1000) % 60),
          minutes = Math.floor((t / 1000 / 60) % 60),
          hours = Math.floor((t / (1000 * 60 * 60)) % 24),
          days = Math.floor(t / (1000 * 60 * 60 * 24));
  
      return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
      };
    }
  
    function clock(id, endtime) {
      var days = document.getElementById(id + '-days')
          hours = document.getElementById(id + '-hours'),
          minutes = document.getElementById(id + '-minutes'),
          seconds = document.getElementById(id + '-seconds');
  
      var timeinterval = setInterval(function() {
        var t = getTimeRemaining(endtime);
  
        if (t.total <= 0){
          clearInterval(timeinterval);
        } else {
    days.innerHTML = pad(t.days, 2);
    hours.innerHTML = pad(t.hours, 2);
    minutes.innerHTML = pad(t.minutes, 2);
    seconds.innerHTML = pad(t.seconds, 2);
    }
      }, 1000);
    }
  
    clock('js-clock', deadline);
	
	function clocks(id, endtime) {
      var dayss = document.getElementById(id + '-days')
          hourss = document.getElementById(id + '-hours'),
          minutess = document.getElementById(id + '-minutes'),
          secondss = document.getElementById(id + '-seconds');
  
      var timeinterval = setInterval(function() {
        var t = getTimeRemaining(endtime);
  
        if (t.total <= 0){
          clearInterval(timeinterval);
        } else {
    dayss.innerHTML = pad(t.days, 2);
    hourss.innerHTML = pad(t.hours, 2);
    minutess.innerHTML = pad(t.minutes, 2);
    secondss.innerHTML = pad(t.seconds, 2);
    }
      }, 1000);
    }
  
    clocks('js-clock-s', deadline);
  })();
</script>