Time Tracking Dashboard

Community feedback

• 

  David•7,960

  @DavidMorgade

  Posted almost 3 years ago

  Hello anderson, congrats on finishing the challenge!

  Just a little suggestion, you don't need to upload your data to any service if you want to practice your fetch() function, you can fetch local json files just using the relative path of the file in your project folder, it will get the same results as uploading it on a server, and it will need the same syntax to get the data with fetch, the only thing that will change is the url path of the file.

  13

  Marked as helpful
• 

  Elaine•11,360

  @elaineleung

  Posted almost 3 years ago

  Hi Anderson, I think this was very well done! Your component is responsive, and it looks close to the design; I probably would add a bit of margin/padding around it so that when the browser width shrinks, the sides won't be touching the browser. Also, the "previous" labels on cards probably should reflect that timeframe instead of having "Last Week" for all of them. Other than that, everything looks alright to me 😊

  About your question regarding the addEventListener, you can use a forEach method to iterate through the data. A few things I'd do differently to set this up:

  I would assign different variables, where instead of having the 2 separate "current" and "previous" stats, I'd just call their parent card, which means I'd add a class name or id to the card that's more easily recognizable (I'm using stats-card in this example). The code would look something like this:

  const cardsEls = document.querySelectorAll(".stats-card");
  const daily = document.querySelector("#daily")
  const weekly = document.querySelector("#weekly")
  const monthly = document.querySelector("#monthly")
  
  fetch({your url})
      .then((response) =>{
          return response.json()
      }).then((data) =>{
  
     daily.addEventListener("click", function(){
        cardsEls.forEach( (card, idx) => {
           const statsNow = card.querySelector(".stats-now");
           const statsPrev = card.querySelector(".stats-prev");
           statsNow.textContent = `${data[idx].timeframes.daily.current}hrs`
           statsPrev.textContent = `Yesterday - ${data[idx].timeframes.daily.previous}hrs`
         })
      })
  
     // rest of your code
  

  There's a way to also iterate through the 3 timeframe elements, but I think this is good enough for now, and if you want to check that out, you can have a look at my solution: https://www.frontendmentor.io/solutions/responsive-dashboard-using-scss-and-vanilla-javascipt-with-json--HVkNhdtJT

  Hope this helps you out!

  13

  Marked as helpful
• 

  Rashwan-Mohamed•340

  @Rashwan-Mohamed

  Posted almost 3 years ago

  Hello Anderson , well done finishing the project, just continue to increase you skills since its the only way to do so, I've gone through your Js logic and I see although the approach is working isn't a good practice, I would urge you to go to the solutions and pick an expert solution and examine his js file, regarding the fixed grid column you wouldn't use a grid area in this case, if you want a fixed width for the column you would use something like this grid-templete-columns:40px 40px 40px, more important that this the js logic make sure it never has a lot of repeating lines, don't continue just search for a better approach, there is a YouTube channel with the name of code addict this man creates a lot of projects using js I would recommend it, best luck (:

  01