Submitted about 2 years ago

Responsive Time Tracking Dashboard with React and Chakra Ui

Sheelove Dol• 150

@SheeloveDol

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Time tracking dashboard

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello everyone!

I had a lot of fun finding my way through this dashboard challenge. I decided to use React and Chakra-ui as my go-to for it and it gave me an opportunity to really get better at both.

I am still unsure about the best way to change the background color of the activity cards on hover. So for now the background stays the same lol. I also want to break a few more things into their own components to make the code base more elegant and readable.

I guess my main question would what is the best practice when it comes to hover states for react? any answers and critique of my work would be greatly appreciated.

Community feedback

Md5 dalton• 1,430

@md5dalton

Posted about 2 years ago

Hello SudZero... Good job on completing the challenge 👌

Hover states can be styled with CSS. I'll demonstrate below:

.activity-card:hover {
      // In here goes the properties you want to change when user hovers over the element
     background-color: blue;
}

Though it can still be done with JavaScript (React in your case) through the use of event listeners. I must say I strongly advise against it unless you have a very good reason to do so.

Hope that helps. Please don't hesitate if you need further explanation.

Sheelove Dol• 150

@SheeloveDol

Posted about 2 years ago

@md5dalton

Thank you for taking the time to critique my work and answer my question. I do understand the solution you provided above but my issue is that I used Chakra-UI for this project so I don't a typical CSS folder. See example:

<Grid // background
          border='2px'
          borderColor='red'
          w={['375px', null, null, '1290px']}
          
          h={['100%', null, null, '100vh']}
          // w={['100%', null, null, '100vw']}
>```

Please log in to post a comment

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