Expenses Chart Solution. HTML, CSS and JavaScript
Design comparison
Solution retrospective
My difficulty was about creating the chart, I cound´t find a way to change the colors and fonts so I can build something like the original design. Any suggestion are welcome.
Community feedback
- @shivaprakash-sudoPosted about 2 years ago
Hello Paula,
The chart component looks good on desktop screen, but there are few issues with it as given below.
- The chart doesn't seem to be very responsive, because on small screens the chart width is becoming too small to hold the bar chart.
- I see that you're using a chart library to draw the chart, I tried using chart.js, but I couldn't make it work and look like the design, since I had no experience with it, so I dropped that and drew the chart from scratch using inline styling. The only suggestion I can provide here is that, if you're not experienced with the library, try not to use it and try to solve the problem in a different way. This way you'll get to learn many new things and also how to approach a problem without using libraries.
- Regarding the usage of semantic tags, you can wrap the chart component inside a
main
tag and the attribution inside afooter
tag. - Coming to the script, you can put JS code in a different file and link to it in the head section of the html file, this way the code looks more organized and easy to maintain.
I hope the above points are helpful and I hope to see more of your work, good luck😊.
Marked as helpful1 - @rodrigompiresPosted about 2 years ago
Hello Paula. Good job. Regarding your questions, to create the graph you can create for each column, 2 divs positioning them one inside the other. The sizes of the inner divs (bars on the chart), you can determine as per the json values. As for the colors, you can use JavaScript to add a class and style this class in CSS. If you want, see how I managed to solve this challenge. https://github.com/rodrigompires/DesafioExpensesChartComponentMain
I hope it helps you.
Marked as helpful0 - @freakyjonesPosted about 2 years ago
Hi Paula,
congratulation on completing the challenge
I just saw your code and like to give some suggestions with your permission,
-
you can add another key to every object in the data.json and then map it for every bar so that you can change the color of the bars.
-
Start using semantic HTML in your code. Here is a blog for you to get started with semantic HTML. https://www.simplilearn.com/tutorials/html-tutorial/html-semantics
If you want to know how to do this with only Js you can check out my solution.
I hope it helps, Thanks happy coding :)
Marked as helpful0 -
Please log in to post a comment
Log in with GitHubJoin 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