🔥 Time-tracking-Dashboard

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

I’m most proud of successfully replicating the desktop and mobile designs using pure HTML, CSS Grid/Flexbox, and Vanilla JavaScript. I managed to create a clean, fully responsive layout that dynamically switches between timeframes (Daily, Weekly, Monthly), closely matching the reference design.

Next time, I’d approach the JavaScript part using a more structured method — probably breaking it into reusable functions or using a lightweight framework to manage state more efficiently. I’d also consider writing more semantic HTML from the start.

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

Responsive Layout: The biggest challenge was translating the mobile design to the desktop grid, especially aligning user info and cards precisely. I solved it by carefully analyzing the layout and using CSS Grid with grid-template-areas for clean placement.

Font sizes not updating: I initially had trouble with font sizes not appearing correctly in the user info. This was resolved by checking specificity and using rem units consistently while debugging with browser DevTools.

Switching timeframes: Updating the text dynamically based on user selection was tricky at first, but I used data.json and event listeners on each tab to update the content programmatically.

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

Grid structure for desktop layout: Is my CSS Grid implementation the most efficient approach for aligning all six cards and the user info panel? Or is there a more flexible way to structure it?

JavaScript structure: I’d love feedback on how I handled the time updates for each timeframe. Could I improve the code for better readability or reusability?

Accessibility: Are there any improvements I can make to improve accessibility — especially for screen readers or keyboard navigation?