All comments

• 

  Chyunjet•620

  @JetyunSubmitted over 1 year ago

  Please criticize my JS and Tailwind, i think my JS can be shorter and better but i don't know how.

  Thank you

  

  fetch JSON, Tailwind, responsive Grid layout

  1

  21
  

  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