advice generator app by Romain Cordier (French Student)

Community feedback

• 

  foxynoxy•470

  @purplehippo911Posted about 2 years ago

  Hi @Romainub87! Congratulations on finishing your challenge.

  There are some things that you could fix on your solution and I’ll try to help you get started on it:

  1# Using landmarks for your HTML content

  Landmarks in HTML, also called accessibility landmarks, are HTML elements used to help users of assistive technology like screen readers quickly and accurately navigate a web page. Landmarks are usually specific to a particular purpose, like navigation, search, or main content. They are used to break up the page into logical sections and make it easier for screen readers to interpret the page structure. Using landmarks in HTML is important for making web pages accessible to people with disabilities, as it allows screen readers to quickly identify and navigate to the different sections of a page, as well as to any form controls or links within each section. Simplifying landmarks in HTML can also help optimize the performance of a website, as fewer landmarks mean less code to parse and render. For example: Instead of using this:

  
  <div class="content">
        <h1 class="id">Advice #<span id="idAdvice"></span></h1>
  
        <div class="comment">
          <p id="advice"></p>
        </div>
        <div class="separation">
          <img src="./images/pattern-divider-desktop.svg" alt="sep" class="separator">
        </div>
        <div class="diceback" id="dice">
          <img src="./images/icon-dice.svg" width="20" alt="dice" />
        </div>
      </div>
  
      <p class="dev">
        Coded by
        <a href="https://romainub87.github.io/Romain" class="lien-dev"
          >Romain Cordier</a
        >
      </p>
      <p class="challenge">
        Challenge by
        <a
          class="lien-frontend-mentor"
          href="https://www.frontendmentor.io?ref=challenge"
          target="_blank"
          >Frontend Mentor</a
        >
      </p>
  

  Use this:

  
  <main class="content">
        <h1 class="id">Advice #<span id="idAdvice"></span></h1>
  
        <div class="comment">
          <p id="advice"></p>
        </div>
        <div class="separation">
          <img src="./images/pattern-divider-desktop.svg" alt="sep" class="separator">
        </div>
        <div class="diceback" id="dice">
          <img src="./images/icon-dice.svg" width="20" alt="dice" />
        </div>
      </main>
  
  <footer>
      <p class="dev">
        Coded by
        <a href="https://romainub87.github.io/Romain" class="lien-dev"
          >Romain Cordier</a
        >
      </p>
      <p class="challenge">
        Challenge by
        <a
          class="lien-frontend-mentor"
          href="https://www.frontendmentor.io?ref=challenge"
          target="_blank"
          >Frontend Mentor</a
        >
      </p>
  
  </footer>
  

  Check out this article for more info: article1, and another one here: article2

  2# Fixing your documentation_

  Documentation is an essential part of any programming project. It allows developers to understand the design and intention of the code, as well as providing clear instructions on how to use and modify the code. Documentation also helps when debugging and troubleshooting problems, as developers can see what the code was intended to do and can quickly identify any potential issues. Finally, it helps to ensure the code is maintainable and can be easily updated and enhanced by other developers.

  So, I would advise you to delete the default README.md, because it’s only meant for you, when making the project. Use README-template.md for documenting your process and rename it to ´README.md`. You would also need to learn a bit about markdown. I recommend this simple crash course for that:mini-markdown-course

  3# Using string interpolation String interpolation allows you to write code more efficiently, as it eliminates the need to concatenate multiple strings together. It also allows you to interpolate variables and expressions into strings, which makes the code more readable. It also makes code easier to maintain, as you can easily update the variables and expressions used in the string interpolation. Placeholders are represented by a dollar sign ($) followed by a set of curly braces ({}). The placeholders are replaced by the values of variables or expressions.

  For example: Instead of this:

   advice.innerText = '" ' + data.slip.advice + ' "';
  

  Use this:

   advice.innerText = ´${data.slip.advice}´;
  

  In real life examples where you have to concatonate 2 or more variables, then string interpolation will help you a lot. Check out this webpage for more info: helpfulResource

  Other than that good job! Continue learning and growing at your own pace. Happy coding!⌨️

  Marked as helpful

  1

  ---

  

  Romain•200

  @Romainub87Posted about 2 years ago

  @purplehippo911 Thank you for your feedback bro. That help me a lot ! I'll fix all the problems you found.

  0