Oct 7, 2024
diff --git a/projects/recipe-book-app/index.html b/projects/recipe-book-app/index.html
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <title>Recipe Book App</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>

    <div class="container">
      <ul id="recipe-list" class="recipe-list">
        <!-- <li class="recipe-item">
          <img
            src="https://spoonacular.com/recipeImages/12345-312x231.jpg"
            alt="Recipe 1"
          />
          <h2>Recipe 1</h2>
          <p>
            <strong>Ingredients:</strong> Ingredient 1, Ingredient 2, Ingredient
            3
          </p>
          <a href="#">View Recipe</a>
        </li>
        <li class="recipe-item">
          <img
            src="https://spoonacular.com/recipeImages/12545-312x231.jpg"
            alt="Recipe 2"
          />
          <h2>Recipe 2</h2>
          <p>
            <strong>Ingredients:</strong> Ingredient 1, Ingredient 2, Ingredient
            3
          </p>
          <a href="#">View Recipe</a>
        </li>
        <li class="recipe-item">
          <img
            src="https://spoonacular.com/recipeImages/12445-312x231.jpg"
            alt="Recipe 3"
          />
          <h2>Recipe 3</h2>
          <p>
            <strong>Ingredients:</strong> Ingredient 1, Ingredient 2, Ingredient
            3
          </p>
          <a href="#">View Recipe</a>
        </li> -->
        <li>Loading recipes...</li>
      </ul>
    </div>

    <script src="index.js"></script>
  </body>
 </html>
diff --git a/projects/recipe-book-app/index.js b/projects/recipe-book-app/index.js
 const API_KEY = "275d58779ccf4e22af03e792e8819fff";
 const API_KEY = "cf4b2745d2b64605bd47a2d231b6dcf7";  // Replace with your valid API key
 const recipeListEl = document.getElementById("recipe-list");

 function displayRecipes(recipes) {
  recipeListEl.innerHTML = "";
  recipeListEl.innerHTML = "";  // Clear any existing content, including "Loading recipes..."
  recipes.forEach((recipe) => {
    const recipeItemEl = document.createElement("li");
    recipeItemEl.classList.add("recipe-item");
    recipeImageEl = document.createElement("img");

    const recipeImageEl = document.createElement("img");
    recipeImageEl.src = recipe.image;
    recipeImageEl.alt ="recipe image";
    recipeImageEl.alt =`${recipe.title} image`;

    recipeTitleEl = document.createElement("h2");
 constrecipeTitleEl = document.createElement("h2");
    recipeTitleEl.innerText = recipe.title;

    recipeIngredientsEl = document.createElement("p");
 constrecipeIngredientsEl = document.createElement("p");
    recipeIngredientsEl.innerHTML = `
        <strong>Ingredients:</strong> ${recipe.extendedIngredients
          .map((ingredient) => ingredient.original)
          .join(", ")}
    `;

    recipeLinkEl = document.createElement("a");
 constrecipeLinkEl = document.createElement("a");
    recipeLinkEl.href = recipe.sourceUrl;
    recipeLinkEl.innerText = "View Recipe";

 }

 async function getRecipes() {
  const response = await fetch(
    `https://api.spoonacular.com/recipes/random?number=10&apiKey=${API_KEY}`
  );

  const data = await response.json();

  return data.recipes;
  try {
    const response = await fetch(
      `https://api.spoonacular.com/recipes/random?number=10&apiKey=${API_KEY}`
    );

    if (!response.ok) {
      throw new Error("Failed to fetch recipes");
    }

    const data = await response.json();
    return data.recipes;
  } catch (error) {
    console.error(error);
    recipeListEl.innerHTML = `<li>Error fetching recipes. Please try again later.</li>`;
  }
 }

 async function init() {
  const recipes = await getRecipes();
  displayRecipes(recipes);
  if (recipes) {
    displayRecipes(recipes);
  }
 }

 init();
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,7 +4,7 @@
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<title>Recipe Book App</title>
		<link rel="stylesheet" href="style.css" />
		</head>
		<body>
Expand All		@@ -14,44 +14,10 @@ <h1>Recipe Book App</h1>

		<div class="container">
		<ul id="recipe-list" class="recipe-list">
		<!-- <li class="recipe-item">
		<img
		src="https://spoonacular.com/recipeImages/12345-312x231.jpg"
		alt="Recipe 1"
		/>
		<h2>Recipe 1</h2>
		<p>
		<strong>Ingredients:</strong> Ingredient 1, Ingredient 2, Ingredient
		3
		</p>
		<a href="#">View Recipe</a>
		</li>
		<li class="recipe-item">
		<img
		src="https://spoonacular.com/recipeImages/12545-312x231.jpg"
		alt="Recipe 2"
		/>
		<h2>Recipe 2</h2>
		<p>
		<strong>Ingredients:</strong> Ingredient 1, Ingredient 2, Ingredient
		3
		</p>
		<a href="#">View Recipe</a>
		</li>
		<li class="recipe-item">
		<img
		src="https://spoonacular.com/recipeImages/12445-312x231.jpg"
		alt="Recipe 3"
		/>
		<h2>Recipe 3</h2>
		<p>
		<strong>Ingredients:</strong> Ingredient 1, Ingredient 2, Ingredient
		3
		</p>
		<a href="#">View Recipe</a>
		</li> -->
		<li>Loading recipes...</li>
		</ul>
		</div>

		<script src="index.js"></script>
		</body>
		</html>
Original file line number	Diff line number	Diff line change
		@@ -1,26 +1,27 @@
		const API_KEY = "275d58779ccf4e22af03e792e8819fff";
		const API_KEY = "cf4b2745d2b64605bd47a2d231b6dcf7"; // Replace with your valid API key
		const recipeListEl = document.getElementById("recipe-list");

		function displayRecipes(recipes) {
		recipeListEl.innerHTML = "";
		recipeListEl.innerHTML = ""; // Clear any existing content, including "Loading recipes..."
		recipes.forEach((recipe) => {
		const recipeItemEl = document.createElement("li");
		recipeItemEl.classList.add("recipe-item");
		recipeImageEl = document.createElement("img");

		const recipeImageEl = document.createElement("img");
		recipeImageEl.src = recipe.image;
		recipeImageEl.alt ="recipe image";
		recipeImageEl.alt =`${recipe.title} image`;

		recipeTitleEl = document.createElement("h2");
		constrecipeTitleEl = document.createElement("h2");
		recipeTitleEl.innerText = recipe.title;

		recipeIngredientsEl = document.createElement("p");
		constrecipeIngredientsEl = document.createElement("p");
		recipeIngredientsEl.innerHTML = `
		<strong>Ingredients:</strong> ${recipe.extendedIngredients
		.map((ingredient) => ingredient.original)
		.join(", ")}
		`;

		recipeLinkEl = document.createElement("a");
		constrecipeLinkEl = document.createElement("a");
		recipeLinkEl.href = recipe.sourceUrl;
		recipeLinkEl.innerText = "View Recipe";

Expand All		@@ -33,18 +34,28 @@ function displayRecipes(recipes) {
		}

		async function getRecipes() {
		const response = await fetch(
		`https://api.spoonacular.com/recipes/random?number=10&apiKey=${API_KEY}`
		);

		const data = await response.json();

		return data.recipes;
		try {
		const response = await fetch(
		`https://api.spoonacular.com/recipes/random?number=10&apiKey=${API_KEY}`
		);

		if (!response.ok) {
		throw new Error("Failed to fetch recipes");
		}

		const data = await response.json();
		return data.recipes;
		} catch (error) {
		console.error(error);
		recipeListEl.innerHTML = `<li>Error fetching recipes. Please try again later.</li>`;
		}
		}

		async function init() {
		const recipes = await getRecipes();
		displayRecipes(recipes);
		if (recipes) {
		displayRecipes(recipes);
		}
		}

		init();