Skip to content
Submitted over 2 years ago

Responsive expenses chart component using react,sass and vitejs

Brandon•290
@branalex94
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Expenses chart component
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I had a lot of issues implementing the chart bars, as I couldn't properly give them the size required, as well as in the live site the bars are even smaller than on development. Is there a better way to create those bars as to give them a reasonable size? Thank you very much iin advance!

Community feedback

  • mubizzy•1,520
    @mubizzyPosted over 2 years ago

    Excellent job on this challenge! your report has a few issues though:

    1. wrap everything in your body in <main> or use semantics

    2. it is a best practice to use both HTML 5 and ARIA landmarks to ensure all content is contained within a navigational region.

    Hope it helps:)...don't forget to mark it as helpful 👍

    Marked as helpful
    0
  • FalejevV•500
    @FalejevVPosted over 2 years ago

    Hi. IDK if my solution is great but i did it using % height.

    1. Using JS you search a day that has the most money spent, that will be "Top one" with cyan color and it will be 100% of height.
    2. Then you loop through each day and calulate % difference from the "Top bar". ( For example Top bar is 100$. Is has 100% height. Another bar is 60$, so it will have 60% of height. )
    3. Pass calulated % as prop to bar "Height". I hope my bad explanation helped :P
    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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