Advice Generator using HTML/CSS, Sass and JavaScript!

Community feedback

• 

  Md5 dalton•1,430

  @md5daltonPosted about 2 years ago

  Hi Kostya. Good job on finishing the challenge..

  In regard to the box shadow, set the offset-y to 0px so that there's no vertical displacement of the shadow. I'll leave a link to MDN web docs if you want to read more about it: Box Shadow. Here is how it works:

  /* offset-x | offset-y | blur-radius | color */
  box-shadow: 0px 0px 15px var(--neon-green);
  

  When you fetch an advice from the API, it comes with a number so you don't need to create a counter for that. Instead extract the id and advice from the response, I'll demonstrate below:

   getAdvice("https://api.adviceslip.com/advice").then(({ slip })=> {
          const { id, advice } = slip
  
          const adviceField = document.querySelector(".advice")
          const idField = document.querySelector("span.number")
  
          adviceField.innerText = advice
          idField.innerText = id
  
      })
  

  Finally, this is something one of Frontend Mentor community members pointed out to me when I submitted the solution for this challenge: firefox caches the response so even if a user clicks on the dice, it will not fetch a new advice. To fix this, add no cache option to your fetch to ensure that your app works as intended across all browsers:

  fetch(url, {cache: "no-cache"})
  

  I hope that helps a bit👌

  Marked as helpful

  1