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 with scaling elements depending on the value with fetch

#fetch#sass/scss#accessibility
Tryt4n 940

@Tryt4n

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 edited a little bit json file and added few things. Everything is fetching from that file: account balance, total spending in month, percentage difference and all values for every day. Based on fetching data bar in the chart with the biggest value is always max height and all other bars are scaled to that one based on their values so the data can change all the time without affecting. Every bar and label with $ are ::before and ::after elements. Also I added focus states for them.

Any feedback about some easier or more clear way to do that I'll appreciate.

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