Fetch data using async and await

Community feedback

• 

  Jay Khatri•4,250

  @khatri2002Posted about 2 months ago

  Hi @Ayako-Yokoe!

  The developed solution looks great! The responsiveness is well-handled! Awesome job!

  I just have a minor suggestion for improvement:

  ---

  Use <button> Inside <li> for Better Semantics

  You've used an <li> element to render the "Daily," "Weekly," and "Monthly" options and handled the click event directly on the <li> element. While this works functionally, an <li> is meant for listing content, not for interactive actions.

  Why is this important?

  • The primary purpose of a <button> is to handle user interactions.
  • A <li> is not inherently interactive, so using it for click actions may lead to accessibility and usability issues.

  Instead of attaching the click event to the <li>, wrap a <button> inside it:

  Benefits of This Approach:

  • Better Accessibility: Buttons are keyboard and screen-reader-friendly by default.
  • Improved Semantics: A button clearly signals interactivity.
  • Consistent Behavior: Avoids unintended behavior where <li> elements are not expected to be interactive.
  • Default Click Handling: Buttons natively support click events without extra JavaScript workarounds.

  ---

  Everything else looks great! Keep up the amazing work! 🚀

  Marked as helpful

  0

  ---

  

  Ayako•270

  @Ayako-YokoePosted about 2 months ago

  @khatri2002 Thank you for your feedback—I’ve fixed it. I really appreciate your detailed advice.

  1
• 

  razanabbas•150

  @razanabbasPosted about 2 months ago

  Your code is good, i like that you used JS to fetch the data from data.json and generated the HTML accordingly.

  0