Search code examples
javascriptcountdowntimer

Hello, Im a beginner! Im having a problem on how to stop the countdown that i made in javascript. Can you please help me


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!


Solution

  • 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>