Skip to content
Submitted 5 months ago

Time tracking dashboard

sass/scss, accessibility
Williams Akanni•350
@shadowbanks
A solution to the Time tracking dashboard challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What challenges did you encounter, and how did you overcome them?

I spent more time than I should deciding how much of the page should be dynamic and how best to go about it 😅, ultimately I decided to create the boilerplate for each card and then fill them dynamically.

What specific areas of your project would you like help with?

For the card's active state, on hover the color becomes lighter also on the ellipse hover the card retains its original color (basically the card isn't in a hover state) and only the ellipse is in a hover state, I ended up using javascript to toggle a class on the card to handle this, I'm wondering if there's a better approach.

Also, I'm open to any other suggestions.

Thank you for your time :)))

Code

Please log in to post a comment

Log in

Community feedback

  • nodegreecode•390
    @nodegreecode

    Hi there! Your solution looks fantastic. The layout adapts well across different screen sizes and stays true to the design. One suggestion would be to explore using JavaScript to handle the hover states of the activity boxes for more dynamic interactions. Keep coding, stay curious, and keep pushing your skills forward!

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