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 | React & Tailwind

@jtubbenhauer

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


I found it difficult juggling between flex and grid for the two different layouts. Definitely don't think this submission will be close to pixel perfect, but I'm happy with how it ended up for the most part.

Community feedback

Amélie 280

@aweliego

Posted

Awesome solution. Your code is very clean and feels pretty advanced. It's really interesting to see all the different ways one can come up with to switch between the timeframe, yours in particular seems to effortlessly do the job. I'm happy to see TypeScript/React solutions on this project, as I'm still struggling to see how to use TypeScript in general. I'll bookmark your solution for future reference, if you don't mind.

The only thing that I thought could be improved is the responsiveness. When I reduce the browser size there's a point where the cards slightly overlap each other, and scrollbars appear (something to do with the overflow and/or width/margin I guess).

Great take on this challenge!

Marked as helpful

1

@jtubbenhauer

Posted

@aweliego Thanks so much for the detailed feedback and I appreciate the kind words.

I definitely need to get out of the habit of saying 'good enough' with my CSS. I've just looked at your solution and the responsiveness is fantastic, I'll certainly be taking a look at your code for inspiration.

I've just been pushing on with TypeScript even in small projects like these. I've found it to be quite beneficial in the more involved side projects I've been working on.

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