Digital Clock

A stylish, interactive digital clock web application with dynamic theme switching and time format options.

Features

• Real-time Clock Display: Shows current time with hours, minutes, and seconds updated every second
• 12/24 Hour Format Toggle: Switch between 12-hour (AM/PM) and 24-hour time formats
• Day/Night Theme: Automatic theme switching based on time of day (6 AM - 6 PM is day, otherwise night)
• Manual Theme Override: Toggle between day and night themes manually with the dedicated button
• Current Date Display: Shows the full date in a readable format (e.g., "Monday, 25 January 2026")
• Responsive Design: Centered layout that works across different screen sizes
• Smooth Transitions: Elegant CSS transitions for theme and color changes

How to Use

1. Open the Application: Open index.html in a web browser
2. View the Clock: The current time and date will display automatically
3. Toggle Time Format: Click the "12/24 Hour" button to switch between 12-hour and 24-hour formats
4. Toggle Theme: Click the "Day/Night" button to manually switch between light and dark themes

File Structure

Digital Clock/
├── index.html      # HTML structure and layout
├── script.js       # JavaScript functionality and logic
├── styles.css      # Styling and theme definitions
└── README.md       # This file

Technologies Used

• HTML5: Semantic structure and layout
• CSS3: Styling, flexbox layout, and smooth transitions
• JavaScript (Vanilla): Real-time clock updates, theme management, and format toggling

Styling Details

Day Theme

• Light background with readable dark text
• Time boxes styled in light gray (#f5f5f5) with red text (#c1121f)
• Red buttons with white text

Night Theme

• Dark background (black) for eye comfort
• Time boxes with dark gray background (#1c1c1e) and white text
• White buttons with black text

Code Structure

JavaScript Variables

• is24HourFormat: Tracks the current time format setting
• manualThemeToggle: Tracks whether the user has manually overridden the automatic theme

Key Functions

• updateClock(): Updates the time, date, and applies automatic theme based on time of day
• toggleFormat(): Switches between 12-hour and 24-hour time formats
• toggleTheme(): Manually toggles between day and night themes

Future Enhancements

• Add timezone selection
• Add customizable themes and colors
• Add local storage to remember user preferences
• Add digital/analog clock view toggle
• Add alarm functionality
• Add sound effects for theme transitions

Browser Compatibility

Works in all modern browsers that support:

• ES6 JavaScript
• CSS Flexbox
• CSS Transitions