time tracking dashboard whit Taiwind and js vanilla

Community feedback

• 

  Grego•1,310

  @Grego14Posted 7 months ago

  Hello! congratulations on completing the challenge!

  I recommend that you make the eventListener outside the forEach loop or make use of Event Delegation to improve the performance of the website.

  I also recommend that you move the fetch outside, since every time one of the buttons changes you are fetching the data.json again.

  The switch and those 3 functions are unnecessary...

  function update(data, btnValue){
    let text;
  
    if(btnValue === 'daily'){
      text = 'Previous'
    }else if(btnValue === 'weekly'){
      text = 'Last Week'
    }else if(btnValue === 'monthly'){
      text = 'Last Month''
    }
  
    workHours.innerText = data[0].timeframes[btnValue].current + "hrs";
    workPrevious.innerText = `${text} - ${data[0].timeframes[btnValue].previous}hrs`;
    playHours.innerText = data[1].timeframes[btnValue].current + "hrs";
    playPrevious.innerText = `${text} - ${data[1].timeframes[btnValue].previous}hrs`;
    studyHours.innerText = data[2].timeframes[btnValue].current + "hrs";
    studyPrevious.innerText = `${text} - ${data[2].timeframes[btnValue].previous}hrs`;
    exerciseHours.innerText = data[3].timeframes[btnValue].current + "hrs";
    exercisePrevious.innerText = `${text} - ${data[3].timeframes[btnValue].previous}hrs`;
    socialHours.innerText = data[4].timeframes[btnValue].current + "hrs";
    socialPrevious.innerText = `${text} - ${data[4].timeframes[btnValue].previous}hrs`;
    selfCareHours.innerText = data[5].timeframes[btnValue].current + "hrs";
    selfCarePrevious.innerText = `${text} - ${data[5].timeframes[btnValue].previous}hrs`;
  }
  

  Then you would use it like this:

    update(data, selectedIme)
  

  In the code above you would be replacing the daily, weekly and monthly functions with a single one.

  Remember that you can access a property of an object using square bracket notation too!

  obj[property]
  obj.property
  

  I didn't understand what you said about svgs... but there are some times where you need to change one of the elements within the svg for the color to change, example

  svg path{
    color: white;
  }
  

  If you need help with something else, remember that you can do reply.

  Sorry, I had to delete my last comment because I thought data returned 'daily', 'weekly' or 'monthly' and it didn't...

  I hope this helps!

  Marked as helpful

  1

  ---

  

  P

  Smaylen5•530

  @Smailen5Posted 7 months ago

  Thank you for the advice, much appreciated 😊.

  I followed your advice for the event listener, but it seems like I'm almost doing the same thing because to retrieve the data, I call the fetch inside it, so essentially I call it every time I press one of the buttons:

  btnGroup.addEventListener("click", (event) => {
    const selectedTime = event.target.value;
    fetchData(selectedTime);
  });
  

  Edit: doing it this way makes it very fast to load the data and is a much more efficient solution than before. I'll go study this part of the code more thoroughly.

  For the three functions I had created (daily, weekly, monthly), I changed them with your code. The funny thing is that it took me a good half hour to figure out how to simplify it XD I hadn't thought of using the value of selectedTime for this.

  Regarding the SVGs, I meant that with Tailwind I always have the problem of changing their color. fill-white, which is what you use for the fill color, doesn't work, so I think the only solution is to write CSS in my input.css file. I believe that only icons made specifically for Tailwind work with fill.@Grego14

  1

  

  Grego•1,310

  @Grego14Posted 7 months ago

  @Smailen5 Hello! I just read the new code you added and it's fine!

  I think that to avoid fetching every time you click, maybe you should make a function that runs as soon as the website starts and assign the response.json() to an object outside and use that object to handle the data!

  I was reading the README.md in your repository and I see this:

  <img src="./images/icon-ellipsis.svg" alt="ellipsis icon hover:fill-white"></div>

  To change the color instead of using the svg as the src of an image, try adding the complete svg to the markup.

  <svg>
    ...
  </svg>
  

  try adding the hover:fill-white to the element inside the svg in this case the path.

  Since when we read the svg code the path is the one that contains the fill.

  <path d="M2.5 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z" fill="#BBC0FF" fill-rule="evenodd"/>

  I hope this helps! 😁

  Marked as helpful

  0