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

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

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}`;
});