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

Dagim Tizazuā€¢ 240

@DagimTizazu

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


šŸŽ’Features:

- View the bar chart and hover over the individual bars to see the correct amounts for each day. 
- See the current day's bar highlighted in a different color to the other bars
- View the optimal layout for the content depending on their device's screen size
- See hover states for all interactive elements on the page
- See dynamically generated bars based on the data provided in the local JSON file

šŸ”Ø Built with:

  • React JS šŸ’»
  • Vite ā›ļø

Tips, questions, and comments are always welcomed āœŒšŸ»

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