Countdown Timer Widget Generator

Generate a countdown timer for your website.

Settings

Target Date and Time

Expired Message

HTML

<div id="countdown-timer"></div>

CSS

#countdown-timer {
  font-family: sans-serif;
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    const countdownElement = document.getElementById('countdown-timer');
    const targetDate = new Date('').getTime();

    const interval = setInterval(() => {
        const now = new Date().getTime();
        const distance = targetDate - now;

        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        countdownElement.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

        if (distance < 0) {
            clearInterval(interval);
            countdownElement.innerHTML = "EXPIRED";
        }
    }, 1000);
});

Countdown Timer Widget Generator

Settings

HTML

CSS

JavaScript

Live Preview

How do I use this code on my website?

How do I set the target date and time for the countdown?

What happens when the countdown timer finishes?

Can I customize the appearance of the timer?

Does the timer automatically adjust for different timezones?