Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Time tracking dashboard using CSS Grid, Fetch API

J-Correa 50

@JuanLuisCorrea

Desktop design screenshot for the Time tracking dashboard coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi! in this challenge I focused on practicing the Fetch API in JavaScript to get the data from data.json, maybe I missed something in the layout. Any feedback is appreciated :D

Community feedback

Shivam 520

@shivjoshi1996

Posted

Hey Correa,

Awesome job on this!

I noticed that when you shrink the window down to tablet size, the time card layout breaks a little, with the background color of the header also expanding down to the bottom. (I tested this in Chrome).

I think this is due to your grid, if you add align-items: center; to your <main> element, it should fix this issue. Though this might make your profile on the left-hand side shrink in height, but you can use height: 100% on the user div to fix this.

I also noticed that your time cards have the background colour "bleed" to the edge on the bottom left and right of the cards. I had the same issue and it took me a while to fix, but I eventually ended up making three containers - one parent container for the overall card, one child container for the icon header, and one child container for the time information. This solved the issue, and you can see the code here: https://github.com/shivjoshi1996/time-tracking-dashboard-react/blob/master/src/components/TimeCard.js

Marked as helpful

0
Fidel Lim 2,775

@fidellim

Posted

Great work Correa,

It works perfectly for both desktop and mobile views!

1

@rohitdubey1352

Posted

Great, design it looks nice on a mobile device.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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