Time Tracking Dashbooard using JS

Community feedback

• 

  Jay Khatri•4,250

  @khatri2002Posted 2 months ago

  Hi! The developed solution looks good! It is well-implemented.

  Suggestions for Improvement:

  1. Replace li Click with a button Element:
     You've used the <li> element directly to render the text Daily, Weekly, and Monthly, and you're handling the onClick event on these <li> elements.

     While this works, it's more appropriate to use a button element since these are interactive and trigger actions (switching views).

     Why is a Button Element Important?

     • Semantic Accessibility: Buttons are designed for interaction, making the solution more semantically correct and accessible for screen readers.
     • Keyboard Navigation: Buttons are inherently focusable and operable using keyboard events (Enter/Space), improving usability for users who navigate without a mouse.
     • CSS Styling Consistency: Buttons come with built-in pseudo-classes like :active, :focus, etc., which are helpful for styling states like hover or active.

  ---

  2. Highlight the Active Option:
     Currently, you're updating the data when a user clicks on any option, which is great. However, you should also visually indicate which option is active. A clear visual cue allows users to understand the current state and which view is being displayed.

     • Add a CSS class (e.g., .active) to the button when clicked.
     • Remove the class from all other buttons to ensure only one is highlighted.
     • By default, Daily should be active on page load.

  ---

  The overall solution is solid! Keep up the great work! 🚀

  0