The Palos Publishing Company

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

Create a countdown widget for deadlines

Written by

Bernardo Palos

in

Here’s a simple countdown widget built with HTML, CSS, and JavaScript. This widget will allow you to set a deadline, and it will count down in real-time to that date.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Countdown Timer</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .countdown-container {
      background: #fff;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      text-align: center;
    }
    .countdown {
      display: flex;
      gap: 20px;
      justify-content: center;
      font-size: 24px;
      margin-top: 20px;
    }
    .countdown div {
      background: #007bff;
      color: #fff;
      padding: 15px;
      border-radius: 8px;
      min-width: 70px;
    }
    input[type="datetime-local"] {
      padding: 10px;
      font-size: 16px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
    button {
      margin-left: 10px;
      padding: 10px 15px;
      font-size: 16px;
      border: none;
      background: #28a745;
      color: #fff;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="countdown-container">
    <h2>Set Your Deadline</h2>
    <input type="datetime-local" id="deadline-input">
    <button onclick="startCountdown()">Start</button>
    <div class="countdown" id="countdown">
      <div><span id="days">0</span><br>Days</div>
      <div><span id="hours">0</span><br>Hours</div>
      <div><span id="minutes">0</span><br>Minutes</div>
      <div><span id="seconds">0</span><br>Seconds</div>
    </div>
  </div>

  <script>
    let countdownInterval;

    function startCountdown() {
      clearInterval(countdownInterval);
      const deadline = new Date(document.getElementById("deadline-input").value).getTime();
      if (isNaN(deadline)) {
        alert("Please enter a valid date and time.");
        return;
      }

      countdownInterval = setInterval(() => {
        const now = new Date().getTime();
        const distance = deadline - now;

        if (distance <= 0) {
          clearInterval(countdownInterval);
          document.getElementById("countdown").innerHTML = "<strong>Deadline reached!</strong>";
          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);

        document.getElementById("days").innerText = days;
        document.getElementById("hours").innerText = hours;
        document.getElementById("minutes").innerText = minutes;
        document.getElementById("seconds").innerText = seconds;
      }, 1000);
    }
  </script>
</body>
</html>

Features:

  • Real-time countdown.

  • User selects any deadline using a datetime picker.

  • Displays days, hours, minutes, and seconds.

You can embed this in a webpage or integrate it into your project. Let me know if you’d like a version without user input or with multiple deadlines.

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