Made the Advice Generator App better!

Community feedback

• 

  P

  Andreas Remdt•950

  @andreasremdtPosted about 2 years ago

  Hey @sudhanshu-p,

  Congrats on solving the challenge! I played around with it and it works fine, plus it looks really close to the design!

  A couple of suggestions to improve your code:

  • Try using more accessible HTML elements. Your HTML structure consists mostly of span elements, which have no semantic meaning at all, hence you got 5 accessibility issues. The goal of HTML is to describe the page content to search engines, screen readers, browsers, and other developers as semantically as possible. We have a number of HTML elements for that, such as main, article, section, or headings like h1. If you want to read more about semantics, here's a link to MDN.
  • Your dice button is also span, which brings accessibility issues with it (e.g., try to focus and trigger it with your keyboard only - it won't work). Whenever you have interactive content, you should use the appropriate element. In this case, a button is be the best choice, as a button element performs a programmable action after being pressed, like fetching and displaying a new advice. I also saw people use the a element for this, and while it's better than a span, it's also not semantically correct since a elements link to other pages, they don't trigger programmable actions.

  I like that you used defer on the script import to unblock the HTML from parsing, and I also like how clean and straight-forward your JavaScript logic is. Keep up the good work!

  0