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

Advice Generator App

@Rooneyfull

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

Dytoma 570

@Dytoma

Posted

Hey👋

Good job on completing this challenge, I have some suggestions that you can use to improve your code.

  • First instead of using a div to wrap the dice image, I'll suggest you use a button. The reason for that is that you want screen readers to notice users with disabilities to understand what you're passing through your page and then you can add an aria-label to your button and aria-hidden="true" to the dice image.
  • Here is the code: instead of this <div id="dice-neon-circle" onclick="getAdvice()"><img src="images/icon-dice.svg" alt="" srcset="" /></div> use this <button id="dice-neon-circle" onclick="getAdvice()"><img src="images/icon-dice.svg" alt="" srcset="" /></button>

And you would want to add some descriptive content to the alt attribute.

Happy coding🙌

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