Expenses chart component made with Flexbox, Vanilla JavaScript, Fetch

Community feedback

• 

  Elaine•11,360

  @elaineleung

  Posted almost 3 years ago

  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!

  10

  Marked as helpful
• 

  Chanda•820

  @Chanda-Abdul

  Posted almost 3 years ago

  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!

  00

  Marked as helpful
• 

  Rashwan-Mohamed•340

  @Rashwan-Mohamed

  Posted almost 3 years ago

  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..

  00

  Marked as helpful