Submitted about 2 years ago

Responsive expenses chart component using SCSS

Venus•1,640

@VenusY

Preview site View code

This is a solution for...Expenses chart component

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

One thing to note for my solution: I decided to use the cyan bar to indicate which day had the highest amount of spending instead of which day of the week it currently is as I thought this was more useful.

Also, if anyone knows why the bar chart isn't showing up in the preview, please let me know.

This was my first time using a JSON file in JavaScript! Feel free to let me know how I did or what you would do differently, all feedback is much appreciated. :)

Community feedback

Elaine•11,400
@elaineleungPosted about 2 years ago
Hi Venus, well done here, and nice work on the animated tool tips! About your question, I think the screenshot browser may be Firefox-based, and I notice that I could view your site on Chrome, but on Firefox, it looks like the screenshot here, as import assertions are not supported on Firefox. What you can try is, instead of using import for grabbing your JSON data, you can try fetch() (which is what I use). I've tried looking for solutions too but haven't found one yet, so if you do find one, let me know! Good luck 😊
Marked as helpful
0
Venus•1,640
@VenusYPosted about 2 years ago
@elaineleung Thank you for the kind words and for taking such an in-depth look at my solution!

Ah, that would explain the screenshot issue, I'll use fetch instead to see how it goes.

If I find a solution, I'll be sure to reply to your comment, thanks again for the feedback! :)
1
Elaine•11,400
@elaineleungPosted about 2 years ago
@VenusY No worries, Venus, glad to help! 😊
0

Please log in to post a comment

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