Responsive Time Tracking Dashboard

What are you most proud of, and what would you do differently next time?

Good morning, everyone ☀️ Today’s project is an exciting.

Project Name: Time Tracking Dashboard

This dashboard helps users keep track of time spent on various activities like work, play, study, exercise, social, and self-care. Users can toggle between daily, weekly, and monthly views to see how their time is distributed.

Technologies Used #HTML

#CSS

#JavaScript

HTML Structure The HTML file sets up the layout with different sections for profile info, activity cards, and time toggles. Semantic elements are used for structure and presentation.

CSS Styling Font Import: I've Used Google Fonts to import the "Rubik" font for a modern and consistent look.

Global Styles: Resets default padding and margin, sets box-sizing, and specifies the font-family for consistency.

Layout: Uses CSS Grid for the card layout and Flexbox for centering elements. The design includes a clean and vibrant color palette, rounded corners, and a responsive layout.

Interactive Styles: Adds hover effects and active states for a more engaging user experience.

Hover Effects: Enhances user interaction by changing styles on hover.

JavaScript Functionality Period Toggle: Adds event listeners to toggle between daily, weekly, and monthly views.

Dynamic Data Display: Updates the time displayed for each activity based on the selected period. like Daily, Weekly and Monthly.

GitHub Repository:-

Live Demo:-

-Enjoyed every moment coding this!😎

-Completed 35 out of 100 Challenges so far—keeping up the momentum!🔥

-👨‍💻Join me on my coding journey as I tackle advanced challenges and add innovative touches to every project.

-Feedback is always welcome—would love to hear what you think—drop your thoughts, guys!

Let’s grow together! 🌱