Time tracking dashboard using HTML, CSS, JavaScript

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

✅ Proud of:

• Successfully integrating JSON data to dynamically update the UI.
• Implementing responsive design that adjusts well for different screen sizes.
• Smooth hover effects and interactive elements for better user experience.
• A clean and structured JavaScript logic that makes adding future features easier.

🔄 What I'd do differently next time:

• Improve accessibility by adding ARIA attributes and ensuring keyboard navigation works smoothly.
• Optimize performance by lazy-loading images and reducing redundant DOM queries.
• Ensuring Smooth Transitions Between Timeframes
• Switching between Daily, Weekly, and Monthly felt abrupt.
• Use a framework (React or Angular) to make state management easier and cleaner.

What challenges did you encounter, and how did you overcome them?

Challenge 1: Dynamically Updating Data from JSON

• Initially, the hours and previous stats were hardcoded in HTML.
• Solution: Used JavaScript to fetch the JSON and update the UI dynamically based on selected timeframes.

Challenge 2: Mobile Responsiveness

• The original layout didn’t fit well on smaller screens.
• Solution: Used CSS Grid adjustments and media queries to make it fully responsive.

What specific areas of your project would you like help with?

🤔 Areas for Feedback & Improvement:

• Code Optimization: Are there better ways to structure the JavaScript for cleaner, more efficient updates?
• Performance: Are there ways to reduce the number of DOM queries and improve efficiency?
• Accessibility: How can I make the UI more accessible, especially for keyboard and screen reader users?