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 using React + Sass

#react#vite#sass/scss
Rashid Shamloo• 570

@rashidshamloo

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


The chart is dynamically generated using the data provided in the "data.json" file.

Learning how to deploy Vite/React to GitHub Pages took a bit of time 😅

Community feedback

Yemisrach• 1,430

@Yemisrach15

Posted

Hi Rashid, Well done! I like your solution. At the moment, the HTML semantics of the bar chart is not that good for accessibility. Using table is better in my opinion.

PS. I used vercel and didn't have to configure anything. It detects your framework and bundler :)

Marked as helpful

1

Rashid Shamloo• 570

@rashidshamloo

Posted

@Yemisrach15 Thanks for your feedback. I have modified the solution to use a "<table>" instead of "<div>" and "<th>" for days of the week. also instead of using a "<h1>", I used the "<caption>" element. hopefully, the accessibility is better now.

As for Vercel, I have an account but for static builds, I think GitHub Pages is enough. I will definitely use Vercel for more advanced projects/challenges 😊

0
Yemisrach• 1,430

@Yemisrach15

Posted

@rashidshamloo Whichever you're comfortable with is fine :) Trying out different platforms let's you compare and choose the best one

1

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