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 bar chart component using JSON data

@duncan-chege

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


What are you most proud of, and what would you do differently next time?

  • I'm proud that I've completed this project in a short period. I'm getting used to tailwind CSS
  • I've learned to use Chart js to create dynamic and static web graphs
  • It wasn't necessary but I calculated the expenses as a way to test myself
  • I used a parent and child component in the project. I shared the total expense sum data from my child's component to my parent's component. This helped me learn about "lifting the state up"

What challenges did you encounter, and how did you overcome them?

  • Understanding the chart js documentation on specifics like hiding labels & grid lines, and resizing tooltips wasn't straightforward but chatGPT helped me get what I needed
  • I was confused about sharing data from a child component to a parent component but through research, I understood the concept

Community feedback

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