Expenses Chart Component using Vanilla JS and CSS

Community feedback

• 

  Arsh Goyal•940

  @arshGoyalDev

  Posted about 3 years ago

  You have done it great

  • It seems like your solution could work but you could use "%" instead of pixels.
  • And to fix some of the accessibility issues you should either remove all of the ids you added in amount div or you could add them like id="monday amount", id="tuesday amount" and more

  12
• 

  Devmor•470

  @devmor-j

  Posted about 3 years ago

  Nice job 🎉 looks good and almost identical though I guess that cyan bar is supposed to be the max spending bar as shown in the design specs. Still not sure if this works but in your css file changing .day.today to sth like .day.max might be the fix (needs some js refactor as well):

  .day.max .bar {
    background-color: var(--clr-cyan);
  }
  

  then in your js file:

  // try to come up with a logic here:
  if (/* this bar is the max then add 'max' class to it */) {
      days[index].classList.add('max');
    }
  

  Mobile and zooming and all works. Fonts and sizings are also great. Will be a great solution. Keep it up bro 😉

  02