Custom Countdown
Tags: tutorial, javascript, webdev, programming
Published: 2020-08-25 07:02:38

When I found a bug that occurred in the countdown template that I downloaded, here is the reference [countdown](http://hilios.github.io/jQuery.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.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ez9mmzeg0wq70r36qwml.png)

### Html 
```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](https://www.w3schools.com/howto/howto_js_countdown.asp). I just added month content.

```js 
// 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](https://www.digitalocean.com/community/tutorials/understanding-date-and-time-in-javascript)

## 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***