The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing

Categories We Write About

Build a holiday countdown clock

Written by

in

Computer Science

Here’s a simple way to build a holiday countdown clock using HTML, CSS, and JavaScript. This countdown clock will display the time remaining until a specific holiday (e.g., Christmas, New Year’s Day, etc.) and update in real time.

✅ HTML + CSS + JavaScript Code

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Holiday Countdown Clock</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: linear-gradient(to right, #1e3c72, #2a5298);
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }

    h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
    }

    .countdown {
      display: flex;
      gap: 2rem;
      font-size: 2rem;
      text-align: center;
    }

    .time-box {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .label {
      font-size: 1rem;
      margin-top: 0.5rem;
      color: #ddd;
    }
  </style>
</head>
<body>
  <h1>Countdown to Christmas</h1>
  <div class="countdown">
    <div class="time-box">
      <div id="days">00</div>
      <div class="label">Days</div>
    </div>
    <div class="time-box">
      <div id="hours">00</div>
      <div class="label">Hours</div>
    </div>
    <div class="time-box">
      <div id="minutes">00</div>
      <div class="label">Minutes</div>
    </div>
    <div class="time-box">
      <div id="seconds">00</div>
      <div class="label">Seconds</div>
    </div>
  </div>

  <script>
    const targetDate = new Date("December 25, 2025 00:00:00").getTime();

    function updateCountdown() {
      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);

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

      if (distance < 0) {
        document.querySelector(".countdown").innerHTML = "<h2>The holiday has arrived!</h2>";
      }
    }

    updateCountdown(); // initial call
    setInterval(updateCountdown, 1000);
  </script>
</body>
</html>

🔧 How to Use

Replace "December 25, 2025 00:00:00" with the date of your desired holiday.
You can also change the <h1> tag to reflect the correct holiday name.
Simply open the .html file in a browser and the live countdown will display.

Let me know if you want this converted into a widget for a blog or embedded in a WordPress site.

Share this Page your favorite way: Click any app below to share.

See all the ways to share this page

Check Out Our Newest Posts we wrote about

Categories We Write About