Im having a problem on how to stop the countdown that i made in javascript. Can you please help me. here is my code:
const setIN = setInterval(function () {
countDown();
}, 1000);
const countDown = () => {
const countDate = new Date('June 15, 2021 07:19:00').getTime();
const now = new Date().getTime();
const gap = countDate - now;
//console.log(countDate, now, gap);
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
// console.log(second, minute, hour, day);
const daysRemain = Math.floor(gap / day);
const hoursRemain = Math.floor((gap % day) / hour);
const minutesRemain = Math.floor((gap % hour) / minute);
const secondsRemain = Math.floor((gap % minute) / second);
// console.log(daysRemain, hoursRemain, minutesRemain, secondsRemain);
document.querySelector('.days').innerText = daysRemain;
document.querySelector('.hours').innerText = hoursRemain;
document.querySelector('.minutes').innerText = minutesRemain;
document.querySelector('.seconds').innerText = secondsRemain;
};
im a beginner. sorry!
Check if the gap between the two dates is smaller or equal to 0. If so, you can stop the interval with clearInterval()
:
const setIN = setInterval(function() {
countDown();
}, 1000);
const countDown = () => {
const countDate = new Date('June 15, 2021 07:19:00').getTime();
const now = new Date().getTime();
const gap = countDate - now;
if (gap <= 0) {
alert("time is up!");
clearInterval(setIN);
return;
}
//console.log(countDate, now, gap);
const second = 1000;
const minute = second * 60;
const hour = minute * 60;
const day = hour * 24;
// console.log(second, minute, hour, day);
const daysRemain = Math.floor(gap / day);
const hoursRemain = Math.floor((gap % day) / hour);
const minutesRemain = Math.floor((gap % hour) / minute);
const secondsRemain = Math.floor((gap % minute) / second);
// console.log(daysRemain, hoursRemain, minutesRemain, secondsRemain);
document.querySelector('.days').innerText = daysRemain;
document.querySelector('.hours').innerText = hoursRemain;
document.querySelector('.minutes').innerText = minutesRemain;
document.querySelector('.seconds').innerText = secondsRemain;
};
<div class="days"></div>
<div class="hours"></div>
<div class="minutes"></div>
<div class="seconds"></div>