expenses chart component main

Community feedback

• Account deleted

  Hello amine, congrats on completing the the bar chart component. Styles are really good as well as the responsiveness. The project is already well coded so I just would like to notice the following about the JS logic.

  getApi() function holds all the logic. Once the response is parsed you could abstract the logic for manipulating the DOM into another function, passing as argument the reponse parsed. That would made your logic much cleaner.

  function getApi() {
    fetch("data.json")
      .then((data) => data.json())
      .then((json) => {
           createBarChart(json);
      })
      .catch((err) => err);
  }
  
  function createBarChart(json) {
  // Here the code for DOM manipulation.
  }
  

  Another point is using the property style when manipulating the DOM. While it works is not a best practice because it generates inline styles for the HTML elements. Changing styles should be approached adding, removing or replacing classes. So instead of this:

   daysInfo.item(max).style.backgroundColor = `hsl(186, 34%, 60%)`;
  

  This should be applied:

   daysInfo.item(max).classList.add("example-class");
  

  In your css would be .example-class { background-color: hsl(186, 34%, 60%) }

  Hope this helps, happy coding and I see you around!

  Marked as helpful

  1

  ---

  

  amine takdenti•330

  @aminetakdentiPosted over 2 years ago

  @alexcumplido Thank you for your advice that was relly helpfull👌👌👌

  1

  Account deleted

  @aminetakdenti you're welcome! Hope to see more projects : )

  Marked as helpful

  0