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 :
JavaScript
x
32
32
1
const day = document.querySelector(".day .numb");
2
const hour = document.querySelector(".hour .numb");
3
const min = document.querySelector(".min .numb");
4
const sec = document.querySelector(".sec .numb");
5
var timer = setInterval(() => {
6
var currentDate = new Date().getTime();
7
var launchDate = new Date('Jan 24, 2021 13:00:00').getTime();
8
var duration = launchDate - currentDate;
9
var days = Math.floor(duration / (1000 * 60 * 60 * 24));
10
var hours = Math.floor((duration % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
11
var minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60));
12
var seconds = Math.floor((duration % (1000 * 60)) / 1000);
13
day.innerHTML = days;
14
hour.innerHTML = hours;
15
min.innerHTML = minutes;
16
sec.innerHTML = seconds;
17
if (days < 10) {
18
day.innerHTML = '0' + days;
19
}
20
if (hours < 10) {
21
hour.innerHTML = '0' + hours;
22
}
23
if (minutes < 10) {
24
min.innerHTML = '0' + minutes;
25
}
26
if (seconds < 10) {
27
sec.innerHTML = '0' + seconds;
28
}
29
if (duration < 0) {
30
clearInterval(timer);
31
}
32
}, 1000);
JavaScript
1
31
31
1
<div class="count-down">
2
<div class=" timer day">
3
<div class="count">
4
<div class="numb">00</div>
5
<div class="text">Days</div>
6
</div>
7
</div>
8
<div class="clone">:</div>
9
<div class="timer hour">
10
<div class="count">
11
<div class="numb">00</div>
12
<div class="text">Hours</div>
13
</div>
14
</div>
15
<div class="clone">:</div>
16
<div class=" timer mins">
17
<div class="count">
18
<div class="numb">00</div>
19
<div class="text">Minutes</div>
20
</div>
21
</div>
22
<div class="clone">:</div>
23
<div class="timer sec">
24
<div class="count">
25
<div class="numb">00</div>
26
<div class="text">Seconds</div>
27
</div>
28
</div>
29
</div>
30
</div>
31
<!--Creating Respionsive Countdown timer using Javascript-->
Advertisement
Answer
Typo const min = document.querySelector(".mins .numb");
Improvement:
JavaScript
1
21
21
1
const pad = num => ("0" + num).slice(-2),
2
plural = num => num === 1 ? "" : "s",
3
day = document.querySelector(".day .numb"),
4
hour = document.querySelector(".hour .numb"),
5
min = document.querySelector(".mins .numb"),
6
sec = document.querySelector(".sec .numb"),
7
launchDate = new Date('Jan 24, 2021 13:00:00').getTime(),
8
timer = setInterval(() => {
9
const currentDate = new Date().getTime(),
10
duration = launchDate - currentDate,
11
days = Math.floor(duration / (1000 * 60 * 60 * 24)),
12
hours = Math.floor((duration % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
13
minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60));
14
seconds = Math.floor((duration % (1000 * 60)) / 1000);
15
16
day.innerHTML = pad(days); day.nextElementSibling.textContent = "Day" + plural(days);
17
hour.innerHTML = pad(hours); hour.nextElementSibling.textContent = "Hour" + plural(hours);
18
min.innerHTML = pad(minutes); min.nextElementSibling.textContent = "Minute" + plural(minutes);
19
sec.innerHTML = pad(seconds); sec.nextElementSibling.textContent = "Second" + plural(seconds);
20
if (duration < 0) clearInterval(timer);
21
}, 1000);
JavaScript
1
29
29
1
<div class="count-down">
2
<div class=" timer day">
3
<div class="count">
4
<div class="numb">00</div>
5
<div class="text"> </div>
6
</div>
7
</div>
8
<div class="clone">:</div>
9
<div class="timer hour">
10
<div class="count">
11
<div class="numb">00</div>
12
<div class="text"> </div>
13
</div>
14
</div>
15
<div class="clone">:</div>
16
<div class=" timer mins">
17
<div class="count">
18
<div class="numb">00</div>
19
<div class="text"> </div>
20
</div>
21
</div>
22
<div class="clone">:</div>
23
<div class="timer sec">
24
<div class="count">
25
<div class="numb">00</div>
26
<div class="text"> </div>
27
</div>
28
</div>
29
</div>