Develop a Countdown Timer Project in JavaScript

Welcome to this tutorial on Developing a Countdown Timer in JavaScript. A countdown timer is an excellent project for mastering JavaScript’s built-in Date object, timing events (setInterval), and manipulating the DOM.

In this guide, we will build a sleek, glassmorphism-styled countdown timer that allows users to pick a target date and watch the seconds tick away.

1. The HTML Layout

We need a display area for days, hours, minutes, and seconds, as well as an input field for the user to select their target date.

<div class="timer-card">
  <h1 id="eventTitle">Launch Countdown</h1>
  
  <div class="countdown-wrapper">
    <div class="time-box">
      <div class="time-value" id="days">00</div>
      <div class="time-label">Days</div>
    </div>
    <div class="time-box">
      <div class="time-value" id="hours">00</div>
      <div class="time-label">Hours</div>
    </div>
    <div class="time-box">
      <div class="time-value" id="minutes">00</div>
      <div class="time-label">Mins</div>
    </div>
    <div class="time-box">
      <div class="time-value" id="seconds">00</div>
      <div class="time-label">Secs</div>
    </div>
  </div>

  <input type="datetime-local" id="targetDate">
  <button id="startBtn">Start Timer</button>
</div>

2. The JavaScript Logic

The core concept behind a countdown timer is simple:

1. Find the current time.
2. Subtract it from the target time to get the “difference”.
3. Convert that difference (which is in milliseconds) into readable Days, Hours, Minutes, and Seconds.

Calculating the Time Difference

We will create an updateTimer function that runs every second.

let countdownInterval;
let targetTime = new Date('2026-12-31T23:59:59').getTime();

const elements = {
  days: document.getElementById('days'),
  hours: document.getElementById('hours'),
  minutes: document.getElementById('minutes'),
  seconds: document.getElementById('seconds')
};

function updateTimer() {
  const now = new Date().getTime();
  const difference = targetTime - now;

  // Stop the timer if we reach the target date
  if (difference <= 0) {
    clearInterval(countdownInterval);
    document.getElementById('eventTitle').textContent = "Event Started!";
    return;
  }

  // Mathematics to extract time units from milliseconds
  const days = Math.floor(difference / (1000 * 60 * 60 * 24));
  const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((difference % (1000 * 60)) / 1000);

  // Update the HTML (using padStart to always show two digits, e.g., '09' instead of '9')
  elements.days.textContent = days.toString().padStart(2, '0');
  elements.hours.textContent = hours.toString().padStart(2, '0');
  elements.minutes.textContent = minutes.toString().padStart(2, '0');
  elements.seconds.textContent = seconds.toString().padStart(2, '0');
}

Starting the Interval

To make the timer tick, we use setInterval, which calls our function repeatedly.

// Start the timer when the user clicks the button
document.getElementById('startBtn').addEventListener('click', () => {
  const inputDate = document.getElementById('targetDate').value;
  if (!inputDate) return;
  
  targetTime = new Date(inputDate).getTime();
  
  // Clear any existing timer before starting a new one
  clearInterval(countdownInterval);
  
  // Run it once immediately, then every 1000ms (1 second)
  updateTimer(); 
  countdownInterval = setInterval(updateTimer, 1000);
});

And that is the core logic of a countdown timer! Check out the Live Demo to see the fully styled, responsive version of this project.