Advice generator app

Community feedback

• 

  P

  Matthias Nilsson•980

  @RalfiSlaskPosted over 1 year ago

  Hello!

  Here are some things i think you can improve in your project:

  CSS:

  • Would suggest having the height 100% in body, html and main so that your background color covers the whole page.

  • Have spacing between your selectors so it is easier to read.

  JS:

  • Instead of using an XMLHttpRequest try using the newer more modern way using fetch.

  • Object deconstructuring. Instead of having to type out each name like data.slip.advice // data.slip.id you can write as const { advice, id } = data.slip which is the same as creating two variables const advice = data.slip.advice and const id = data.slip.id.

  • Template literals. Instead of writing text.textContent = '"' + advice.slip.advice + '"';. You can use `` and inside these you can type your variables using ${variable}.

      try {
         const response = await fetch("https://api.adviceslip.com/advice")
         const data = await response.json();
         const { advice, id } = data.slip;  
         text.textContent = `"${advice}"`; 
         adviceId.textContent = `ADVICE # ${id}`;
      } catch (error) {
          console.log(error)
      }
  }
  
  fetchData();
  
  button.addEventListener("click", fetchData)
  

  Marked as helpful

  0

  ---

  

  boris2912•270

  @boris2912Posted over 1 year ago

  @RalfiSlask thanks a lot really appriciate your advices!!

  0