Countdown Timer Project | Learn HTML, CSS & JavaScript

Countdown Timer with HTML, CSS & JavaScript

10 DAYS 10 PROJECT CHALLENGE

Day #07

Project Overview

This project is a Countdown Timer built using HTML, CSS, and JavaScript. It allows users to track the time remaining for a specific event (e.g., New Year, birthday, product launch) by showing the days, hours, minutes, and seconds left. The app is styled with a modern and responsive design, making it a great beginner-friendly JavaScript project to learn about the Date object, time calculations, and DOM updates.

Key Features

Event Countdown – Displays the exact time left until a chosen event.
Real-Time Updates – Updates every second without requiring a page reload.
Customizable Target Date – Easily change the event date (e.g., Jan 1, 2026).
Responsive Design – Works smoothly on desktop, tablet, and mobile.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Countdown Timer</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>New Year Countdown</h1>
    <div id="countdown">
      <div class="time"><span id="days">00</span><p>Days</p></div>
      <div class="time"><span id="hours">00</span><p>Hours</p></div>
      <div class="time"><span id="minutes">00</span><p>Minutes</p></div>
      <div class="time"><span id="seconds">00</span><p>Seconds</p></div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

body {
  font-family: Arial, sans-serif;
  background: #002252;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  text-align: center;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: white;
}

#countdown {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.time {
  background: white;
  padding: 20px;
  border-radius: 10px;
  color: black;
  min-width: 80px;
}

.time span {
  display: block;
  font-size: 2rem;
  font-weight: bold;
}

Javascript Code

// Set the target date (e.g., New Year)
const targetDate = new Date("Jan 1, 2026 00:00:00").getTime();

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

  if (difference <= 0) {
    document.getElementById("countdown").innerHTML = "<h2>Happy New Year 🎉</h2>";
    return;
  }

  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);

  document.getElementById("days").innerText = days;
  document.getElementById("hours").innerText = hours;
  document.getElementById("minutes").innerText = minutes;
  document.getElementById("seconds").innerText = seconds;
}

// Update countdown every second
setInterval(updateCountdown, 1000);