Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Cannot read properties of null (reading 'code')
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 ReactJS, and CSS Grid

#react
Liam R 425

@Cooly-o-Cats

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


This was my first Junior challenge and I had lots of fun! I decided to challenge myself and use react instead of just static HTML pages. I'd love to hear feedback on how I can improve in the future, thanks!

Community feedback

@DarKaRor

Posted

Hey, that's pretty cool! I like your initiative, I decided to do the same as well now that I got to Junior

Maybe you just didn't try, but it'd have been nice to have a max-width in the cards instead of width, along with a width of 100% so it would resize when needed, and also maybe a transition between both of the viewports, but if you only wanted to make the designs given I totally get that!

The only thing that I belive I can suggest is to check your handleChildClick function since it seems to have a lot of repeated code. Lines 20 to 25 can be put into a function, if you want even more, you could give the function two parameters for the set functions (data.[type] and "day,week,month"). I also used and arrow function that calls the handleClick passing the type so that could also save you having to write each type by its own.

I really liked your active states and transitions! Keep it up

Marked as helpful

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