HTML , CSS , Vanilla JavaScript and API calling ( using Fetch API )

Community feedback

• 

  Nneoma Njoku•1,210

  @SatellitePeace

  Posted almost 3 years ago

  Hello @rachit0706

  I noticed that your button does not work and you can only get new advice when you reload the page

  • The purpose of the challenge is for the app to fetch new advice on click which means that button is meant to have an event listener that will call a function to produce new advise on click like in the example below

  btn.addEventListener("click", function () {
    advice();
  });
  

  • I also noticed that you used Math.random() which is not very necessary because the API in question is designed in such a way that it generates random advice each time you make a request

  • Also shortening the length of the advice kind of defeats the purpose except if you were using it as a way to learn something new

  • so a better solution might be to get the advice url to fetch it with any method you like in your case you used async/await, then extract the id and advise from the API and attach it to your main content innerHTML like so

  async function advice() {
    const response = await fetch(URL);
    const data = await response.json();
    const { id, advice } = data.slip;
    adviceText.innerHTML = `<h1 class="advice__heading">Advice # ${id}</h1>
          <p class="advice__text">
        " ${advice} "
          </p>`;
  }
  

  advice();

  • make sure you call this advice(); function inside your button event listener to make sure that each time the button is clicked new advice is fetched

  • In your html your dice img should be enclosed in a link tag

  I HOPE THIS HELPS

  20

  Marked as helpful
• 

  Absorberend•390

  @Absorberend

  Posted almost 3 years ago

  Hey bro, looking good!

  I noticed that the button didn't work, you can add it with the code below if you like. I noticed you'll run into an error eventually with this code. I think it's because some advice statements are actually > 95 characters long and it gives an error. I'm not 100% on that.

  const  diceBtn = document.querySelector(".dice-img");
  
  diceBtn.addEventListener("click", async function() {
  
      let adviceData = await generateAdvice();
  
      theAdvice.textContent = `"${adviceData.advice}"`;
      adviceNum.textContent = `Advice #${adviceData.id}`;
  });
  

  10

  Marked as helpful