Skip to content
Submitted almost 3 years ago

Expenses Chart

Nicolas Aguirre•170
@NicoAguirre1105
A solution to the Expenses chart component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi everyone! All feedback is appreciated.

This is my first project where I tried to use semantic HTML. Please, let me know how is it.

In this project I had to create a hover effect, but this one was a bit tricky. When the mouse is over a chart's progress bar, should appear some text with amount info. I couldn't find a way to do it from CSS, so I used JS to change text's visibility. Is this the proper way to do it?

Also, I created this project using JSON file, let me know if everything is ok with its use.

Code

Please log in to post a comment

Log in

Community feedback

  • Rémy Boiré•350
    @remyboire

    Hi Nicolas,

    great job finishing this challenge! About the hover effect, you can handle it simply in CSS.

    — pass the value you want to display for each bar with a data-value

    — display the value with a pseudo-element like :before and content:attr(data-value)

    — show the pseudo-element with CSS when his parent is hovered with something like .parent:hover:before { opacity : 1 }

    Hope this helps, do not hesitate to ask if it's unclear. Rémy

    Marked as helpful

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