JavaScript Countdown Timer Days Hours Minutes Seconds

This JavaScript code snippet helps you to create a countdown timer with days, hours, minutes and seconds. It uses a self-executing anonymous function that creates a countdown timer until a specific date. The countdown is displayed on a web page and updates in real-time. Once the countdown reaches zero, it runs a callback function to do a specific task and the countdown is hidden. You can call your own function that will be executed after the countdown timer finished.

How to Create JavaScript Countdown Timer with Days, Hours & Minutes

Create the HTML structure for countdown timer as follows:

<div class="container">
  <h1 id="headline">Countdown to my birthday</h1>
  <div id="countdown">
    <ul>
      <li><span id="days"></span>days</li>
      <li><span id="hours"></span>Hours</li>
      <li><span id="minutes"></span>Minutes</li>
      <li><span id="seconds"></span>Seconds</li>
    </ul>
  </div>
  <div id="content" class="emoji">
    <span>🥳</span>
    <span>🎉</span>
    <span>🎂</span>
  </div>
</div>

Style the count down timer using the following CSS styles:

/* general styling */
:root {
  --smaller: .75;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  align-items: center;
  background-color: #ffd54f;
  display: flex;
  font-family: -apple-system, 
    BlinkMacSystemFont, 
    "Segoe UI", 
    Roboto, 
    Oxygen-Sans, 
    Ubuntu, 
    Cantarell, 
    "Helvetica Neue", 
    sans-serif;
}

.container {
  color: #333;
  margin: 0 auto;
  text-align: center;
}

h1 {
  font-weight: normal;
  letter-spacing: .125rem;
  text-transform: uppercase;
}

li {
  display: inline-block;
  font-size: 1.5em;
  list-style-type: none;
  padding: 1em;
  text-transform: uppercase;
}

li span {
  display: block;
  font-size: 4.5rem;
}

.emoji {
  display: none;
  padding: 1rem;
}

.emoji span {
  font-size: 4rem;
  padding: 0 .5rem;
}

@media all and (max-width: 768px) {
  h1 {
    font-size: calc(1.5rem * var(--smaller));
  }
  
  li {
    font-size: calc(1.125rem * var(--smaller));
  }
  
  li span {
    font-size: calc(3.375rem * var(--smaller));
  }
}

Finally, add the following JavaScript function to your project to activate the countdown timer.

(function () {
  const second = 1000,
        minute = second * 60,
        hour = minute * 60,
        day = hour * 24;

  //I'm adding this section so I don't have to keep updating this pen every year :-)
  //remove this if you don't need it
  let today = new Date(),
      dd = String(today.getDate()).padStart(2, "0"),
      mm = String(today.getMonth() + 1).padStart(2, "0"),
      yyyy = today.getFullYear(),
      nextYear = yyyy + 1,
      dayMonth = "09/30/",
      birthday = dayMonth + yyyy;
  
  today = mm + "/" + dd + "/" + yyyy;
  if (today > birthday) {
    birthday = dayMonth + nextYear;
  }
  //end
  
  const countDown = new Date(birthday).getTime(),
      x = setInterval(function() {    

        const now = new Date().getTime(),
              distance = countDown - now;

        document.getElementById("days").innerText = Math.floor(distance / (day)),
          document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
          document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
          document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);

        //do something later when date is reached
        if (distance < 0) {
          document.getElementById("headline").innerText = "It's my birthday!";
          document.getElementById("countdown").style.display = "none";
          document.getElementById("content").style.display = "block";
          clearInterval(x);
        }
        //seconds
      }, 0)
  }());

Code Explanation

This code is an immediately invoked function expression (IIFE) that sets up a countdown timer for a specific date.

The code first defines some constants:

• second as 1000 milliseconds
• minute as second * 60
• hour as minute * 60
• day as hour * 24

It then sets up a section of code to determine the next upcoming birthday date for the user (based on a fixed date of September 30th each year) and assigns that date to the birthday variable.

The countDown variable is then set to the Unix timestamp (in milliseconds) of the birthday date using the getTime() method of the Date object.

The code sets up an interval timer using setInterval that runs a function every 0 milliseconds. The function calculates the time remaining until the birthday date, and then updates the countdown timer by calculating the number of days, hours, minutes, and seconds remaining.

If the distance between the current time and the countDown time is less than zero, it means that the birthday date has passed, so the function updates the HTML to display a message that it’s the user’s birthday, hides the countdown timer, and stops the interval timer using clearInterval.

Overall, this code sets up a simple countdown timer for a specific date and updates the HTML to display the remaining time until that date is reached.

That’s all! hopefully, you have successfully created a countdown timer with days, hours, minutes and seconds in JavaScript. If you have any questions or suggestions, feel free to comment below.