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 w/ CSS Grid

@EdenExperiments

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


First time using CSS Grid, the design is not 100% but I earned a lot from this however and the main reason I chose this was for the JS and JSON practice which I feel has been done well, though I feel the CSS could be cut down.

Additionally I used local storage for the first time and it saves which toggle you last had active to turn on when you refresh/come back to the site.

Community feedback

@syedalimansoor

Posted

Hello Macaulay!

You have a great solution here, and you made it responsive too, which is awesome.

A few suggestions from my side would be to:

  • add transitions to your styles, so that when you hover over something, its color changes smoothly instead of switching instantly; this will make your apps look more professional, just don't overdo it
  • replace the "last daily/last weekly/last monthly" with "Yesterday/Last week/Last month", which makes more grammatical sense and is what the challenge asked

You may view my solution to see what I mean

Other than that, wonderful job!

Marked as helpful

0

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