time tracking HTML CSS JavaScript

Community feedback

• 

  P

  MAGENE Sem Joel•320

  @JomagenePosted 2 months ago

  Feedback
  @luisv79 Congratulations on completing the challenge and implementing the required features—the content updates correctly when options are selected, and the hover effects and responsiveness are nicely done.

  One suggestion: when a menu item is clicked, the active state isn't visually indicated. To enhance user experience, you could highlight the selected item by keeping it styled in white while others are dimmed.

  Based on your code structure, you can achieve this by adding an "active" class to the clicked menu item and removing it from the others:

  dailyBtn.addEventListener("click", () => {
    dibujarElementos(dailyArray);
    dailyBtn.classList.add("active");
    weeklyBtn.classList.remove("active");
    monthlyBtn.classList.remove("active");
  });
  
  weeklyBtn.addEventListener("click", () => {
    dibujarElementos(weeklyArray);
    weeklyBtn.classList.add("active");
    dailyBtn.classList.remove("active");
    monthlyBtn.classList.remove("active");
  });
  
  monthlyBtn.addEventListener("click", () => {
    dibujarElementos(monthlyArray);
    monthlyBtn.classList.add("active");
    dailyBtn.classList.remove("active");
    weeklyBtn.classList.remove("active");
  });
  

  And add this to your CSS:

  .active {
    color: white;
  }
  

  This will visually indicate the active menu item, improving the user experience. Hope this was helpful!

  Marked as helpful

  0