Responsive Time Tracking Dashboard with Dynamic JSON Data

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

I'm really proud of learning how to use the fetch() API in JavaScript for this project. It was my first time working with dynamic data fetching, and understanding how to handle JSON data and update the DOM based on user interactions was a huge win for me.

Along the way, I also practiced a lot with JavaScript conditionals, particularly for handling singular and plural units (like displaying "1hr" vs. "2hrs"). It was a small detail, but getting it right felt great because it made the data display feel more polished.

If I were to do the project again, I’d focus more on enhancing the user experience, like adding an active state to the buttons to give clearer feedback on which timeframe is currently selected. I'd also explore better ways to handle errors and possibly look into more scalable methods for updating the DOM.

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

One of the main challenges I faced was learning how to properly use the fetch() API to load and display data dynamically from a JSON file. Initially, I struggled with understanding how to handle asynchronous operations and how to correctly structure the .then() promises to ensure the data was processed and displayed at the right time. I overcame this by breaking down the process step by step, reading documentation, and experimenting with different approaches until I understood how the data was flowing through my code.

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

I'd love some feedback on how I handled the fetch() API and data manipulation in JavaScript. This was my first time dynamically loading JSON data and updating the DOM, so I'm curious if there are more efficient or cleaner ways I could have structured my code.