Skip to content
Submitted over 2 years ago

Expenses Chart

Nicolas Aguirre•170
@NicoAguirre1105
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Expenses chart component
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

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.

Community feedback

  • Rémy Boiré•350
    @remyboirePosted over 2 years ago

    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
    0
    Nicolas Aguirre•170
    @NicoAguirre1105Posted over 2 years ago

    @remyboire Thank you!

    0

Please log in to post a comment

Log in with GitHub

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