fetch JSON, Tailwind, responsive Grid layout

Community feedback

• 

  KongMy•0

  @kuribu99Posted over 1 year ago

  For HTML+Js, given that you want to display standard text such as: Last Week-__hrs, you can embed them as part of HTML, e.g.

  <p id="self_previous" class="text-[#6f76c8] text-md mt-2 inline float-right sm:float-none">
  Last Week-<span id="self_previous_value">1</span>hr
  </p>
  

  This allows you to not use ___.innerHTML in Js (which is not encouraged to have direct DOM manipulation and simplify your code.

  You may want to consider semantic aspect of your code for reusability and readability, e.g.

  #1 Since you know which object is prev/current/next, you could do something like

  const work = data[0].timeframes;
  const play= data[1].timeframes;
  

  #2 When you display based on button click, you can assign semantically which is it referring. Also consider reusable functions

  const displayData = (timeframe) => {
       workCurr.innerHTML=`${work[timeframe].current}hrs`;
       workPrev.innerHTML=`Last Week-${work[timeframe].previous}hrs`;
  }
  
  // how to use function
  daily.addEventListener('click', ()=>displayData('daily'));
  

  1