Countdown Timer with JavaScript

How to Create a Countdown Timer with JavaScript (Beginner Guide)

by

A countdown timer is a great way to add interactivity and urgency to your website. Whether you’re building a coming soon page, a launch countdown, or a limited offer, this tutorial will show you how to build a countdown step by step using only HTML, CSS, and JavaScript.

Let’s get started!

👁️ Preview

🧱 Step 1: HTML Structure

Create a container to display the countdown.

<div class="countdown">
  <h2>Countdown to Launch:</h2>
  <div id="timer">
    <span id="days">00</span> days 
    <span id="hours">00</span> hours 
    <span id="minutes">00</span> minutes 
    <span id="seconds">00</span> seconds
  </div>
</div>

🎨 Step 2: Basic CSS Styling

.countdown {
  text-align: center;
  font-family: Arial, sans-serif;
  padding: 2rem;
}

#timer span {
  font-size: 2rem;
  color: #7179F4;
  margin: 0 5px;
}

⚙️ Step 3: JavaScript Countdown Logic

Set the countdown to a future date:

const countdownDate = new Date("2025-12-31T23:59:59").getTime();

const timer = setInterval(() => {
  const now = new Date().getTime();
  const distance = countdownDate - 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);

  document.getElementById("days").textContent = days.toString().padStart(2, "0");
  document.getElementById("hours").textContent = hours.toString().padStart(2, "0");
  document.getElementById("minutes").textContent = minutes.toString().padStart(2, "0");
  document.getElementById("seconds").textContent = seconds.toString().padStart(2, "0");

  if (distance < 0) {
    clearInterval(timer);
    document.getElementById("timer").innerHTML = "🎉 The time has come!";
  }
}, 1000);

✅ How It Works

  • We create a future date with new Date(...)
  • Every second, we calculate the difference between now and the target date
  • We break that into days, hours, minutes, and seconds
  • We update the content of each <span> dynamically
  • When the countdown ends, we clear the interval and show a final message

🧠 Tips

  • You can use padStart(2, "0") to always show two digits
  • Make sure the date format is correct to avoid NaN issues
  • Use Intl.DateTimeFormat for localized output if needed

✅ Final Result

Now you have a real-time countdown timer that:

  • Updates every second
  • Is easy to customize
  • Works with any future date
  • Is written with clean and readable code

Great for landing pages, launch sites, product sales, and more.

Leave a Comment