Skip to content
Submitted almost 3 years ago

Responsive Time Tracking Dashboard with React and Chakra Ui

chakra-ui, react
Sheelove Dol•150
@SheeloveDol
A solution to the Time tracking dashboard challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Md5 dalton•1,430
    @md5dalton

    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.

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