Advice Generator

Community feedback

• 

  Fazza Razaq Amiarso•2,340

  @fazzaamiarsoPosted about 2 years ago

  Hi Prabu! Great work overall!

  You can make your code more robust implementing errror handling on fetch. Here is my implementation.

  async function getData() {
    const res = await fetch('https://api.adviceslip.com/advice');
    if(!res.ok) throw Error("There is something wrong!"); //throw error if fetch failed
    return await res.json();
  }
  
  const adviceCard = document.querySelector("main");
  
  const udpdateDOM = (slip) =>{ 
    adviceCard.querySelector("span").innerText = `ADVICE #${slip.id}`;
    adviceCard.querySelector("h1").innerText = `"${slip.advice}"`;
  }
  
  async function setAdvice() {
  //catch the error down here
    try {
      const { slip } = await getData();
      udpdateDOM(slip);
    }catch (err) {
      console.error(err);
    } 
  }
  

  Marked as helpful

  1
• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Prabu, glad you had fun with this challenge (I did as well), and I think you did well in putting it togoether 🙂

  One small issue right now is, I'm viewing it on Firefox and I'm unable to load the next advice, which is a commonly seen issue due to caching. If you have Firefox you can also check it out yourself. What you can do is add a header object in fetch with a line for cache, like this:

  const res = await fetch("https://api.adviceslip.com/advice",  { cache: 'no-cache' });
  

  You can also try to add some error handling to your getData() function!

  Marked as helpful

  1