https://github.com/ahmed-maher77/depi-countdown-timer
A sleek, responsive countdown timer for upcoming events with glassmorphism UI, live updates, and completion alerts.
https://github.com/ahmed-maher77/depi-countdown-timer
bootstrap countdown countdown-timer css-animations depi front-end-development html-css-javascript javascript responsive-design web-development website
Last synced: about 2 months ago
JSON representation
A sleek, responsive countdown timer for upcoming events with glassmorphism UI, live updates, and completion alerts.
- Host: GitHub
- URL: https://github.com/ahmed-maher77/depi-countdown-timer
- Owner: Ahmed-Maher77
- Created: 2025-08-21T22:07:40.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-21T22:55:16.000Z (11 months ago)
- Last Synced: 2025-09-02T00:08:00.969Z (10 months ago)
- Topics: bootstrap, countdown, countdown-timer, css-animations, depi, front-end-development, html-css-javascript, javascript, responsive-design, web-development, website
- Language: HTML
- Homepage: https://ahmed-maher77.github.io/Depi-Countdown-Timer/
- Size: 35.2 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DEPI Countdown Timer
A sleek, responsive countdown timer for upcoming events with glassmorphism UI, live updates, and completion alerts.
---
## 📄 Project Description
DEPI Countdown is a modern web app that displays real‑time countdowns to target dates. It features a glassmorphism interface, animated geometric backgrounds, Bootstrap 5 responsiveness, and a professional UX with accessible, semantic HTML.
---
## 💻 Used Technologies
- **HTML5**, **CSS3**, **JavaScript (ES6+)**
- **Bootstrap 5.3.3**
- CSS Grid, Flexbox, CSS Custom Properties, `backdrop-filter`
- Browser APIs: DOM, `setInterval`
- Design System: custom color palette via CSS variables
---
## 🌐 Demo (Live Preview)
- **Live:** [https://ahmed-maher77.github.io/Depi-Countdown-Timer/](https://ahmed-maher77.github.io/Depi-Countdown-Timer)
---
## ✨ Key Features
- **Real‑time countdown** with HH:MM:SS updates
- **Event info display** (date & time)
- **Glassmorphism UI** with animated geometric shapes
- **Responsive** mobile‑first layout (Bootstrap 5)
- **Completion modal** alerts when countdown ends
- **Accessible**: ARIA labels & semantic structure
- **Cross‑browser** fallbacks for modern CSS
---
## 🎥 Demo Video (Watch on LinkedIn)
- **LinkedIn Post:** [coming soon]()
---
## 👀 Website Preview
---
## 📥 Installation (Local Setup)
```bash
# 1) Clone
git clone https://github.com/Ahmed-Maher77/Depi-Countdown-Timer.git
cd Depi-Countdown-Timer
# 2) Run locally
Open index.html directly in the browser
# 4) Configure target date
Edit: /js/main.js → set target event date/time
```
---
## 📬 Contact & Contribution
- 🧑💻 **Portfolio:** https://ahmedmaher-portfolio.vercel.app/
- 🔗 **LinkedIn:** https://www.linkedin.com/in/ahmed-maher-algohary
- 📧 **Email:** ahmedmaher.dev1@gmail.com
> Contributions, suggestions, and bug reports are welcome. Feel free to open issues or pull requests.
---
## ⭐ Support
If you found this project helpful or inspiring, please consider giving it a ⭐. Your support helps me grow and share more open-source projects like this!