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

Expense Chart with Json and staggered animations in Vanilla Js

@remyboire

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


I had fun adding animations when the data is load via the data.json file. Feel free to give any feedback if there are some stuffs I can improve!

Community feedback

Aadvik‱ 1,250

@Aadv1k

Posted

The design looks spot on! just one small thing, I think the grey bar is meant for the highest value

0

@remyboire

Posted

Hi @Aadv1k, thank you for your feedback ! I think you're talking about the 'wednesday' bar, isn't it ? Since we're thursday it's actually this bar that's highlighted!

0
Aadvik‱ 1,250

@Aadv1k

Posted

@remyboire welp, it's just a theory, pretty cool that you implemented that, what I though that it is supposed to be a weekly expenses chart, something you might check next week, so doesn't make sense to show the current day, but it would be good to show the max amount spent in some danger (red) color

0

@remyboire

Posted

@Aadv1k I sticked to the design actually, but I totally agree with you, it's last 7 days spending, so the actual day should be the last! But the challenge was pretty clear : See the current day's bar highlighted in a different colour to the other bars. I didn't manage to correct the design as I focused on the code :)

0
Aadvik‱ 1,250

@Aadv1k

Posted

@remyboire ohh okay, I actually did not see that one! While writing code I just do what I feel makes sense, I never really read the guide, but hey, at the end of the day, your design looks really spot-on, I might as well ask you for some input on my solution

0

@remyboire

Posted

@Aadv1k Yes sure I'll have a look!

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