Event Countdown Timer

A beautiful countdown timer that counts down to any event -- days, hours, minutes and seconds with animated UI. Built with HTML, CSS and JavaScript.

---

Live Demo

https://countdown-timer-flax-chi.vercel.app

---

Topics

html css javascript countdown-timer event-timer date-api real-time responsive-design front-end vanilla-js

---

About

A stunning event countdown timer perfect for product launches, weddings, birthdays, New Year, or any special occasion. Displays days, hours, minutes, and seconds in a visually appealing card layout.

Uses JavaScript Date math and setInterval for real-time countdown updates.

---

Features

Feature	Description
Live Countdown	Ticks every second in real-time
4-Unit Display	Days, Hours, Minutes, Seconds
Beautiful UI	Modern card-based design
Event Message	Shows message when timer ends
Responsive	Works on all screen sizes
Auto Calculate	Computes remaining time
Smooth Animations	CSS transitions
Custom Date	Set any target date

---

Tech Stack

HTML5  -->  Countdown Layout and Structure
CSS3   -->  Card Design, Grid Layout, Animations
JS     -->  Date Math, setInterval, DOM Manipulation

---

How It Works

const eventDate = new Date("2026-12-31 00:00:00").getTime();

function updateCountdown() {
    const now = new Date().getTime();
    const distance = eventDate - now;

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
}

setInterval(updateCountdown, 1000);

---

Quick Start

git clone https://github.com/codewithshariqofficial/Event-Countdown.git
cd Event-Countdown
start index.html

To set your own event date, edit the target in script.js:

const eventDate = new Date("YOUR-DATE-HERE").getTime();

---

Project Structure

Event-Countdown/
  |-- index.html
  |-- script.js
  |-- style.css
  |-- README.md

---

Author

Code With Shariq Official