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>