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 HTML, SCSS, JS (RWD)

Paulina 350

@testerium

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 project took me about 2 hours to complete. It is responsive - desktop and mobile version. I am a beginner with JavaScript, so this part was the most difficult for me to implement. Any feedbeck welcome :)

Community feedback

Elaine 11,400

@elaineleung

Posted

Hi Paulina, well done on this challenge and writing out all that JS!

This is more of a UX comment: At first I thought the amount tags weren't working, but then I looked at your code and realized you wrote them as click events. I think that unless there had been some explicit instruction (such as, "click to see amount"), I really would not have known the bar is meant to be clicked on for the amount to show up (plus I also worked on this challenge and know the brief). Also, since there is already some change seen when a user interacts with the bar, as in, hovering over the bar changes its color, there might not be a thought that there's more interaction. In terms of UI, I think you can try adding a bit more padding around the amount tags.

Once again, great work and looking forward to more 🙂

1

Paulina 350

@testerium

Posted

@elaineleung Hi Elaine! Thank you for your comments ! :) You're absolutely right that from the user's perspective it's not clear that he should click on the bar to see the amount. Padding can indeed be enlarged. I will try to improve it. Thanks!

1

@GabrielRuizVarela

Posted

Hey, nice work! A couple of things I would add is parsing the json file directly and getting the maximum from that and not manual. Here an article that can be useful: https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

P.S.: I like your the clarity of your code.

Cheers!

1

Paulina 350

@testerium

Posted

@GabrielRuizVarela Hey. Thank you! :) I tried to do this, but I had some problems - so I copied the data to a js file. I will try it with your advice!

0

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