Time Tracking Dashboard

Community feedback

• 

  Alberto Raúl José•610

  @alberto-rjPosted 5 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.

  Marked as helpful

  1

  ---

  

  P

  yinnie•280

  @wcyin9Posted 5 months ago

  @alberto-rj I cannot thank you enough Alberto, I really appreciate the time and patience you put aside to help me learn! Thanks for being so amazing. The approach you gave me really helped me understand, and I was finally able to resolve the issue!

  I have an inquiry related to assigning each card container into different variables. I thought of a different approach (though I was unable to successfully execute it) and that is using const cards = document.querySelectorAll(".card"); to make an array, then using forEach to loop over the array to target each one. What could I have done to make that work?

  My final question is, do you happen to have any resources or tips for JavaScript logic thinking? JS is my first official coding language, and often times the logic and approach stumps me.

  Thank you again for your help and time! I am forever grateful

  1

  

  Alberto Raúl José•610

  @alberto-rjPosted 5 months ago

  You're welcome yinnie, it's good to know that you were able to solve the issue!

  To answer your first question, you could alternatively take the following steps:

  Step 1: Starts at line 6 of your script.js file, get all the cards of the DOM by the .card selector:

  // get all cards of the DOM
  const cards = document.querySelectorAll('.card');
  

  Step 2: At line 17 of your script.js file, inside the updateTime function, instead of using a forEach() for each object inside the data array, use it for each card inside the cards NodeList. After that, to work as expected, implement the updateTime function as follows:

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

  Note: For this approach to work without any bugs, you must make sure that the sequential order of each card in the DOM matches the sequential order of each object in the data array.

  As for your second question, it's okay, don't expect too much, everything takes its time. According to references in this area, this is quite normal for those who are just starting out.

  However, if you're looking to improve your JavaScript skills, there's no doubt that the best way to do this is by solving logical problems and building practical projects (like this one from Frontend Mentor).

  Specifically for logic problems, there are so many great platforms that it would be difficult to recommend one in particular. My recommendation is to look for the one that best suits your needs and objectives.

  Useful Resources:

  • 7 WEBSITES TO PRACTICE JAVASCRIPT AND SHARPEN YOUR CODING SKILLS
  • MDN: NodeList
  • MDN: NodeList: forEach() method

  Marked as helpful

  0