The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing

Categories We Write About

Build a custom countdown timer

Written by

in

Computer Science

Creating a custom countdown timer involves a mix of HTML, CSS, and JavaScript. Below is a comprehensive example that builds a fully functional and customizable countdown timer you can embed on any webpage.

Custom Countdown Timer Code

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Custom Countdown Timer</title>
<style>
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #121212;
    color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .countdown-container {
    background: #222;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    text-align: center;
    width: 320px;
  }

  .countdown-title {
    font-size: 1.6rem;
    margin-bottom: 20px;
    letter-spacing: 1.2px;
  }

  .time {
    display: flex;
    justify-content: space-between;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 2px;
  }

  .time div {
    flex: 1;
    margin: 0 8px;
  }

  .label {
    font-size: 0.9rem;
    font-weight: 400;
    margin-top: 6px;
    color: #aaa;
  }

  .expired-message {
    font-size: 1.3rem;
    color: #ff5555;
    margin-top: 25px;
  }
</style>
</head>
<body>

<div class="countdown-container">
  <div class="countdown-title">Event Countdown</div>
  <div class="time">
    <div>
      <span id="days">00</span>
      <div class="label">Days</div>
    </div>
    <div>
      <span id="hours">00</span>
      <div class="label">Hours</div>
    </div>
    <div>
      <span id="minutes">00</span>
      <div class="label">Minutes</div>
    </div>
    <div>
      <span id="seconds">00</span>
      <div class="label">Seconds</div>
    </div>
  </div>
  <div id="expired" class="expired-message" style="display:none;">Time's Up!</div>
</div>

<script>
  // Set your target date here (Year, Month (0-11), Day, Hour, Minute, Second)
  // Example: December 31, 2025 23:59:59
  const targetDate = new Date(2025, 11, 31, 23, 59, 59).getTime();

  const daysEl = document.getElementById('days');
  const hoursEl = document.getElementById('hours');
  const minutesEl = document.getElementById('minutes');
  const secondsEl = document.getElementById('seconds');
  const expiredEl = document.getElementById('expired');

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

    if (distance < 0) {
      clearInterval(timerInterval);
      daysEl.textContent = '00';
      hoursEl.textContent = '00';
      minutesEl.textContent = '00';
      secondsEl.textContent = '00';
      expiredEl.style.display = 'block';
      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);

    daysEl.textContent = days.toString().padStart(2, '0');
    hoursEl.textContent = hours.toString().padStart(2, '0');
    minutesEl.textContent = minutes.toString().padStart(2, '0');
    secondsEl.textContent = seconds.toString().padStart(2, '0');
  }

  updateCountdown();
  const timerInterval = setInterval(updateCountdown, 1000);
</script>

</body>
</html>

Explanation:

HTML: Sets up the structure for days, hours, minutes, and seconds.
CSS: Styles the timer with a modern dark theme and clean layout.
JavaScript:
- Defines a target date/time.
- Calculates the difference between the current time and the target.
- Updates the display every second.
- Shows a “Time’s Up!” message when the countdown ends.

You can customize:

The targetDate in the script to any date/time you want.
The style and layout in the CSS to match your site’s design.

If you want the timer embedded in your webpage or a particular framework, I can help with that too!

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