A beautiful, minimalist web widget featuring a Digital Clock, live Date Display, and an integrated Color Picker. This project allows users to dynamically change the widget's background color in real-time, showcasing interactive DOM manipulation and state updating using vanilla JavaScript.
- Real-time Digital Clock: Displays the current time updating seamlessly every second.
- Live Date Display: Shows the local calendar date synchronized with the system.
- Dynamic Theme Customization: Features an interactive color input (
<input type="color">) that lets users instantly customize the widget's background shade. - Clean & Responsive UI: Soft modern layout perfectly centered on the screen.
Test the live customization here:
π Live Demo
- HTML5 - Semantic layout structure for the clock container and native color inputs.
- CSS3 - Responsive centering, modern typography, and smooth transition styling.
- JavaScript (Vanilla) - Implements
setIntervalfor the clock logic and listens toinputevents on the color picker to dynamically rewrite CSS styles.