Expenses Chart Component with Flex and Json

Fixed issue with graph not retrieving data from Json file

Hi everyone. Thank you for taking the time to have a look at my solution! Any feedback is greatly appreciated!

• What did you find difficult while building the project?

The most challenging area has now become retrieving the Json data when the project was hosted. I had to take down the solution as the graph was not displaying and had to learn about fetch requests and how to work with data using that. I had never used this before so it was quite challenging.

Secondly, creating the layout for the graph with HTML proved to be a bit of a challenges as I had completely missed the cost card which appears on hover and had to take that into account when setting the height of each bar.

Lastly, having the respective cost card show when a bar was hovered seemed to also be a bit of a challenge as I didn't want to create separate CSS classes for each of these, and decided to find a method with JavaScript.

• Which areas of your code are you unsure of?

I'm still learning JavaScript and I am using these challenges as a way to practice my coding, so I currently feel that my code is messy and unnecessarily busy. This became even more so when integrating the fetch request as I was not sure how to save Json data to variables. ANY ADVICE HERE IS APPRECIATED!

• Do you have any questions about best practices?

I am open to any suggestions that you can offer with regards to my code which I can use on future projects.

Thanks again, everyone!