Mobile First - Advice API with loading screen

Community feedback

• 

  Ahmed Zougari•270

  @zougari47Posted over 2 years ago

  Hi there👋

  if you notice the quote don't change while clicking the button

  you need to clear the cache every time you fetch the data fetch(URL, { cache: 'no-cache' }

  try this

  const getAdvice = () => {
    loadScreen.classList.add("show");
    fetch("https://api.adviceslip.com/advice", {
    cache: 'no-cache'
  }).then((response) => {
      return response
        .json()
        .then((data) => {
          adviceId.innerHTML = data.slip.id;
          adviceText.innerHTML = data.slip.advice;
          loadScreen.classList.remove("show");
        })
        .catch((error) => {
          console.log(Error(error));
          loadScreen.classList.remove("show");
        });
    });
  };
  

  Marked as helpful

  1

  ---

  

  Yan Baetas Oliveira•190

  @YanBaetasPosted over 2 years ago

  @zougari47 Hello, thank you for your feedback. I just implemented the no-cache as you instructed. Without it, when clicking the button too fast, the quote would not change.

  I added an async await to the code as well.

  Thank you!

  1

  

  Ahmed Zougari•270

  @zougari47Posted over 2 years ago

  @YanBaetas I see now the button is working, congratulation 🎉.

  0