Skip to content

LiZhongpeng2/countdown-timer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 

Repository files navigation

⏰ Countdown Timer

HTML5 CSS3 JavaScript

A sleek and interactive countdown timer built with vanilla JavaScript. This project showcases modern web development practices and clean code principles.

🌟 Features

  • 🎯 Set custom target date and time with intuitive datetime picker
  • ⚡ Real-time countdown updates with smooth animations
  • 🎨 Modern gradient UI design with glass-morphism effects
  • 📱 Fully responsive layout for all devices
  • 🌓 Dark mode compatible datetime picker
  • ⌨️ Clean and well-commented code

🚀 Live Demo

[View Live Demo]Nothing..... :)

💻 Preview

Countdown Timer Preview

🛠️ Technologies Used

  • HTML5
  • CSS3 (Flexbox, Animations)
  • Vanilla JavaScript
  • Git & GitHub

🎓 Learning Outcomes

As a sophomore student, this project helped me learn:

  • JavaScript Date object manipulation
  • DOM manipulation and event handling
  • CSS modern design techniques
  • Git version control basics
  • GitHub project management

🏗️ Project Structure

countdown-timer/ ├── index.html # Main HTML file with countdown interface ├── README.md # Project documentation └── .gitignore # Git ignore file

🔥 Key Features Explained

Time Calculation

javascript function updateCountdown(){ const now = new Date().getTime(); const distance = targetDate - now; // Calculate time units 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); }

Responsive Design

css .countdownAll-container { display: flex; gap: 2rem; } .four_container { text-align: center; min-width: 100px; }

📝 Future Improvements

  • Add sound notifications
  • Save countdown targets in local storage
  • Add multiple concurrent timers
  • Implement themes selection
  • Add sharing functionality

🤝 Contributing

This is a personal learning project, but suggestions and feedback are welcome! Feel free to:

  1. Fork the repository
  2. Create a new branch
  3. Make your improvements
  4. Submit a pull request

👨‍💻 About Me

A sophomore student passionate about web development and constantly learning new technologies. This project is part of my journey to improve my JavaScript skills and GitHub proficiency.

📄 License

This project is open source and available under the MIT License.


Made with ❤️ by LiZhongpeng2
2024

About

This is a small example I use to practice JS :)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages