Skip to content
Advertisement

I have a countdown timer and its seconds and minutes are not moving

Timer is not working in javascript. I want to have a countdown timer that works automatically. But here, only hour hand is moving. Seconds and minutes are not changing at all. The code is as follows :

const day = document.querySelector(".day .numb");
const hour = document.querySelector(".hour .numb");
const min = document.querySelector(".min .numb");
const sec = document.querySelector(".sec .numb");
var timer = setInterval(() => {
  var currentDate = new Date().getTime();
  var launchDate = new Date('Jan 24, 2021 13:00:00').getTime();
  var duration = launchDate - currentDate;
  var days = Math.floor(duration / (1000 * 60 * 60 * 24));
  var hours = Math.floor((duration % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((duration % (1000 * 60)) / 1000);
  day.innerHTML = days;
  hour.innerHTML = hours;
  min.innerHTML = minutes;
  sec.innerHTML = seconds;
  if (days < 10) {
    day.innerHTML = '0' + days;
  }
  if (hours < 10) {
    hour.innerHTML = '0' + hours;
  }
  if (minutes < 10) {
    min.innerHTML = '0' + minutes;
  }
  if (seconds < 10) {
    sec.innerHTML = '0' + seconds;
  }
  if (duration < 0) {
    clearInterval(timer);
  }
}, 1000);
<div class="count-down">
  <div class=" timer day">
    <div class="count">
      <div class="numb">00</div>
      <div class="text">Days</div>
    </div>
  </div>
  <div class="clone">:</div>
  <div class="timer hour">
    <div class="count">
      <div class="numb">00</div>
      <div class="text">Hours</div>
    </div>
  </div>
  <div class="clone">:</div>
  <div class=" timer mins">
    <div class="count">
      <div class="numb">00</div>
      <div class="text">Minutes</div>
    </div>
  </div>
  <div class="clone">:</div>
  <div class="timer sec">
    <div class="count">
      <div class="numb">00</div>
      <div class="text">Seconds</div>
    </div>
  </div>
</div>
</div>
<!--Creating Respionsive Countdown timer using Javascript-->

Advertisement

Answer

Typo const min = document.querySelector(".mins .numb");

Improvement:

const pad = num => ("0" + num).slice(-2),
  plural = num => num === 1 ? "" : "s",
  day = document.querySelector(".day .numb"),
  hour = document.querySelector(".hour .numb"),
  min = document.querySelector(".mins .numb"),
  sec = document.querySelector(".sec .numb"),
  launchDate = new Date('Jan 24, 2021 13:00:00').getTime(),
  timer = setInterval(() => {
    const currentDate = new Date().getTime(),
      duration = launchDate - currentDate,
          days = Math.floor(duration / (1000 * 60 * 60 * 24)),
         hours = Math.floor((duration % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
       minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60));
       seconds = Math.floor((duration % (1000 * 60)) / 1000);
       
    day.innerHTML  = pad(days);    day.nextElementSibling.textContent = "Day"     + plural(days);
    hour.innerHTML = pad(hours);  hour.nextElementSibling.textContent = "Hour"    + plural(hours);
    min.innerHTML  = pad(minutes); min.nextElementSibling.textContent = "Minute"  + plural(minutes);
    sec.innerHTML  = pad(seconds); sec.nextElementSibling.textContent = "Second"  + plural(seconds);
    if (duration < 0) clearInterval(timer);
  }, 1000);
<div class="count-down">
  <div class=" timer day">
    <div class="count">
      <div class="numb">00</div>
      <div class="text"> </div>
    </div>
  </div>
  <div class="clone">:</div>
  <div class="timer hour">
    <div class="count">
      <div class="numb">00</div>
      <div class="text"> </div>
    </div>
  </div>
  <div class="clone">:</div>
  <div class=" timer mins">
    <div class="count">
      <div class="numb">00</div>
      <div class="text"> </div>
    </div>
  </div>
  <div class="clone">:</div>
  <div class="timer sec">
    <div class="count">
      <div class="numb">00</div>
      <div class="text"> </div>
    </div>
  </div>
</div>
User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement