Skip to content
Submitted over 1 year ago

15th Task📊🔥 Very Happy with this one. Quick completion time, I think

Rodrigo•480
@RodrigoHLC
A solution to the Expenses chart component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Spent about 2:15 h on the layout and 1:15 on the javascript. I wrote it so that no matter how many days are added to the API, this will always use the last 7 days (though I shouldn't brag too much as that can be done in just one line of code), and the height of the bars will be set in relation to the highest value of the week, which will always have a height of 130px📊 The user can click on multiple bars to freeze the tooltips. I'm very, very happy with this one as I churned it out in about 3 hours and 40 minutes, give or take😃😃 got to learn a couple of new things and came up fairly quickly with a workaround for an issue I was having in regards to the use of CSS selectors.

Code

Please log in to post a comment

Log in

Community feedback

  • Josué Zalazar•80
    @josuez2006

    Fantastic work! I learned a lot by reading your code (it has good comments). In my solution, I didn't think about using the document.querySelectorAll and it made it more complicated than it could have been.

    To be honest, you could improve it by using const variables instead of let as they don't change, but it's not so bad. I love how you used the map and forEach functions to reduce the amount of code as well as the consideration for touch actions on mobile devices.

    I didn't expect the starting animation and it's amazing.

    Overall, the only issue that I find in your code as well as mine is the responsiveness of the chart boxes because they're fixed to a certain height.

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