Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Expenses chart Component In ReactJS with FlexBox & Grid

@Nikshinde7

Desktop design screenshot for the Expenses chart component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • I have included the image for the Graphs sections, as I was unaware of which library to use there, Feel free to include your comments about which graph library I should Use!!

Thanks!

Community feedback

@stefanwright1988

Posted

Hey,

I suggest you revisit this task, the graph should be generated from the JSON file provided and not a static image, it should also have a hover effect to show the value for that day.

Also your site is not responsive, when viewing on a mobile device everything overflows its container, and your graph (which again should not be an image) is not viewable.

There is not much use of semantic HTML elements in use, I would suggest reading up on those

Marked as helpful

0

@Nikshinde7

Posted

@stefanwright1988 Yes it's not mobile responsive, I'll surely have to work on that.

Another thing, about the graph, is there any specific library I have to use? Just for the sake of design or will it be fine if I use any library at all?

0

@stefanwright1988

Posted

@Nikshinde7 you could use anything, it doesn't necessarily need a library, my own solution created divs for each bra in the bar graph, I used Styled Components in my react project for it

Marked as helpful

0

@Nikshinde7

Posted

@stefanwright1988 Thanks for the insight! Will implement it again then!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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