🚀 See it in action

Develop a Countdown Timer Project in JavaScript

Learn how to build an interactive, accurate countdown timer using vanilla JavaScript Date objects and setInterval.

CC CodesCompiler 📅 June 5, 2026

#javascript#dates#timer#project

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.

HTML CODE

<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:

Find the current time.
Subtract it from the target time to get the “difference”.
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.

JAVASCRIPT CODE

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 &lt;= 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.

JAVASCRIPT CODE

// Start the timer when the user clicks the button
document.getElementById('startBtn').addEventListener('click', () =&gt; {
  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);
});