The Palos Publishing Company

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

Create a dynamic countdown timer

Written by

Bernardo Palos

in

Creating a dynamic countdown timer typically involves HTML, CSS, and JavaScript. Here’s a straightforward example of a countdown timer that counts down to a specific future date and updates every second:

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Dynamic Countdown Timer</title>
<style>
  body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 50px;
    background: #f0f0f0;
  }
  #countdown {
    font-size: 48px;
    color: #333;
    background: #fff;
    display: inline-block;
    padding: 20px 40px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  .time-section {
    display: inline-block;
    margin: 0 15px;
  }
  .number {
    font-weight: bold;
    font-size: 64px;
  }
  .label {
    font-size: 18px;
    color: #666;
  }
</style>
</head>
<body>

<div id="countdown">
  <div class="time-section">
    <div class="number" id="days">0</div>
    <div class="label">Days</div>
  </div>
  <div class="time-section">
    <div class="number" id="hours">0</div>
    <div class="label">Hours</div>
  </div>
  <div class="time-section">
    <div class="number" id="minutes">0</div>
    <div class="label">Minutes</div>
  </div>
  <div class="time-section">
    <div class="number" id="seconds">0</div>
    <div class="label">Seconds</div>
  </div>
</div>

<script>
  // Set the target date/time for countdown (YYYY-MM-DDTHH:MM:SS)
  const countdownDate = new Date("2025-12-31T23:59:59").getTime();

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

    if (distance < 0) {
      document.getElementById('countdown').innerHTML = "EXPIRED";
      clearInterval(timerInterval);
      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").textContent = days;
    document.getElementById("hours").textContent = hours;
    document.getElementById("minutes").textContent = minutes;
    document.getElementById("seconds").textContent = seconds;
  }

  // Update countdown immediately and then every second
  updateCountdown();
  const timerInterval = setInterval(updateCountdown, 1000);
</script>

</body>
</html>

This code creates a clean, visually appealing countdown timer counting down to December 31, 2025, 23:59:59. It dynamically updates the days, hours, minutes, and seconds every second and stops when the countdown reaches zero, displaying “EXPIRED.”

You can customize the target date by modifying the countdownDate variable.

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