Custom Countdown

When I found a bug that occurred in the countdown template that I downloaded, here is the reference countdown that the template uses. I'm thinking of rewriting a simple countdown script instead. BTW the error I found differed by a few days, while I needed a description of the month and day.

Html

 <div class="col-12 justify-content-end d-flex">
   <div class="col-md-9">
     <div class="countdown-timer mb-100 wow fadeInUp" data-wow-delay="300ms">
        <!-- <div id="clock"></div> -->
          <div id="clock">
           <div>1<span>Bulan</span></div>
           <div>8<span>Hari</span></div>
           <div>9<span>Jam</span></div>
           <div>51<span>Menit</span></div>
           <div>50<span>Detik</span></div>
          </div>
      </div>
   </div>
</div>

Script

this is the script I made by modifying the script contained in w3school. I just added month content.

// Set the date to be counted down
var countDownDate = new Date("2020/10/10").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get today's time in milliseconds
    var now = new Date().getTime();

    // Make up the distance between the current time and the countdown
    var distance = countDownDate - now;

    // Calculate time in months, days, hours, minutes and seconds
    var month = Math.floor(distance / (1000 * 60 * 60 * 24 * 30))
    var days = Math.floor((distance % (1000 * 60 * 60 * 24 *30)) / (1000 *60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // display result to container with id "clock"
    document.getElementById("clock").innerHTML = "<div>" + month + "<span>Bulan</span></div><div>" + days + "<span>Hari</span></div> <div>" +hours + "<span>Jam</span></div> <div>" + minutes + "<span>Menit</span></div> <div>" + seconds + "<span>Detik</span></div>";

    // when the countdown is complete, provide a text caption
    if (distance < 0) {
    clearInterval(x);
    document.getElementById("clock").innerHTML = "EXPIRED";
    }
// cross check
 console.log(month);
}, 1000);

Good to see the reference on time written by Tania Rascia

Mathematical discussion

From the script we can see that distance is the result of time (in milliseconds) subtracting countDownDate with now time. In calculations, using the operator % or called modulus means division by producing a remainder; like when you want to generate second data, distance is divided by the remainder by 1000 * 60, which means 1000 to convert milliseconds to seconds, and 60 to convert seconds to minutes, the result (is the remainder of the calculation 1000 * 60 ) divided by 1000 to make seconds remaining. And so on for the treatment of minutes, hours, days, months.

The operations of the days and month parts, have one of the operations number 30 which actually assumes 1 month = 30 days, this can be improved in the future by using the detailed month, or some kind of array data month => the number of days. Because we know not all months have 30 days.

Done