Skip to main content

Task 12: 🍕 Pizza Finder — Fetch a Random Pizza Recipe Using an API

Start with Thanksgiving​

  • "I am destined for greatness. Every step I take brings me closer to my goals. I embrace challenges, knowing they are stepping stones to success. My mind is focused, my heart is determined, and my actions are aligned with my dreams."

Daily Affirmations for Success

  • ✅ I am capable, confident, and unstoppable.
  • ✅ Success flows to me because I take consistent action.
  • ✅ I attract opportunities that align with my purpose.
  • ✅ My hard work and persistence create abundance.
  • ✅ I am always learning, growing, and evolving.
  • ✅ I believe in my potential and trust my journey.
  • ✅ I turn setbacks into comebacks with resilience.
  • ✅ I am grateful for every success, big and small.

Success Reflection​

"Every effort I made today has planted seeds for my future success. I release any doubts and trust the process. My dreams are possible, and I am getting closer every day. I am grateful, I am strong, and I am ready for more!"

💪 Repeat daily, feel the power, and watch your success unfold!

Task Answer - Video Link​

🔹 If you don’t understand the task, watch the video above for the answer.

Task​

we're going to build a 'Pizza Finder' using a real API! 🍕💻 By the end of this short video, you’ll learn how to:"

✅ Use fetch() to call a public API ✅ Work with JSON data

✅ Display the result in your browser​

** Step 1: Set up the HTML​

This gives us a simple layout with a button and some space to show the pizza info!"

<!DOCTYPE html>
<html>
  <head>
    <title>Pizza Finder</title>
  </head>
  <body>
    <h1>🍕 Random Pizza Recipe</h1>
    <button id="getPizza">Get a Pizza Recipe</button>
    <h2 id="pizzaName"></h2>
    <img id="pizzaImage" width="300" />
    <p id="pizzaInstructions"></p>

    <script src="script.js"></script>
  </body>
</html>

Step 2: JavaScript – Fetch the Pizza Recipe​

When you click the button, it fetches pizza info from the API and shows it on the screen!"

document.getElementById("getPizza").addEventListener("click", getPizza);

function getPizza() {
  fetch("https://www.themealdb.com/api/json/v1/1/search.php?s=pizza")
    .then(response => response.json())
    .then(data => {
      const meal = data.meals[0]; // Pick the first pizza
      document.getElementById("pizzaName").textContent = meal.strMeal;
      document.getElementById("pizzaImage").src = meal.strMealThumb;
      document.getElementById("pizzaInstructions").textContent = meal.strInstructions;
    })
    .catch(error => {
      console.error("Oops! Something went wrong:", error);
    });
}

🔁 Recap: You did it! We learned how to:

✅ Use fetch() for an API ✅ Work with JSON response ✅ Display data in the DOM

Now go share your pizza recipe with a friend—or better, build your own pizza API someday!"