The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Create a countdown timer to key events

Written by

Bernardo Palos

in

Here’s a simple HTML + JavaScript code snippet that creates a countdown timer to multiple key events. Each event will have its own timer displaying the remaining time until it begins.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Countdown to Key Events</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      padding: 20px;
    }
    .event {
      background: #fff;
      padding: 20px;
      margin: 10px 0;
      border-left: 5px solid #007BFF;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .event h2 {
      margin: 0 0 10px;
    }
    .countdown {
      font-size: 1.5em;
      color: #333;
    }
  </style>
</head>
<body>

  <div class="event" id="event1">
    <h2>Event 1: Product Launch</h2>
    <div class="countdown" id="countdown1"></div>
  </div>

  <div class="event" id="event2">
    <h2>Event 2: Webinar Start</h2>
    <div class="countdown" id="countdown2"></div>
  </div>

  <div class="event" id="event3">
    <h2>Event 3: New Year</h2>
    <div class="countdown" id="countdown3"></div>
  </div>

  <script>
    function startCountdown(id, targetDate) {
      const countdownElement = document.getElementById(id);

      function updateCountdown() {
        const now = new Date().getTime();
        const distance = targetDate - now;

        if (distance < 0) {
          countdownElement.innerHTML = "Event has started!";
          clearInterval(interval);
          return;
        }

        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`;
      }

      updateCountdown(); // Initial call
      const interval = setInterval(updateCountdown, 1000);
    }

    // Set your event dates here
    startCountdown("countdown1", new Date("2025-06-01T12:00:00").getTime());
    startCountdown("countdown2", new Date("2025-07-15T09:30:00").getTime());
    startCountdown("countdown3", new Date("2026-01-01T00:00:00").getTime());
  </script>

</body>
</html>

You can modify the event titles and dates directly in the HTML and JavaScript sections to fit your needs. This layout works well embedded into a webpage and updates every second in real time.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About