The Palos Publishing Company

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

Create a countdown timer for product launches

Written by

Bernardo Palos

in

Creating a countdown timer for product launches can be implemented in HTML, CSS, and JavaScript. Below is a complete example of a countdown timer that dynamically counts down to a specified launch date and time.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Product Launch Countdown</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    .countdown-container {
      background: #fff;
      padding: 40px;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      text-align: center;
    }
    .countdown {
      display: flex;
      justify-content: center;
      gap: 20px;
    }
    .time-box {
      background: #000;
      color: #fff;
      padding: 20px;
      border-radius: 8px;
      width: 80px;
    }
    .time-box span {
      display: block;
      font-size: 2em;
    }
    .label {
      margin-top: 5px;
      font-size: 0.9em;
      text-transform: uppercase;
    }
    h1 {
      margin-bottom: 30px;
    }
  </style>
</head>
<body>
  <div class="countdown-container">
    <h1>Product Launch In</h1>
    <div class="countdown">
      <div class="time-box">
        <span id="days">00</span>
        <div class="label">Days</div>
      </div>
      <div class="time-box">
        <span id="hours">00</span>
        <div class="label">Hours</div>
      </div>
      <div class="time-box">
        <span id="minutes">00</span>
        <div class="label">Minutes</div>
      </div>
      <div class="time-box">
        <span id="seconds">00</span>
        <div class="label">Seconds</div>
      </div>
    </div>
  </div>

  <script>
    const countdownDate = new Date("June 1, 2025 12:00:00").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.querySelector('.countdown-container').innerHTML = "<h1>Product Launched!</h1>";
      }
    }, 1000);
  </script>
</body>
</html>

Instructions to Use:

  • Replace "June 1, 2025 12:00:00" with your desired launch date and time in the JavaScript section.

  • Embed this code in a .html file and open it in your browser or add it to your site for live countdown functionality.

This timer is fully responsive, customizable, and suitable for product launch pages.

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