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

Dynamic expenses chart component

Saad Hisham 1,750

@Saad-Hisham

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


Hi there🙋‍♂️, I really enjoyed solving this. Here is what I found difficult:

Making the height of every div dynamic: I discovered that it's determined by multiplying the amount in the JSON file by "2.86478227655". This was a bit challenging for me, especially since I'm more familiar with working in React rather than vanilla JavaScript. Nonetheless, it was a good challenge, and any feedback is welcome.

Community feedback

@justEfere

Posted

to actually get the exact dynamic height. You need to find what percent is the .json amount value to the total height of the chart div.. for example. if the total height of the div is 200px, and the .json amount is 23.4. you then need to find 23.4% of 200 and use the value as fill value for the div.

${(23.4/100)*200}px will give you the exact height for any div and make it dynamic.

I hope this was helpful.

Marked as helpful

0

Saad Hisham 1,750

@Saad-Hisham

Posted

ty bro I used Photoshop to get the size of every bar and divide it on JSON amount code for the same bar and all bars gave me the value 2.86 so I guessed this is the equation @justEfere

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