Submitted about 2 years ago

Expenses Chart

Nicolas Aguirre• 170

@NicoAguirre1105

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

This is a solution for...

Expenses chart component

HTML
CSS
JS

2junior

View challenge

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

@remyboire

Posted about 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

Nicolas Aguirre• 170

@NicoAguirre1105

Posted about 2 years ago

@remyboire Thank you!

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