Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Made the Advice Generator App better!

Sudhanshu 60

@sudhanshu-p

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

P

@andreasremdt

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord