Time Tracking Dashboard

Community feedback

• 

  Alberto José•630

  @alberto-rj

  Posted 12 months ago

  👋 Hi yinnie, good to see you back solving the challenges!

  👏 Congrats on your solution, I found your code very easy to read!

  Why this is happening

  On line 24 to 26 of your script.js file, using the document.querySelector() method, you are only getting the first h2, .hours and .prev elements of the DOM.

  My suggestion for the problem

  Step 1: Starts at line 5 of your script.js file, get the six cards of the DOM.

  // card containers
  const workContainer = document.querySelector(".workContainer");
  const playContainer = document.querySelector(".playContainer");
  const studyContainer = document.querySelector(".studyContainer");
  const exerciseContainer = document.querySelector(".exerciseContainer");
  const socialContainer = document.querySelector(".socialContainer");
  const selfCareContainer = document.querySelector(".selfCareContainer");
  

  Step 2: After that, create a cards object, where each key is associated with the title of each card.

  // card map
  const cardMap = {
    "Work": workContainer,
    "Play": playContainer,
    "Study": studyContainer,
    "Exercise": exerciseContainer,
    "Social": socialContainer,
    "Self Care": selfCareContainer
  };
  

  Step 3: To work as expected, your updateTime function must be implemented as follows:

  function updateTime (timeFrame) {
    // getting JSON
    fetch("data.json")
    .then(response => response.json())
    .then(data => {
      data.forEach(value => {
        // store json data in variables
        const current = value.timeframes[timeFrame].current;
        const previous = value.timeframes[timeFrame].previous;
        const title = value.title;
  
        // get the card container by title
        const cardContainer = cardMap[title];
         
        // get the children of the card container
        const titleElement = cardContainer.querySelector("h2");
        const hrElement = cardContainer.querySelector(".hours");
        const prevElement = cardContainer.querySelector(".prev");
       
        // populate the children of the card container
        titleElement.innerText = title;
        hrElement.innerText = current + "hrs";
        if (timeFrame == "daily") {
           prevElement.innerText = `Yesterday - ${previous} hrs`;
        } else if (timeFrame == "weekly") {
           prevElement.innerText = `Last Week - ${previous} hrs`;
        } else {
           prevElement.innerText = `Last Month - ${previous} hrs`;
        }
      })
    })
   .catch(err => console.log(err));
  }
  

  Final words

  Note, there are many other ways to approach this same problem. I chose this way because I thought it would be the easiest to understand. If anything is unclear, or if you have any questions, let me know. It would be a pleasure to exchange ideas.

  12

  Marked as helpful