CSS Flex and jQuery

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Udeh, the JSON file can be used in your JS file with fetch, like this:

  fetch("./data.json")  // fetches data from the file
  .then(response => {
     return response.json(); // a promise is returned
  })
  .then(data => {
    console.log(data) // you can use console.log the data to see what it is first
  })
  

  Here is an example of how I used JSON in this challenge:

  fetch("./data.json")
  .then(response => {
     return response.json();
  })
  .then(data => {
    data.map( info => {
  
      const barDiv = document.createElement("div")   // I created a colored bar in the chart
      barDiv.classList.add('bars__day-bar')   // added a class for styling the bar 
      barDiv.style.height = `${info.amount * 0.1595}em`  // used the JSON info to determine height
  
      dayDiv.appendChild(barDiv)   // append this barDiv to the individual dayDiv in my chart
  
    })
  });
  

  You can have a look at the rest of my code here: https://github.com/elaineleung/frontendmentor/blob/main/expenseschartcomponent/index.js

  Hope this helps!

  Marked as helpful

  1

  ---

  

  Udeh Ifeanyi•520

  @IfescohubPosted over 2 years ago

  @elaineleung Thanks so much for the explanation. Your comment is very useful.

  Just applied it and it worked.

  Though some part of your code are too hard for me to understand, prolly because I'm new to it. Maybe with time, I will reach that level.

  Thanks again

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @Ifescohub You're welcome, glad I could help! :)

  1