Terminal-Clock

Modern web-based digital clock built with HTML, CSS, and vanilla JavaScript

📸 Screenshots :

🕐 Features

• Real-time Updates - Clock updates every second with precise timing
• Dark Theme - Terminal-inspired design with dark background and green digital display
• Format Toggle - Switch between 12-hour and 24-hour time formats
• Date Display - Shows current date in full format (Day, Month Date, Year)
• Responsive Design - Works perfectly on desktop, tablet, and mobile devices
• Clean Interface - Minimalist design focusing on readability
• No Dependencies - Built with vanilla JavaScript, no external libraries required

🚀 Demo

Open index.html in your browser to see the clock in action!

📁 Project Structure

Terminal-Clock/
├── index.html      # Main HTML structure
├── style.css       # Dark theme styling
├── script.js       # Clock functionality
└── README.md       # Project documentation

🛠️ Installation & Usage

Method 1: Download and Run

1. Clone or download this repository

git clone https://github.com/JwelSrivastava/Terminal-Clock.git

2. Navigate to the project folder

cd Terminal-Clock

3. Open index.html in your web browser
4. Enjoy your digital clock!

Method 2: Live Server (Recommended for development)

1. Open the project in VS Code
2. Install Live Server extension
3. Right-click on index.html and select "Open with Live Server"

🎨 Customization

Changing Colors

Edit the CSS variables in style.css:

.digital-clock {
    color: #00ff88; /* Change this for different clock color */
}

body {
    background-color: #1a1a1a; /* Change background color */
}

Modifying Time Format

Edit the updateClock() function in script.js to customize time display format.

🌟 Key Components

HTML Structure

• Simple, semantic HTML5 structure
• Responsive viewport meta tag
• Clean, accessible markup

CSS Styling

• Modern dark theme design
• Flexbox centering layout
• CSS transitions for smooth interactions
• Mobile-responsive breakpoints

JavaScript Functionality

• Date() object for accurate time
• setInterval() for real-time updates
• Format switching logic
• DOM manipulation for updates

📱 Browser Compatibility

• ✅ Chrome (Latest)
• ✅ Firefox (Latest)
• ✅ Safari (Latest)
• ✅ Edge (Latest)
• ✅ Mobile browsers

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

💡 Future Enhancements

• Multiple timezone support
• Alarm functionality
• Customizable themes
• Sound effects
• Stopwatch/Timer features
• Weather integration

📄 License

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

👨‍💻 Author

JwelSrivastava

• GitHub: @JwelSrivastava

---

⭐ If you found this project helpful, please consider giving it a star!

Made with ❤️ by Jwel Srivastava | Syntax Surfer.