Skip to content
Submitted 3 months ago

⏱️ Time Tracking Dashboard | CSS Grid & Fetch API ⚡

bem, fetch
P
LVL 3
@chrisdzasc
A solution to the Time tracking dashboard challenge

Solution retrospective


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

I am proud of successfully implementing a CSS Grid architecture to handle the major layout between the mobile, tablet, and desktop. It kept my HTML semantic and my stylesheets very organized.

I am also proud of how I handled dynamic data. Using the Fetch API to grab local JSON data and seamlessly inject it into the DOM --while allowing the user to instantly toggle between Daily, Weekly, and Monthly states-- was a huge win.

Next time, I would like to explore adding slightly more advances CSS animations when the data numbers change, just to give the UI an even smoother app-like feel.

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

One of the main challenges I encountered was managing the dynamic data using the Fetch API. Specifically, I had to figure out how to parse the local JSON file and ensure the UI updated seamlessly when the user toggled between the Daily, Weekly, and Monthly views, all without making redundant requests or breaking the layout.

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

I would love some feedback on CSS Animations and Transitions.

While I have the basic hover states working well for the interactive elements, I would love to hear how other developers approach animating the actual data changing.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Christian Diaz’s solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord