Frontend Mentor - Time tracking dashboard solution

Community feedback

• 

  Edis•1,220

  @edo979

  Posted over 2 years ago

  Hello. Great work. I read your javascript file and add some changes. You javascript is excellent do not worry. I did this because I was bored and love javascript.

  let data = [],
  selectedTimeFrame = 'daily'
  
  const buttons = Array.from(document.querySelectorAll('[data-show]'))
  const currentElements = Array.from(document.querySelectorAll('.current-data'))
  const previousElements = Array.from(document.querySelectorAll('.previous-data'))
  
  fetch('../data.json')
    .then((res) => res.json())
    .then((result) => {
      data = result
  
      updateView()
    })
  
  // Event listeners
  buttons.forEach((button) => {
    button.addEventListener('click', (e) => {
      selectedTimeFrame = e.target.dataset.show
  
      updateView()
    })
  })
  
  function updateView() {
    data.forEach((activity, i) => {
      const currentValue = activity.timeframes[selectedTimeFrame].current
  
      currentElements[i].textContent = currentValue + getTimeUnits(currentValue)
  
      previousElements[i].textContent = formatTextPrevEl(
        activity.timeframes[selectedTimeFrame].previous
      )
    })
  }
  
  // Utility
  function getTimeUnits(value) {
    return value > 1 ? 'hrs' : 'hr'
  }
  
  function formatTextPrevEl(number) {
    const timeUnit = getTimeUnits(number)
  
    switch (selectedTimeFrame) {
      case 'daily':
        return `${number}${timeUnit} - yesterday`
  
      case 'weekly':
        return `last week - ${number}${timeUnit}`
  
      case 'monthly':
        return `last month - ${number}${timeUnit}`
  
      default:
        return
    }
  }
  

  10

  Marked as helpful
• 

  Elaine•11,360

  @elaineleung

  Posted over 2 years ago

  Hey Imad, great job here, and thanks for sharing that info about the range for media query, which I did not know about! How do you like working with it, and how does that make you write your CSS differently from what you normally do for media queries?

  I love the tablet view that you have, and I wish I thought of that when I was building mine; I might try changing to this view you have later when I make some tweaks.

  I think the only comment I have is, I notice in your JS and the display that you have "last day" as the label for the previous stat from yesterday; in English it's probably more correct to use "yesterday", since "last day" has more of the meaning of the last day in a period, like the last day of the week, or last day of the month, and we don't normally think of last day as the previous day (as in yesterday).

  That's all really, great work once again!

  14

  Marked as helpful