A sleek, responsive, and user-friendly countdown timer built with Vanilla JavaScript and Vite. This project allows users to select a future date and track the remaining time in days, hours, minutes, and seconds.
-
Future Date Selection: Integrated with
flatpickrfor a smooth calendar experience. -
Real-time Updates: Time calculates every second with precise accuracy.
-
Modern Notifications: Uses
iziToastfor beautiful, non-intrusive error alerts. -
Responsive Design: Fully centered and styled with a soft, modern color palette using the Montserrat font.
-
State Management: The "Start" button and input field are intelligently disabled/enabled based on the timer's state.
-
Core: HTML5, CSS3, JavaScript (ES6+)
-
Bundler: Vite
-
Libraries:
-
!flatpickr (Date & time picker)
- !iziToast (Elegant notifications)
-
| Main Page | Time Picking | Ready to Start | Countdown |
|---|---|---|---|
 |
 |
 |
 |
- Clone the repository:
git clone https://github.com/halenurgurel/countdown-timer.git- Navigate to the project directory:
cd countdown-timer- Install dependencies:
npm install- Run the development server:
npm run dev- Build for production:
npm run buildThe user selects a date using the input field.
If the date is in the past, an iziToast error appears and the "Start" button remains disabled.
Upon selecting a valid future date, the "Start" button becomes active.
Once started, the setInterval function calculates the difference between the current time and the target date using the convertMs() helper.
The UI updates every second until the countdown reaches zero.
Halenur Gürel – Asynchronous JavaScript & UI Library Integration 🚀
🎯 “This project demonstrates how to handle complex asynchronous flows, manage local and future time states, and provide a polished user experience through custom-styled UI notifications and interactive elements.”