Simple Countdown Timer using JavaScript
Tags: html, css, javascript, webdev
Published: 2021-07-31 15:01:18

JavaScript countdown timers are used on a variety of e-commerce and under-construction websites to keep users up to date. We see on different types of e-commerce websites that a kind of countdown starts some time before the arrival of any product or offer.
In this article I have created a countdown timer using simple JavaScript code and shared it with you.

✅ **Watch Live Preview** 👉👉  [JavaScript Countdown Timer](https://www.foolishdeveloper.com/2021/07/simple-countdown-timer-using-javascript.html) 

Creating such a project is much easier if you know how to create a digital clock. Here you can schedule a specific day or time in advance. Then, with the help of JavaScript code, subtracting the current time from that time, the subtraction is reduced every second.
 

 As you can see in the picture above I have used the web page background # 90cbf3 here. The page contains four small boxes for days, hours, minutes and seconds, respectively. First of all you have to create an HTML and CSS file.

### Step 1: Basic structure of Countdown Timer

Only one line of HTML programming code has been used. Then I designed the webpage using the css code below. With `background # 90cbf3` you can use any other color you want.

```html
<div id="timer"></div>
```

```css
body {
    text-align: center;
    padding: 100px 60px;
    background: #90cbf3;
    font-family: sans-serif;
    font-weight: lighter;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0ppgorc2qbfye5okgdo.jpg)

### Step 2: Activate it using JavaScript code

  Now I have implemented this [javascript countdown timer](https://www.foolishdeveloper.com/2021/07/simple-countdown-timer-using-javascript.html) with the help of JavaScript. First of all, we have set a specific date with the help of `Date.parse`. that is, you have to determine for what time you want to run the countdown.

```javascript
future = Date.parse("jun 12, 2022 01:30:00");
```
 Then using the `new Date ()` method I have taken the current time from the device. In this case, let me tell you, the time to use here is not the time of any server. It is only the local time of your device.

 Then I subtract the current time from the pre-determined time and store it in the diff (constant). As a result, I have got a total of how much time to countdown.

```javascript
 now = new Date();
 diff = future - now;
```

 Now I have converted the total time of countdown to days, hours, minutes and seconds using JavaScript's `Math.floor`.

 ➤ We know that one second is equal to 1000 milliseconds, so we have divided the whole countdown time (diff) `by 1000`.
 ➤ Right now one minute is equal to 60 seconds so in this case we have divided `by 1000 * 60`.
 ➤ Since one hour is equal to 60 minutes, in this case we have divided `by 1000 * 60 * 60`.
 ➤ One day is equal to 24 hours so in this case it is divided `by 1000 * 60 * 60 * 24`.
```javascript
 days = Math.floor(diff / (1000 * 60 * 60 * 24));
 hours = Math.floor(diff / (1000 * 60 * 60));
 mins = Math.floor(diff / (1000 * 60));
 secs = Math.floor(diff / 1000);
```


```javascript
 d = days;
 h = hours - days * 24;
 m = mins - hours * 60;
 s = secs - mins * 60;
```
Above we have done all the work of calculation, now we will arrange it neatly in the web page. For this I have used innerhtml  and in it I have beautifully arranged how it can be seen in the webpage. Here I have added text like day, hours, minutes, seconds etc. using span respectively.

```javascript
 document.getElementById("timer")
  .innerHTML =
  '<div>' + d + '<span>Days</span></div>' +
  '<div>' + h + '<span>Hours</span></div>' +
  '<div>' + m + '<span>Minutes</span></div>' +
  '<div>' + s + '<span>Seconds</span></div>';
```
 Lastly, I have instructed to update this calculation `every 1000 milliseconds` using `setInterval`. Since the countdown time is intermittent every second, this system needs to be updated every second.

```javascript
setInterval('updateTimer()', 1000);
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gs06o43qsi1z3dxwigp0.jpg)

### Final JavaScript code


```javascript
function updateTimer() {
    future = Date.parse("jun 12, 2022 01:30:00");
 now = new Date();
 diff = future - now;

 days = Math.floor(diff / (1000 * 60 * 60 * 24));
 hours = Math.floor(diff / (1000 * 60 * 60));
 mins = Math.floor(diff / (1000 * 60));
 secs = Math.floor(diff / 1000);

 d = days;
 h = hours - days * 24;
 m = mins - hours * 60;
 s = secs - mins * 60;

 document.getElementById("timer")
  .innerHTML =
  '<div>' + d + '<span>Days</span></div>' +
  '<div>' + h + '<span>Hours</span></div>' +
  '<div>' + m + '<span>Minutes</span></div>' +
  '<div>' + s + '<span>Seconds</span></div>';
}
setInterval('updateTimer()', 1000);
```

### Step 3: Give the times the size of a box

  Now I have designed it using some basic css code and arranged it beautifully in web pages. As you can see in the picture above there is a small box to hold each time. I created that box using the code below. In this case I have used the background-color of the box `# 020b43`.

```css
#timer {
    font-size: 3em;
    font-weight: 100;
    color: white;
    padding: 20px;
    width: 700px;
    color: white;
    
}

#timer div {
    display: inline-block;
    min-width: 90px;
    padding: 15px;
    background: #020b43;
    border-radius: 10px;
    border: 2px solid #030d52;
    margin: 15px;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rohjxnnlxa1lln734a3.jpg)

### Step 4: Design the text

 Now at the end of it all I will design the text that I added using the span in the JavaScript code. I have used the following css to determine the size, color, etc. of those texts.
```css
#timer div span {
    color: #ffffff;
    display: block;
    margin-top: 15px;
    font-size: .35em;
    font-weight: 400;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xgi892ux8h41qhk4ed0s.jpg)
 
 Hopefully from this tutorial you have learned [how to build a countdown timer](https://www.foolishdeveloper.com/2021/07/simple-countdown-timer-using-javascript.html) using JavaScript code. Please let me know in the comments how you like this tutorial. If I have done anything wrong, please let me know in the comments.

**Related Post:**
1. [Best Footer Design HTML CSS](https://www.foolishdeveloper.com/2021/09/responsive-footer-design.html) 
2. [JavaScript Todo List](https://www.foolishdeveloper.com/2021/11/todo-list-javascript.html)
3. [Simple Stopwatch using JavaScript](https://www.foolishdeveloper.com/2021/10/simple-stopwatch-using-javascript.html)
4. [Skeleton Screen Loading Animation](https://www.foolishdeveloper.com/2021/09/skeleton-screen-loading-animation.html)
5. [Javascript Age Calculator](https://www.foolishdeveloper.com/2021/07/javascript-age-calculator.html)
6. [JavaScript Password Generator](https://www.foolishdeveloper.com/2021/07/random-password-generator-javascript.html)
7. [Automatic Image Slider in Html CSS](https://www.foolishdeveloper.com/2021/07/automatic-image-slider.html) 
8. [Sidebar Menu Using HTML CSS](https://www.foolishdeveloper.com/2021/06/sidebar-menu-using-html-css-javascript.html) 

You can visit my blog for more tutorials like this.
https://www.foolishdeveloper.com/