• div.container
  • button.btn
  • p.result(dummy text)

• the main ides is the same, just external data

What is an API?

• https://course-api.com/javascript-store-products

• get store products

• https://course-api.com/javascript-store-single-product?id=rec43w3ipXvP28vog

• get single store product

• https://randomuser.me/api/

• random user

• Dad Jokes

• random joke

• https://https://icanhazdadjoke.com/

• select btn, result
• check if both elements selected
• listen for click events

• create async function
• setup fetch
• set result.textContent = joke

const fetchDadJoke = async () => {
  const response = await fetch(url, {
    headers: {
      Accept: "application/json",
      "User-Agent": "learning app",
    },
  });

  const data = await response.json();
  result.textContent = data.joke;
};

• set result equal to - "Loading..."

• try/catch block
• set result equal to - "There was an error..."

• Fetch - only throws an error if cannot resolve
• Error response still a response
• check for status
• throw new Error("Whoops!")