Time Tracking Dashboard

Community feedback

• 

  David•8,000

  @DavidMorgadePosted over 2 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.

  Marked as helpful

  1

  ---

  

  Anderson Vianna•240

  @andykallianPosted over 2 years ago

  @DavidMorgade thanks! I thought that if when uploading the project to a server like github page, the local json request wouldn't work. Thank you for clearing up this doubt i had

  0

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @andykallian I used the fetch method with local data in my solution, so if you're interested in how I did it, you can check out my repo!

  0

  

  Anderson Vianna•240

  @andykallianPosted over 2 years ago

  @elaineleung yeah, I've checked it on the codes of everyone who has commented here, also in other solutions, and they all really used a local JSON with no issues. I thought it was not possible when dealing with remote servers

  0
• 

  Elaine•11,400

  @elaineleungPosted over 2 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!

  Marked as helpful

  1

  ---

  

  Anderson Vianna•240

  @andykallianPosted over 2 years ago

  @elaineleung wow! thanks for the tips!!!!! I will surely implement and study your solution! that was exactly what i wanted in JS loop! thank you very much!

  1

  

  Anderson Vianna•240

  @andykallianPosted over 2 years ago

  @elaineleung in this part of code:

  daily.addEventListener("click", function(){ cardsEls.forEach( card, idx => {

  Must I create an eventListener to daily and also one to weekly and one to monthly? In the end, I would have 3 "eventListenners", right?

  0

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @andykallian Yes, in the part where I added // rest of your code, that's where you'd add the other 2 event listeners that would be written in the same way as what I did. Hope that clears things up!

  Marked as helpful

  0
• 

  Rashwan-Mohamed•340

  @Rashwan-MohamedPosted over 2 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 (:

  0

  ---

  

  Anderson Vianna•240

  @andykallianPosted over 2 years ago

  @Rashwan-Mohamed Thanks for the suggestions! I'm gonna try to implement the css modifications and going to check out the videos on this channel!

  thanks!

  0