Day 2: Interactive Dark Mode Dashboard 🌓The second project in my 7-Day Web Development Challenge.

This installment focused on moving from a static layout to a functional, user-centric UI by implementing a theme-switching system and a visual progress tracker.🚀 OverviewThe Goal for Day 2 was to build a functional dashboard that adapts to user preferences. The core feature is a Dark Mode toggle that changes the entire UI color palette dynamically using CSS variables and JavaScript.Key FeaturesDynamic Theme Toggling: Seamless switching between Light and Dark modes.Visual Progress Tracker: A custom-styled bar showing 2/7 Days Complete ($28.5%$) of the challenge.Interactive Cards: A responsive grid layout featuring hover effects and centered content.CSS Variable Architecture: Centralized color management for easy theme maintenance.🛠️ Technical StackHTML5: Semantic structure for the dashboard and progress components.CSS3: Custom properties (variables), Flexbox/Grid, and linear gradients.JavaScript (ES6): Logic to handle theme switching and DOM manipulation.💻 Implementation HighlightsProgress Bar LogicThe progress bar is built using a nested div structure where the inner width represents the completion percentage of the 7-day challenge.

📁 Project StructurePlaintextDay-02-Dashboard/

├── index.html # Dashboard UI & Progress Tracker ├── style.css # Theming logic & Layout └── script.js # Dark mode toggle functionality 📝 Learning OutcomesMastered the implementation of CSS Custom Properties for scalable theming.Successfully integrated a visual progress indicator using relative widths.Refined DOM manipulation skills by targeting data attributes for theme switching.