Skip to content
Submitted over 2 years ago

Expenses chart component solution

Mohit Kanwarā€¢190
@montyaction
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

Hey, everybody! šŸ‘‹

This was my first JUNIOR challenge in which I create a bar chart and actually had to work on JSON. and I was reminded of the joys of using CSS grid! šŸ˜‚ šŸ˜† My solution works (as far as I know) but IDK about my JS... I'd love some feedback, of course, to see how I've done. šŸ˜Š

This was a nice, simple challenge that I enjoyed and in which I was reminded of the joys of using CSS grid! šŸ˜‚

Happy coding

Community feedback

  • Elaineā€¢11,400
    @elaineleungPosted over 2 years ago

    Hi Mohit, excellent work on this first Junior challenge! Everything works well, and I like how the variables and classes are well named. The JS looks great also, and it gave me some ideas on how to improve my code. The only thing I see that's missing right now is the bar color changing with hover; you just need to add a property on the .bar:hover to change its opacity, and that should do it.

    One suggestion I have is, instead of adding the style directly in the JS where you change the style as an attribute in the DOM element, I think you can try using classes to change the styling. That way, all the changes to the style can just be made in the CSS (in case things change) and you wouldn't have to worry about changing your JS.

    Once again, very well done!

    Marked as helpful
    1
    Mohit Kanwarā€¢190
    @montyactionPosted over 2 years ago

    @elaineleung Thanks for your valuable feedback.

    1

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