Project 9/20
⏳ Custom Countdown is a dynamic web app that lets users create personalized countdowns to any date with a custom title. Featuring a video background, real-time countdown updates, and local storage support, this project provides both functionality and flair.
- ✅ Create a custom countdown with a title and selected date
- ✅ Real-time countdown updates (days, hours, minutes, seconds)
- ✅ Animated background video with overlay
- ✅ Auto-reset and countdown completion detection
- ✅ LocalStorage saves countdowns between page reloads
- ✅ Responsive and mobile-friendly design
- ✅ Colorful animated text when countdown is complete
- ✅ Input validation to prevent empty submissions
- HTML5
- CSS3
- Vanilla JavaScript
- How to use JavaScript
setInterval()for real-time countdowns - Reading, writing, and parsing JSON in
localStorage - Managing DOM updates dynamically using form inputs
- Creating engaging UIs with
<video>and layered overlays - Building animated styles using CSS keyframes
🚀 For me, this project was more about practice and gaining additional experience,
rather than learning something entirely new.👨💻 Since I’m not a beginner and already familiar with these technologies,
I approached it with confidence — and still, I truly enjoyed working on it.🎯 Overall, I consider this a very valuable and enjoyable experience.
- Music Player | [Project 8/20] → View Repository
- Book Keeper | [Project 10/20] → View Repository
- Google Fonts – Web-safe fonts for custom UI
- Pixabay Stock Videos – Free video backgrounds for web use
- Video Compression Tool – Compress large videos for faster load
- W3Schools - Date Object – JavaScript date manipulation
- W3Schools - String Split – Split string values
- W3Schools - Prevent Default – Prevent default form actions
- W3Schools - JS Timing Events – Use
setInterval()andsetTimeout() - MDN - Form Accessibility – Make forms more accessible
- MDN - Date Input – Using native date pickers
- MDN - Date toISOString – Convert date to ISO format
- MDN - Submit Event – Handle form submissions
- MDN - JSON Stringify – Convert JS to JSON
- MDN - JSON Parse – Convert JSON to JS
🙌 Thanks for checking out my project! More coming soon. Stay tuned 🚀