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 using HTML, CSS, JS

#node#sass/scss

@stefanomainetti

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

Ahmed Bayoumi 6,800

@Bayoumi-dev

Posted

Hey Stefano, It looks good!... You have some accessibility issues you need to fix.

  • Document should have one main landmark, Contain the component in <main>.
<main>
   <div class="main-container">
      //...
   </div>
</main>
  • Page should contain a level-one heading, You should always have one h1 per page of the document.
  • Buttons must have the discernible text, Set the attribute aria-label to describe this button.
<button type="button" class="dice" aria-label="Advice generator"></button>

I hope this is useful to you... Keep coding👍

Marked as helpful

0

@stefanomainetti

Posted

@Bayoumi-dev Hi Ahmed, many thanks for your comments. I really appreciated your attention. Accessibility is actually a new matter to me and I've not had the change to dive into it yet. I will for sure do my homeworks now and implement the principles in the following challenges.

I've fixed the code. The only doubt was on where to put the h1. I've decided to apply to the ADVICE# and mark as paragraph the quoted text trying to make it as "semantic" as possibile. Hope this makes sense.

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