Countdown Timer Project | Learn HTML, CSS & JavaScript

Countdown Timer with HTML, CSS & JavaScript

10 DAYS 10 PROJECT CHALLENGE

Day #07

Project Overview

The Countdown Timer is a beginner-friendly project built using HTML, CSS, and JavaScript. It displays a countdown timer which displays the remaining days, hours, minutes, and seconds n order to reach the targeted date or time. The timer updates automatically, allowing users to see the remaining time in real time.

This project is designed to help beginners practice important JavaScript concepts while creating an interactive application. By building this timer, you can learn how to work with dates and times, calculate the difference between two dates, update HTML elements dynamically, and run a function at regular intervals. Additionally, one can get familiarized with the implementation of a timer with an interval function in JavaScript and the creation of responsive websites with the help of HTML and CSS.

Key Features

Real-Time Countdown: The Countdown Timer constantly displays the remaining time until the selected date or time. The values update automatically as the countdown progresses.
Days, Hours, Minutes, and Seconds: The timer breaks the remaining time into days, hours, minutes, and seconds. This makes it easy for users to understand exactly how much time is left.
Automatic Time Updates: JavaScript updates the countdown every second. Moreover, users do not have to refresh the web page in order to see the remaining time.
Date and Time Calculation: The application calculates the difference between the current time and the target time. JavaScript then converts this difference into days, hours, minutes, and seconds.
Countdown Completion: When the countdown reaches the target time, the timer stops and displays a completion message instead of continuing to show negative values.
Clean and Simple UI: The project uses a simple layout with clearly separated time values. This keeps the main focus on the countdown and makes the remaining time easy to read.
Responsive Design: The Countdown Timer adapts to different screen sizes, allowing users to view it comfortably on desktops, tablets, and mobile devices.
JavaScript-Based Functionality: JavaScript handles the date calculation, countdown updates, and completion logic. This demonstrates how JavaScript can create real-time functionality on a webpage.
Easy Customization: The project has a simple structure, making it easy to customize the colors, fonts, spacing, countdown labels, and overall appearance.

What You’ll Learn

Understand how to work with the JavaScript Date object.
Learn how to calculate the difference between two dates.
Practice converting milliseconds into days, hours, minutes, and seconds.
Learn how setInterval() can run a function at regular intervals.
Understand how to update HTML elements dynamically using JavaScript.
Practice using conditional statements to check when the countdown reaches zero.
Learn how to stop an interval when the countdown is complete.
Understand how HTML, CSS, and JavaScript work together to create a real-time application.
Practice creating a clean and responsive interface using CSS.

HTML Code

The HTML code sets up the structure for the Countdown Timer. First the style.css file is linked inside the <head> section. This allows CSS to control how the timer looks and how it is laid out on the page. The main content is placed inside the timer container, which holds the different sections used to display the remaining time.

There are HTML elements for days, hours, minutes and seconds. These elements provide separate spaces where JavaScript can display the calculated values. Each of these elements has an ID. That makes it easy for JavaScript to find and update them when the countdown changes. At the end of the <body> the script.js file is linked. This lets JavaScript run and handle all the countdown actions.

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

The CSS code is responsible for how the Countdown Timer looks and how it is arranged on the screen. The main container uses Flexbox to place the timer in the middle of the page and create a clean layout. Style features like background colors, space, between elements, font sizes, borders, rounded edges and shadows make the countdown easy to read.

Each part of the time is given its style so that the days, the hours, the minutes and the seconds are easy to see. Design that works on sizes of screens also helps the timer change its size and spacing when needed which makes the project pleasant to use on various devices.

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

The JavaScript code provides the main functionality of the Countdown Timer. First, the code creates a target date and gets the current time using the Date object. It then calculates the difference between the target time and the current time.

Next JavaScript converts the remaining milliseconds into days, hours, minutes and seconds. The calculated values are then displayed inside the HTML elements. A setInterval() function updates the Countdown Timer every second so that the displayed values remain current. Finally a condition checks whether the Countdown Timer has reached zero and stops the timer when the target time is reached.

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