From 2472dfb0bc4a8b67577ce939617d665b5829c013 Mon Sep 17 00:00:00 2001
From: shree-77 <shreedhoni7@gmail.com>
Date: Wed, 8 Nov 2023 17:01:42 +0530
Subject: [PATCH] added No results

---
 Food-Recipe/index.html |  83 +--------------------------------
 Food-Recipe/index.js   | 102 +++++++++++++++++++++++++----------------
 2 files changed, 64 insertions(+), 121 deletions(-)

diff --git a/Food-Recipe/index.html b/Food-Recipe/index.html
index 8c69ca3..158dab9 100644
--- a/Food-Recipe/index.html
+++ b/Food-Recipe/index.html
@@ -72,87 +72,8 @@ <h2 class="hero__tagline">Discover, Cook, Enjoy - Your Recipe Hub!</h2>
         <div class="ingredient-searched"></div>
 
         <div class="results__container">
-          <!-- <div class="results__result">
-            <img
-              src="https://picsum.photos/300/200"
-              alt="plate of delicious food"
-              class="result__image"
-            />
-            <div class="results__result--intro">
-              <h3 class="result__name">Meal Name</h3>
-              <button type="button" class="result__get-recipe">
-                Get Recipe
-              </button>
-            </div>
-          </div>
-
-          <div class="modal">
-            <button class="modal__close">&#10006;</button>
-            <h3 class="modal__name">Meal Name</h3>
-            <img
-              src="https://picsum.photos/300/200"
-              alt=""
-              class="modal__image"
-            />
-            <ul class="modal__tags">
-              <li class="modal-tag__text">COUNTRY</li>
-              <li class="modal-tag__text">Difficulty:</li>
-              <li class="modal-tag__rating">
-                <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i
-                ><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i
-                ><i class="fa-solid fa-star"></i>
-              </li>
-            </ul>
-            <div class="modal__info">
-              <div>
-                <h4>Servings:</h4>
-                <p>3</p>
-              </div>
-              <div>
-                <h4>Cook Time</h4>
-                <p>30 minutes</p>
-              </div>
-            </div>
-            <h4>Ingredients:</h4>
-            <p class="modal__ingredients">
-              Coriander chocolate peanut butter dip lavender lemonade blueberry
-              pops red lentil curry hummus falafel bowl mint arugula salad fall
-              coconut milk rich coconut cream.
-            </p>
-
-            <h4>Instructions:</h4>
-            <ol class="modal__instructions">
-              A delicious meal sweet potato Chinese five-spice powder entree
-              tempeh bruschetta delightful blueberry scones red pepper Thai
-              curry alfalfa sprouts coconut pasta apricot red amazon pepper
-              creamiest ginger tofu avocado fig arugula cashew salad cocoa
-              roasted peanuts enchiladas. Salty mediterranean grapefruit fruit
-              smash dark and stormy crispy iceberg lettuce overflowing berries
-              scotch bonnet pepper burritos blueberries fresh banana bread lime
-              crunchy main course green tea lime broccoli frosted gingerbread
-              bites raspberries ultra creamy avocado pesto ghost pepper orange
-              green bowl. Bento box simmer salted mediterranean luxury bowl
-              Bolivian rainbow pepper lingonberry lentils Southern Italian
-              Indian spiced habanero golden sriracha pecans parsley bananas
-              hearts of palm Italian linguine puttanesca almond milk.
-            </ol>
-            <div class="modal__btn-wrapper">
-              <a
-                href="https://notion.so"
-                target="_blank"
-                class="modal__video-link"
-              >
-                Watch Video
-              </a>
-            </div>
-            <details class="modal__nutrition">
-              <summary>Nutrition Information</summary>
-              <ul>
-                <li></li>
-              </ul>
-            </details>
-          </div>
-        </div> -->
+          
+        </div> 
       </section>
     </main>
     <footer>
diff --git a/Food-Recipe/index.js b/Food-Recipe/index.js
index 4fd8e90..5cd014a 100644
--- a/Food-Recipe/index.js
+++ b/Food-Recipe/index.js
@@ -53,6 +53,7 @@ document.addEventListener("DOMContentLoaded", () => {
   if (form && searchInput && nameElement) {
     form.addEventListener("submit", async (event) => {
       event.preventDefault();
+        clearResults();
       const searched = document.createElement("h2");
       searched.textContent = `Your results for ${searchInput.value}`;
       nameElement.innerHTML = "";
@@ -71,35 +72,15 @@ async function executeFetchQueue() {
     if (responseCount >= 2) {
       break;
     }
-     // Create the loading modal if it doesn't exist
-    if (!loadingModal) {
-      loadingModal = document.createElement('div');
-      loadingModal.classList.add('results__result', 'loading-modal');
-      loadingModal.innerHTML = `<div class="lds-dual-ring">
-              <p>Loading...</p>
-            </div>
 
-            <img
-              src= "./assets/loader.gif"
-              alt="plate of delicious food"
-              class="result__image blur-2"
-            />
-            <div class="results__result--intro blur-1">
-              <h3>Recipe Name</h3>
-              <button class="result__get-recipe">View Recipe</button>
-            </div>`;
-      if (body.classList.contains('dark-mode')) {
-        loadingModal.classList.add('dark-mode');
-      }
-    }
- // Append the loading modal to the results section
-    const resultsSection = document.querySelector('.results-section');
-    resultsSection.appendChild(loadingModal);
+    showLoadingModal(); 
 
     const { recipeName: displayName, originalName } = fetchQueue.shift();
     await fetchResponses(displayName, originalName);
     await new Promise((resolve) => setTimeout(resolve, 1000 / RATE_LIMIT));
     responseCount++;
+    
+    hideLoadingModal(); 
   }
 }
 
@@ -118,16 +99,18 @@ async function Autocomplete(recipeName) {
   try {
     const response = await fetch(url, options);
     const result = await response.json();
-    console.log(result);
 
-    fetchQueue.length = 0; 
-    for (const element of result.results) {
-      if (element.display.toLowerCase() !== recipeName.toLowerCase()) {
-        fetchQueue.push({ recipeName: element.display, originalName: recipeName });
+    if (result.results && result.results.length > 0) {
+      fetchQueue.length = 0;
+      for (const element of result.results) {
+        if (element.display.toLowerCase() !== recipeName.toLowerCase()) {
+          fetchQueue.push({ recipeName: element.display, originalName: recipeName });
+        }
       }
+      executeFetchQueue();
+    } else {
+      noResults();
     }
-
-    executeFetchQueue(); // Start processing the fetch queue
   } catch (error) {
     console.error(error);
   }
@@ -153,10 +136,12 @@ async function fetchResponses(recipeName) {
     }
 
     const data = await response.json();
-    console.log(data.results[0]);
-
-    if (Array.isArray(data.results) && data.results.length > 0) {
-      const thumbnail = data.results[0].thumbnail_url;
+    console.log('Number of results : ', data.results.length);
+ 
+    if (Array.isArray(data.results) && data.results.length === 0) {
+      return false;
+      } else {
+        const thumbnail = data.results[0].thumbnail_url;
       const video_url = data.results[0].original_video_url;
       const description = data.results[0].description;
 
@@ -208,16 +193,13 @@ async function fetchResponses(recipeName) {
         }
         return result;
       };
-
-
-
-
       createRecipe(displayName, thumbnail, video_url, description, countryTag, rating, cookTime, yields, ingredientsTag, instructionsTag, nutrition, difficultyTag);
-    } else {
-      console.error("No results found in thumbnail API for:", recipeName);
+      return true;
     }
+    
   } catch (error) {
     console.error(error);
+
   }
 }
 
@@ -274,6 +256,8 @@ function createViewRecipeButton(displayName, img_url, video_url, description, co
 // Function to display "No Results" message
 
 function noResults() {
+  console.log('No results')
+  clearResults(); 
   const recipeContainer = document.querySelector(".results__container");
   const noResult = document.createElement('h2');
   noResult.textContent = 'No result found';
@@ -494,3 +478,41 @@ window.addEventListener('click', (e) => {
     }
   }
 })
+
+//Loading Modal
+
+function showLoadingModal() {
+  // Create and display the loading modal
+  loadingModal = document.createElement('div');
+  loadingModal.classList.add('results__result', 'loading-modal');
+  loadingModal.innerHTML = `<div class="lds-dual-ring">
+              <p>Loading...</p>
+            </div>
+
+            <img
+              src="./assets/loader.gif"
+              alt="plate of delicious food"
+              class="result__image blur-2"
+            />
+            <div class="results__result--intro blur-1">
+              <h3>Recipe Name</h3>
+              <button class="result__get-recipe">View Recipe</button>
+            </div>`;
+  if (body.classList.contains('dark-mode')) {
+    loadingModal.classList.add('dark-mode');
+  }
+
+  // Append the loading modal to the results section
+  const resultsSection = document.querySelector('.results-section');
+  resultsSection.appendChild(loadingModal);
+}
+
+
+//Hiding Modal
+
+function hideLoadingModal() {
+  if (loadingModal) {
+    loadingModal.remove();
+    loadingModal = null;
+  }
+}
\ No newline at end of file