Skip to content
Submitted almost 2 years ago

Advice Generator App using API

Kazer Panol•170
@kazerpanol
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Advice generator app
  • HTML
  • CSS
  • JS
  • API
2junior

Design comparison

SolutionDesign

Community feedback

  • Mahdi Aljaza'iri•250
    @MahdiAljazairiPosted almost 2 years ago

    Hi There! I have some suggestions for you! I hope they will be useful.

    • Try to avoid using heading tags <h1> ... <h6> only to adjust font size. Heading tags give assistive technology information about the hierarchy of the document, e.g. a section with a <h1> heading can contain another section with a <h2> heading and so on.

      To specify font size without giving any special role to text, use CSS.

      **HTML**
<div class="advice-id">ADVICE #117<div>

      **CSS**
.advice-id {
  font-size: 0.8em;
}

    • Turn your contents' wrapping element into <main> and your attribution element into <footer>.

      <body>
  <main class="flex">
    ...
  </main>
  <footer class="attribution">
    ...
  </footer>
</body>

      This way you can tell users of assistive technology which part of the page is important <main>, and which is less important <footer>. Also, the accessibility report will stop yelling at you to put all of your page's content in landmarks 🙂

    • Use an actual <input> or <button> tag to make an "offically" interactive element. Such elements can recieve focus by pressing the Tab key, and are announced by assistive technology to the user to be interacted with.

      <button type="button" class="circle-btn">
  <img class="dice" src="images/icon-dice.svg" alt="dice-image">
</button>

    • You can use <q> tags instead of hardcoded quoting marks. These tags insert appropriate quoting marks independently of how text inside them change. This means you can put them in the HTML and play with text without worrying about adding quote mark each time you change it.

      **HTML**
<p><q>It is easy ... taking action</q></p>

      **Javascript**
function renderAdvice(data){
  const numAdvice = document.querySelector("h4")
  const textAdvice = document.querySelector("p > q")
  numAdvice.innerText = `ADVICE #${data.id}`
  textAdvice.innerText = `${data.advice}` // No need for quotes here
}

    This is it! May this can help. And as they say: Happy Coding!

    Marked as helpful
    0
    Kazer Panol•170
    @kazerpanolPosted almost 2 years ago

    @MahdiAljazairi Thanks for your helpful feedback. I appreciate it.

    0

Please log in to post a comment

Log in with GitHub

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