Time Tracking Dashboard

Community feedback

• 

  Gregor de Cillia•190

  @GregorDeCillia

  Posted about 2 months ago

  Hey, great work!

  Some quick words about the css: you could have made a 2-column and 3-column layout via additional breakpoints. It's not as hard as it sounds since the styling for the inividual cards would be the same as in the 4 column layout.

  Fetching and Iterating

  Getting started with iteration (loops) and the fetch api can be daunting. Your approach ended up using a lot of repetition on the HTML side. What I ended up doing instead was creating html strings and inserting them.

  const template = ({name, current, previous, unit, img, color}) => `
  <section class="card activity-card" style="background: ${color}">
    <img class="activity-img" src="images/icon-${img}.svg" alt="">
    <div class="card-top">
      <div class="activity-title">
        <h2>${name}</h2>
        <div class="activity-menu"></div>
      </div>
      <div class="activity-values">
        <div class="value-current">${current}hrs</div>
        <div class="value-previous">${unit} - ${previous}hrs</div>
      </div>
    </div>
  </section>`;
  

  This means that if you want to make changes to the HTML structure, you only need to do it in one place.

  But let's talk about extending your approach

  If you don't want to touch the HTML again, another thing you could do is to add functions to your code that return DOM nodes

  const qs = q => document.querySlector(q)
  const getCurrent = item => qs(`#current-${item}`)
  const getPrevious = item => qs(`#previous-${item}`)
  const getTitle = item => qs(`#${item}`)
  

  The dataset is an arry, so you can use many techniques to loop over them. I would recommend a for...of loop.

  let timeframe = "weekly"
  for (const {title, timeframes} of data) {
    const {current, previous} = timeframes[timeframe];
    console.log({title, current, previous})
  }
  

  Running this will show you that you iterate over the relevant data. The next step is modifying the DOM. For that I define another helper function toKebapCase(), which converts the titles from the data into a shape that is compatible with your ids.

  const toKebapCase = str => str.toLowerCase().replace(" ", "-");
  toKebapCase("Self Care")
  // "self-care"
  

  Combining those techniques allows you to define a function that upates the DOM. It is very similar to the update functions from your js file.

  const updateTime(timeframe = "weekly") {
    for (const {title, timeframes} of data) {
      const {current, previous} = timeframes[timeframe];
      const item = toKebapCase(title)
      getCurrent(item).innerText = current;
      getPrevious(item).innerText = previous;
      getTitle(item).innerText = title;
    }
  }
  

  Now you bind all this to click events

  qs("#daily-button").addEventListener("click", _ => updateTime("daily"));
  qs("#weekly-button").addEventListener("click", _ => updateTime("weekly"));
  qs("#monthly-button").addEventListener("click", _ => updateTime("monthly"));
  

  Summary

  I know this is a lot to take in. Take your time to understand what these elements do. One technique I used in the loop is called destructuring. It allows you to make js codes shorter and more expressive, especially with 2 dimensional data.

  10