From 110731b193cd62cc426945f64cb95245f0f6d1e5 Mon Sep 17 00:00:00 2001 From: Umesh Artani Date: Tue, 8 Oct 2024 01:24:49 +0530 Subject: [PATCH] fix: fixed the issue that was occuring while clicking the view recipe button also fixed recipe rendering issue in the html file --- projects/recipe-book-app/index.html | 40 +++------------------------- projects/recipe-book-app/index.js | 41 ++++++++++++++++++----------- 2 files changed, 29 insertions(+), 52 deletions(-) diff --git a/projects/recipe-book-app/index.html b/projects/recipe-book-app/index.html index b93360d..328bf05 100644 --- a/projects/recipe-book-app/index.html +++ b/projects/recipe-book-app/index.html @@ -4,7 +4,7 @@ - Document + Recipe Book App @@ -14,44 +14,10 @@

Recipe Book App

Loading recipes...

+ diff --git a/projects/recipe-book-app/index.js b/projects/recipe-book-app/index.js index d35b3b8..3dc82df 100644 --- a/projects/recipe-book-app/index.js +++ b/projects/recipe-book-app/index.js @@ -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"); + const recipeTitleEl = document.createElement("h2"); recipeTitleEl.innerText = recipe.title; - recipeIngredientsEl = document.createElement("p"); + const recipeIngredientsEl = document.createElement("p"); recipeIngredientsEl.innerHTML = ` Ingredients: ${recipe.extendedIngredients .map((ingredient) => ingredient.original) .join(", ")} `; - recipeLinkEl = document.createElement("a"); + const recipeLinkEl = document.createElement("a"); recipeLinkEl.href = recipe.sourceUrl; recipeLinkEl.innerText = "View Recipe"; @@ -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 = `

Error fetching recipes. Please try again later.

`; + } } async function init() { const recipes = await getRecipes(); - displayRecipes(recipes); + if (recipes) { + displayRecipes(recipes); + } } init(); pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: