🕒 Modern Digital Clock

A modern and responsive Digital Clock built using HTML, CSS, and JavaScript.

It displays the current time, date, and a dynamic greeting based on the user's local time with a beautiful Glassmorphism-inspired user interface.

---

📖 About

The Modern Digital Clock is a clean and elegant frontend web application that displays the current time, date, and a greeting that changes automatically depending on the time of day.

The project was built to strengthen my understanding of JavaScript DOM Manipulation, Date API, Responsive Web Design, and modern CSS UI Design.

It updates automatically every second without refreshing the page, providing a smooth user experience.

---

✨ Features

• 🕒 Live Digital Clock
• 📅 Current Date Display
• ☀️ Dynamic Greeting
• 🟢 Animated Live Status Indicator
• 🌍 Time Zone Display
• ✨ Glassmorphism UI
• 🌌 Beautiful Gradient Background
• 📱 Fully Responsive Design
• ⚡ Real-Time Updates Every Second
• 🎨 Orbitron Digital Font

---

📸 Preview

🖥️ Desktop

---

📱 Mobile

---

🛠️ Tech Stack

Technology	Purpose
HTML5	Structure
CSS3	Styling
JavaScript	Dynamic Functionality
Google Fonts	Typography

---

📂 Project Structure

Modern-Digital-Clock/
│
├── index.html
├── style.css
├── script.js
├── README.md
│
└── images/
    ├── desktop.png
    └── mobile.png

---

🚀 Live Demo

https://modern-clock.nexcrew.in

---

⚙️ Installation

Clone the repository

git clone https://github.com/PratikCoreDev/modern-digital-clock.git

Go to the project folder

cd modern-digital-clock

Open index.html

or use Live Server in Visual Studio Code.

---

⚙️ How It Works

The application uses JavaScript's built-in Date API to retrieve the user's current system time and updates the interface every second.

Workflow

1. Get the current date and time using new Date().
2. Extract hours, minutes, seconds, day, month, and year.
3. Format values using padStart() for consistent two-digit display.
4. Display the formatted time and date on the webpage.
5. Show a greeting based on the current hour.
6. Refresh the clock every second using setInterval().

---

🧠 JavaScript Concepts Used

This project demonstrates several important JavaScript concepts.

📅 Date API

• new Date()
• getHours()
• getMinutes()
• getSeconds()
• getDay()
• getDate()
• getMonth()
• getFullYear()

📄 DOM Manipulation

• document.getElementById()
• textContent

⏱️ Timers

• setInterval()

📝 String Methods

• padStart()
• Template Literals

🔀 Conditional Statements

• if
• else if
• else

Used to display greetings such as:

• ☀️ Good Morning
• 🌤 Good Afternoon
• 🌇 Good Evening
• 🌙 Good Night

---

🎨 CSS Concepts Used

This project uses modern CSS features including:

• Flexbox
• Glassmorphism
• CSS Animations
• Keyframes
• Hover Effects
• Backdrop Filter
• Box Shadows
• Linear Gradients
• Media Queries
• Responsive Design
• Google Fonts

---

📱 Responsive Design

The application is fully responsive and works seamlessly across different screen sizes.

Supported devices:

• 💻 Desktop
• 💼 Laptop
• 📱 Mobile
• 📟 Tablet

---

📚 What I Learned

Building this project helped me improve my understanding of:

• JavaScript Date API
• DOM Manipulation
• Dynamic Content Updates
• Responsive Web Design
• Modern CSS Layouts
• Glassmorphism UI
• CSS Animations
• Writing Clean and Maintainable Code

---

🚀 Future Improvements

Some features I plan to add in future versions:

• 🌍 Multiple Time Zones
• 🌙 Dark / Light Mode
• ⏰ Alarm Clock
• ⏱ Stopwatch
• ⌛ Countdown Timer
• 📅 Calendar Integration
• 🌐 Time Zone Selector
• 🎨 Theme Customization
• 🔔 Notification Support

---

⚡ Performance

• ✅ Lightweight
• ✅ Fast Loading
• ✅ No External Frameworks
• ✅ Optimized JavaScript
• ✅ Responsive Layout
• ✅ Beginner Friendly

---

🤝 Contributing

Contributions are welcome!

If you'd like to improve this project, follow these steps:

1. Fork the repository.
2. Create a new feature branch.

git checkout -b feature-name

3. Commit your changes.

git commit -m "Add new feature"

4. Push to your branch.

git push origin feature-name

5. Open a Pull Request.

Every contribution is appreciated!

---

📌 Why I Built This Project

This project was created to practice and strengthen my frontend development skills by building a real-time web application.

While developing this project, I focused on:

• Writing clean and organized code
• Understanding JavaScript's Date API
• Manipulating the DOM dynamically
• Creating responsive layouts
• Designing a modern Glassmorphism interface
• Improving the overall user experience

---

🌟 Project Highlights

✔ Real-Time Clock

✔ Dynamic Greeting System

✔ Responsive Design

✔ Glassmorphism UI

✔ Modern Typography

✔ Lightweight & Fast

✔ Beginner Friendly

✔ Clean Code Structure

---

📜 License

This project is licensed under the MIT License.

Feel free to use, modify, and distribute this project for learning and educational purposes.

---

🙏 Acknowledgements

Special thanks to:

• Google Fonts
• MDN Web Docs
• JavaScript Documentation
• CSS Tricks
• Frontend Developer Community

These resources helped me while building this project.

---

👨‍💻 About the Developer

Hi, I'm Pratik 👋

I'm an aspiring Frontend Developer passionate about building modern, responsive, and user-friendly web applications.

I enjoy learning new technologies and continuously improving my development skills by creating practical projects.

---

📬 Connect With Me

GitHub

https://github.com/PratikCoreDev

---

⭐ Support

If you found this project helpful or interesting,

please consider:

⭐ Starring the repository

🍴 Forking the repository

📝 Sharing your feedback

Every bit of support motivates me to build more amazing projects.

---

🚀 More Projects Coming Soon

Some projects I'm currently working on:

• 🌤 Weather App
• 💰 Expense Tracker
• 📝 Notes App
• 🎵 Music Player
• 🌐 Portfolio Website
• 🎮 Minecraft Server Lists
• 📊 Dashboard UI
• 📚 More Frontend Projects

Stay tuned!

---

⭐ If you like this project, don't forget to leave a Star!

Made with ❤️ by Pratik

Happy Coding! 🚀