Build a Countdown Timer Website

Introduction

Hello, fellow developers! Today, I'm excited to share a project I recently completed: a Countdown Timer. This project is a great way to learn and practice JavaScript, particularly in the areas of time manipulation and DOM updates. Whether you're looking to build a countdown for an event, a product launch, or just a fun timer, this project is a perfect start.

Project Overview

The Countdown Timer allows users to set a target date and time, and it will continuously count down the days, hours, minutes, and seconds until that moment arrives. The timer updates in real-time, offering a visually appealing and responsive design. This project is ideal for developers who want to enhance their skills in creating dynamic and interactive web applications.

Features

• Real-Time Countdown: The timer updates every second, showing the remaining time until the specified date.
• Responsive Design: The layout adapts seamlessly across different devices and screen sizes.
• Customizable End Date: The target date and time can be easily modified, making the timer versatile for various events.

Technologies Used

• HTML: Used for structuring the content on the webpage.
• CSS: Applied for styling the webpage and ensuring responsiveness.
• JavaScript: Implemented for calculating the time remaining and updating the DOM in real-time.

Project Structure

Here's a quick look at the project structure:

Countdown-Timer/
├── index.html
├── style.css
└── script.js

• index.html: Contains the HTML structure of the webpage.
• style.css: Holds the CSS styles, including responsive design rules.
• script.js: Manages the countdown logic and DOM updates using JavaScript.

Installation

To get started with the project, follow these steps:

1. Clone the repository:
   

   git clone https://github.com/abhishekgurjar-in/Countdown-Timer.git
   

2. Open the project directory:
   

   cd Countdown-Timer
   

3. Run the project:

   • You can either run it on a local server or simply open the index.html file in a web browser.

Usage

1. Open the website in a web browser.
2. Watch the timer count down to the specified end date.
3. Customize the end date in the script.js file to suit your event or requirement.

Code Explanation

HTML

The index.html file contains the structure of the webpage, including the countdown display and a simple header. Below is a snippet of the HTML code:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Countdown Timer6e916e0f7d1e588d4f442bf645aedb2f
    d8b7823904473d155afe66ded7e78f93
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    473a967da286a3c736825b4619e7dc30
      af42a90d66eb0ab7ffd90605d49bfcdb
        924ff17625d603f964501dd897c96cc6
          4a249f0d628e2318394fd9b75b4636b1Countdown Timer473f0a7621bec819994bb5020d29372a
        16b28748ea4df4d9c2150843fecfba68
        9e80a1cbb6fa0609753359a9577296d4We are coming soon16b28748ea4df4d9c2150843fecfba68
        40cf589a8d9222aac570db87a343584a4 July 2025 10:00 PM16b28748ea4df4d9c2150843fecfba68
        e70522973cfd5bc8e7f5270545f1ac4d
          dc6dce4a544fdca2df29d5ac0ea9906b
            08aecd3082d1f5b25e4b501500d294fc
            df250b2156c434f3390392d09b1c9563
            2e1cf0710519d5598b1f0f14c36ba674Days8c1ecd4bb896b2264e0711597d40766c
          16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906b
            08aecd3082d1f5b25e4b501500d294fc
            df250b2156c434f3390392d09b1c9563
            2e1cf0710519d5598b1f0f14c36ba674Hours8c1ecd4bb896b2264e0711597d40766c
          16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906b
            08aecd3082d1f5b25e4b501500d294fc
            df250b2156c434f3390392d09b1c9563
            2e1cf0710519d5598b1f0f14c36ba674Minutes8c1ecd4bb896b2264e0711597d40766c
          16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906b
            08aecd3082d1f5b25e4b501500d294fc
            df250b2156c434f3390392d09b1c9563
            2e1cf0710519d5598b1f0f14c36ba674Seconds8c1ecd4bb896b2264e0711597d40766c
          16b28748ea4df4d9c2150843fecfba68
        16b28748ea4df4d9c2150843fecfba68
        ffd6ba4147bda351239915f463e46e38
          e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
        16b28748ea4df4d9c2150843fecfba68
      16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
    35c1efb1a96c7fc3ad8e56d875e8f4062cacc6d41bbb37262a98f745aa00fbf0
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

The style.css file contains styles that ensure the webpage is visually appealing and includes responsiveness for different screen sizes. Here are some key styles:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.main {
  width: 100%;
  height: 100vh;
  background: url(./images/bg.jpg);
  background-size: cover;
}

.overlay {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
}

.title {
  color: white;
  text-align: center;
  font-size: 2.5rem;
  padding: 25px;
}

.col {
  margin-top: 10px;
  width: 1000px;
  color: white;
  justify-content: center;
  display: flex;
}

.col div {
  width: 250px;
  text-align: center;
}

input {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: transparent;
  border-radius: 5px;
  height: 50px;
  text-align: center;
  font-size: 20px;
}

.header {
  margin: 40px;
  text-align: center;
}

.footer {
  margin: 300px;
  text-align: center;
}

JavaScript

The script.js file manages the countdown logic, updating the display every second. Below is a snippet of the JavaScript code:

const endDate = "4 July 2025 10:00 PM";

document.getElementById("end-date").innerText = endDate;
const input = document.querySelectorAll("input");

function countDown() {
  const end = new Date(endDate);
  const now = new Date();
  const diff = (end - now) / 1000;

  if (diff < 0) return;

  input[0].value = Math.floor(diff / 3600 / 24);
  input[1].value = Math.floor(diff / 3600) % 24;
  input[2].value = Math.floor(diff / 60) % 60;
  input[3].value = Math.floor(diff) % 60;
}

countDown();
setInterval(countDown, 1000);

Live Demo

You can check out the live demo of the Countdown Timer here.

Conclusion

Building this Countdown Timer was a valuable learning experience that allowed me to explore JavaScript's capabilities in time manipulation and DOM interaction. I hope this project inspires you to create your own dynamic and interactive applications. Feel free to explore the code, customize it, and use it in your own projects. Happy coding!

Credits

This project was inspired by the need for a simple and effective countdown tool for various events.

Author

• Abhishek Gurjar
  • GitHub Profile

The above is the detailed content of Build a Countdown Timer Website. For more information, please follow other related articles on the PHP Chinese website!