Time tracking dashboard

Community feedback

• 

  Shuaib•640

  @JustShuaibPosted over 2 years ago

  Hi there! I just wanted to point out a few things. While fetching the data from the json file, always include a way to catch errors incase the request fails to be successful.

  You had

  document.addEventListener("DOMContentLoaded", () => {
  // function async to get data from the json file
  async function loadObjJson() {
  const response = await fetch("./assets/js/data.json");
  const data = await response.json();
  console.log(data); 
  

  Declare a function in a separate block then call the function inside the DOMContentLoaded event listener,instead of including the function block inside the event listener. Also, always remove console logs from your code when you're done

  Also for your titles, instead of selecting them individually,you could give all the headings the same class and querySelectorAll all the headings then loop through the data to display each in the respective title.

  Happy coding!✌️😊

  Marked as helpful

  1

  ---

  

  JB•80

  @JB-DoffemontPosted over 2 years ago

  Hello @JustShuaib !

  Thanks a lot for your time. I'll apply your advices to improve my code :)

  0

  

  Shuaib•640

  @JustShuaibPosted over 2 years ago

  @JB-Doffemont

  Since the json object contains the same number (6) of elements as the titles, you can the use a for loop to loop through the json object and then assign each of the element to the corresponding title.

  so, instead of having

      const exerciseTitle = document.getElementById("exercise"); ...
      const currentHoursPlay = document.getElementById("currentHoursPlay"); ...
     const previousHoursWork = document.getElementById("previousHoursWork"); ...
  

  you'd have

      const titles = document.querySelectorAll('title');
      const currentHours = document.querySelectorAll('currentHour');
      const previousHours = document.querySelectorAll('previousHour');
  

  so, instead of having

  workTitle.innerHTML = "<p>" + `${data[0].title}` + "</p>";
  

  you'd have

  for (let i = 0; i < data.length; i++){
      titles[i].innerHTML = "<p>" + `${data[i].title}` + "</p>";
  }
  

  You could destructure the data object you're getting from the json object and extract the daily, weekly and monthly duration.

  const { daily, weekly, monthly } = data[i].timeframes;
  

  Then display the corresponding content based on the button that is pressed. The bottom-line is selecting similar elements together and looping through them instead of selecting them individually.

  Marked as helpful

  1

  

  JB•80

  @JB-DoffemontPosted over 2 years ago

  @JustShuaib

  Sorry for the late response

  Because of you I did improve my JS and reduce my script way more !

  I understood that I had to loop through the json object instead of doing repetitve code. I Also start to learn a little bit about destructuring.

  Thanks a lot for your advices :)

  0