Countdown Timer in JavaScript

Countdown timers are commonly used on websites that promote products, services, or special offers. You can often see them on landing pages or in online stores, where they are used to highlight limited-time deals and create a sense of urgency. By showing how much time is left until a specific event or deadline, such timers can help increase user engagement and encourage faster decision-making.

In one of the previous articles, we looked at how to create a simple clock in JavaScript. In this example, we will take a step further and build a more practical solution — a countdown timer that displays the remaining time until a scheduled date. The timer will show days, hours, minutes, and seconds, updating dynamically in real time.

Working with countdown timers is a good way to better understand how the Date object works in JavaScript, including how to calculate time differences and format values for display. It also introduces common frontend tasks such as updating the UI at regular intervals and handling edge cases when the countdown reaches zero.

In this example, we will implement a countdown timer using plain JavaScript, without relying on any third-party libraries. This approach keeps the solution lightweight and makes it easy to customize or integrate into different types of projects.

JavaScript

(() => {
    // set the final date "December 30, 2028 18:30"
    const compareDate = new Date(2028, 11, 30, 18, 30).getTime();

    const timer = setInterval(() => {
        timeBetweenDates(compareDate);
    }, 1000);

    function timeBetweenDates(toDate) {

        const difference = toDate - Date.now();

        // if the date has passed, the timer stops
        if (difference <= 0) {

            clearInterval(timer);

        } else {

            let seconds = Math.floor(difference / 1000),
                minutes = Math.floor(seconds / 60),
                hours = Math.floor(minutes / 60),
                days = Math.floor(hours / 24);

            hours %= 24;
            minutes %= 60;
            seconds %= 60;

            if (days < 10) days = '0' + days;
            if (hours < 10) hours = '0' + hours;
            if (minutes < 10) minutes = '0' + minutes;
            if (seconds < 10) seconds = '0' + seconds;

            document.getElementById('days').innerHTML = days;
            document.getElementById('hours').innerHTML = hours;
            document.getElementById('minutes').innerHTML = minutes;
            document.getElementById('seconds').innerHTML = seconds;

        }
    }
})();

HTML

<div class="timer">
    <div class="timer-el">
        <div class="timer-el__name">Days</div>
        <div id="days"></div>
    </div>
    <div class="timer-el">
        <div class="timer-el__name">Hours</div>
        <div id="hours"></div>
    </div>
    <div class="timer-el">
        <div class="timer-el__name">Minutes</div>
        <div id="minutes"></div>
    </div>
    <div class="timer-el">
        <div class="timer-el__name">Seconds</div>
        <div id="seconds"></div>
    </div>
</div>

The HTML code may be other, it all depends on your task. An example with minimal CSS styles of how the countdown timer works can be seen on Codepen: https://codepen.io/igorrybalko/pen/zxOdPvZ

Let me remind you that months in JavaScript starts from zero.

// December 30, 2027
new Date(2027, 11, 30)