TIME-TRACKING-DASHBOARD HTML | CSS | JS

Community feedback

• 

  P

  Habeeb Kareem•690

  @olaide-hok

  Posted 4 months ago

  Job well done here!

  Some areas to improve on would be to set the color on these class to white.

  .profile--name h2, .duration h3, .active {
      color: #ffffff;
  }
  

  <section class="profile--timeframe">
          <button type="button" class="daily">Daily</button>
          <button type="button" class="weekly active">Weekly</button>
          <button type="button" class="monthly">Monthly</button>
  </section>
  

  The Daily, Weekly and Monthly texts are meant to be interactive elements hence rendering them has buttons would be much better for screen readers to pick them us as such. They can then be styled properly.

  For the javascript side, there exist some repetitive code. The event listeners for daily, weekly, and monthly contain repetitive code. For example, the logic for adding/removing the active class and calling getData is duplicated.

  A way to tackle this would be to create a reusable function to handle the common logic.

  const setTimeframe = (timeframe) => {
    // Remove 'active' class from all buttons
    daily.classList.remove('active');
    weekly.classList.remove('active');
    monthly.classList.remove('active');
  
    // Add 'active' class to the clicked button
    $(`.${timeframe}`).classList.add('active');
  
    // Update data for all activities
    getData(0, workDur, workPrev, timeframe);
    getData(1, playDur, playPrev, timeframe);
    getData(2, studyDur, studyPrev, timeframe);
    getData(3, exerciseDur, exercisePrev, timeframe);
    getData(4, socialDur, socialPrev, timeframe);
    getData(5, selfcareDur, selfcarePrev, timeframe);
  
    // Update the "Last [timeframe]" text
    const timeframeText = {
      daily: 'Previous Day - ',
      weekly: 'Last Week - ',
      monthly: 'Last Month - ',
    };
    work.textContent = timeframeText[timeframe];
    play.textContent = timeframeText[timeframe];
    study.textContent = timeframeText[timeframe];
    exercise.textContent = timeframeText[timeframe];
    social.textContent = timeframeText[timeframe];
    selfcare.textContent = timeframeText[timeframe];
  };
  
  // Event listeners
  daily.addEventListener('click', () => setTimeframe('daily'));
  weekly.addEventListener('click', () => setTimeframe('weekly'));
  monthly.addEventListener('click', () => setTimeframe('monthly'));
  

  12

  Marked as helpful
• 

  Tonny Blair•470

  @Tonny-Blair-Daniel

  Posted 4 months ago

  Your code is working well but the contents are not changing at the same. You can use the javascript loop forEach after parsing your JSON data to an object and changing the contents using the forEach loop.

  00