Frontend Mentor - Time tracking dashboard solution

Community feedback

• 

  Edis•1,220

  @edo979Posted about 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
    }
  }
  

  Marked as helpful

  1
• 

  Elaine•11,400

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

  Marked as helpful

  1

  ---

  

  imad•3,330

  @imadvvPosted over 2 years ago

  Hey Elaine, thanks a lot for your feedback,

  for the media query I found it on this blog post on google chrome blog talking about it.

  but the basics idea is to target a range between two widths, like for example this the media query tests for a viewport with a minimum width of 40rem, and a maximum width of 60rem.

  @media (min-width: 40rem) and (max-width: 60rem) {
    /*  styles for viewports between 40rem and 60rem. */
  }
  

  this can be rewritten in the new syntax as:

  @media (40rem  <=  width  <=  60rem )  {
  
    /*  styles for viewports between 40rem and 60rem. */
  }
  

  and as you may notice that ' English isn't my native language ', I try my best, but it's well hard to learn a lot of things at ones and not make stupid mistakes here and there, I will update it, Thanks a lot again.

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @imadbg01 Thanks for the explanation, Imad!

  And no worries, I know that most of the members here aren't native English speakers, and I know there are a lot of things in the written English language that they aren't aware of. I used to teach English and was an editor, so I am a bit more sensitive to language mistakes, but actually I tend to ignore most of these mistakes when I review code, unless it's something that I feel needs to be said. Since many of the clients and companies are using English or have English content, I think it does help to point out language issues too so that the non-native speakers here can avoid this sort of issue when working on a real-life project!

  1

  

  imad•3,330

  @imadvvPosted over 2 years ago

  @elaineleung That's great, and am totally understand that, but just I want to be honest, and if you don't mind can you give me some advice, on how to grep a strong foundation on the English language, I mean I tried to start writing some articles and record my self reading some random book, but I still fear from unwanted mistakes.

  0

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @imadbg01 I think it depends on which of the language skills you want to work on most, and by language skills, I mean listening, speaking, reading and writing. Even though working on one skill will help to improve the other three also, it helps to be focused on what your goal is, but of course, you can also focus on all four skills at the same time (which is probably the best option if you have the capacity!).

  For example, if you want to improve your writing skills, then I'd suggest reading more blog posts by native English-speaking developers and see how they write by noting down the sentences and phrases they use. After that, try writing something short and then get an English speaker to give you some feedback. If you want to improve on your speaking skills, you can watch tutorial videos by native speakers with the captions on; try to jot down the phrases they use and try saying them aloud to train your ear, or even record yourself repeating what they say.

  Lastly, language learning is a lot like programming, since programming also involves languages, and so there's bound to be mistakes made but also a lot of learning as well! Try not to be afraid of making mistakes as this is often the best way to learn, and usually in my experience, native speakers are more than happy to point out mistakes, but it'd be good for you to find some with whom you feel comfortable making mistakes around so that you don't feel too discouraged.

  Good luck, and if you got any more questions, you can always just DM me on Twitter 🙂

  1