css grid , js , data json

Community feedback

• 

  Eray•1,410

  @ErayBarslanPosted over 2 years ago

  Hello, design looks good and responsive, excellent work! Some suggestions:

  • Firstly regarding JS, you're manually coding each output. You can achieve the same dynamically with some refactor and using for loop.

  HTML:

  <div class="work-track tracker">
     <h1 > <span class="work-cr">32</span>hrs</h1>
     <p>Last <span class="work-pr">Week - 36</span>hrs</p>
  </div>
  /* To begin with, you should give the same class to your elements instead id */
  

  JS:

  const headings = document.querySelectorAll('.work-cr')
  const lastprs = document.querySelectorAll('.work-pr')
  
  for (let i = 0; i < userData.length; i++) {
    headings[i].innerHTML = data[i]['timeframes']['daily']['current']
    lastprs[i].innerHTML = data[i]['timeframes']['daily']['previous']
    lastprs[i].innerHTML = `daily ${data[i]['timeframes']['daily']['previous']}`
  }
  

  This does the same thing with much less code. You'd need to do the same for weekly and monthly outputs aswell.

  Also content starts to stretch out on bigger screens. That's due to 80vw width on container. When you use relative width like this on container, you might want to limit it with a max-width. Something between 1100-1200px should work for your solution. In general it's better to use max-width for responsive design. Nice work again and happy coding :)

  Marked as helpful

  1