Expenses chart component made with Flexbox, Vanilla JavaScript, Fetch

Hey Eileen, great work on this challenge; your component looks great and works well! I have to thank you because after looking at your question and what you did, I realize that I had misunderstood the highlighted bar to be the max height, and so I just went back to my code and fixed it. To answer your question, here's briefly what I did, but instead of using a for loop, I used forEach():

const currentDay = new Date().getDay()

data.forEach( (info, idx) => {
  // idx is the index of the item in the array, so i.e., idx for monday would be 0
  // I created a new div for the bar, which contains the amount tag, bar, and day label
  const barDiv = document.createElement("div")
  
  // this adds the class for the current day
  if (idx + 1 === currentDay) {
   barDiv.classList.add('highlight')
  }
})

Hope this helps, and once again, great work!

Great Solution!!

You could try using the JavasScript Date Object to dynamically set the current day of the week.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

I hope that helps!

Hello Eileen, your solution is great good job, I think there is a better way for selecting the current day, it would begin by setting data-id for each day in html, then when you get the current day as number you will dynamically select the corresponding data-set id, in html for each day put data-id=(corresponding number), to access it in JS select dataset.id=currentDay, I hope you it clear enough..