HTML, CSS, JavaScript

Community feedback

• 

  Roksolana•910

  @RoksolanaVeresPosted about 1 year ago

  Hi, Julie! While doing this challenge I had the same problem with Firefox: the app simply did not generate any new quotes. Fortunately, one great person gave me valuable tips on how to overcome the problem, so I'm going to share some of his ideas with you.

  To begin with, the problem seems to be in the very API. For some reason, it takes much more time to produce a new quote in Firefox, than in Chrome and other browsers. To get around this issue you can generate the random advice ids manually by using Math.random().

  Here how it looks like: the total number of advices in the api ranges from 1 to 224, so you can do this by calling: https://api.adviceslip.com/advice/177 , where 177 is the advice (a random number between 1 and 224)

  Then every time you need to fetch a new advice you can do it in this way:

  const ADVICE_BASE_API = "https://api.adviceslip.com/advice";
  
  async function generateAdvice() {
    const id = generateRandomId(); // your function that generates a random id
    const res = await fetch(`${ADVICE_BASE_API}/{$id}`) 
    const advice = await res.json();
    return advice.slip;
  }
  

  Hope that you got the general idea, but if my explanation is not clear enough, feel free to ask some additional questions or have a look at my solution to the same challenge.

  Happy coding 🙂

  UPDATE: While looking through the solutions of other people, I found a simpler way to make this app work in Firefox. You just have to modify the fetch method in this way:

  fetch("https://api.adviceslip.com/advice", {
      method: "GET",
      mode: "cors",
      cache: "no-cache",
    })
  

  Marked as helpful

  0

  ---

  

  Julie_Gz•450

  @Julie-GzPosted about 1 year ago

  @RoksolanaVeres That sounds like a good idea, I'll give it. Thank you for the suggestion🙏

  1

  

  Roksolana•910

  @RoksolanaVeresPosted about 1 year ago

  @Julie-Gz You're welcome 🙂

  0