The Palos Publishing Company

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

Build a countdown for content launches

Written by

Bernardo Palos

in

Here’s a simple and effective HTML + JavaScript countdown timer you can embed on a webpage to count down to your next content launch. It will display days, hours, minutes, and seconds remaining.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Content Launch Countdown</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      text-align: center;
      background: #f4f4f4;
      padding: 50px;
    }
    .countdown-container {
      background: #fff;
      display: inline-block;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
    }
    .time {
      font-size: 2em;
      margin: 10px;
    }
    .label {
      font-size: 0.9em;
      color: #888;
    }
  </style>
</head>
<body>

  <div class="countdown-container">
    <h1>New Content Launches In:</h1>
    <div id="countdown">
      <div class="time"><span id="days">00</span><div class="label">Days</div></div>
      <div class="time"><span id="hours">00</span><div class="label">Hours</div></div>
      <div class="time"><span id="minutes">00</span><div class="label">Minutes</div></div>
      <div class="time"><span id="seconds">00</span><div class="label">Seconds</div></div>
    </div>
  </div>

  <script>
    // Set the date of your next launch here (Year, Month-1, Day, Hour, Minute)
    const launchDate = new Date("2025-06-01T10:00:00").getTime();

    const countdownFunc = setInterval(() => {
      const now = new Date().getTime();
      const distance = launchDate - 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").innerText = String(days).padStart(2, '0');
      document.getElementById("hours").innerText = String(hours).padStart(2, '0');
      document.getElementById("minutes").innerText = String(minutes).padStart(2, '0');
      document.getElementById("seconds").innerText = String(seconds).padStart(2, '0');

      if (distance < 0) {
        clearInterval(countdownFunc);
        document.getElementById("countdown").innerHTML = "<h2>Content Launched!</h2>";
      }
    }, 1000);
  </script>

</body>
</html>

Customization Options:

  • Change 2025-06-01T10:00:00 to your actual launch date and time.

  • Style the countdown to match your brand by editing the CSS.

  • Embed it in a content block, pop-up, or landing page.

Let me know if you want it as a WordPress shortcode, React component, or embedded in an existing site layout.

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