Advice generator app

Community feedback

• 

  Joanna Skrzypczak•530

  @joaskrPosted almost 2 years ago

  Hi Paul, Good job! Your solution looks great and works without any issues 🎉 If you want to further improve your code you can implement the following things:

  Accessibility

  • You are wrapping the whole content inside a <section class="container">. You should replace it with <main> tag. It is best practice to use HTML landmark elements such as <header> <nav> <main> <footer> because they improve accessibility for users using screen readers.
  • You are not using <h1> element. It is also best practice to have a main header on the page (but only one!). You can change <h5>ADVICE #<span id="advice-id">117</span></h5> to <h1> and another accessibility issue will be resolved 😊
  • You left an empty alt tag for the image - you should always fill it because it makes it accessible for screen readers <img src="./images/pattern-divider-desktop.svg" alt="" class="divide">

  Design

  • You have a small issue with advice number - there are two # before the number (ADVICE ##145). It is because you have one # in your <h5>ADVICE #<span id="advice-id">117</span></h5> element and then you add another # with js adviceId.innerText = #${data.slip.id};. Removing one will solve the issue ✔️

  Code

  • You should remove all console logs if you don't need them anymore. There is one left on 11th line in index.js file

  That's all. Overall, great solution. Let me know if you have any questions.

  Keep coding and good luck with future challenges!

  Marked as helpful

  0