Skip to content

Commit

Permalink
added No results
Browse files Browse the repository at this point in the history
  • Loading branch information
@Shree-77
Shree-77 committed Nov 8, 2023
1 parent dad09f3 commit 2472dfb
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 121 deletions.
83 changes: 2 additions & 81 deletions Food-Recipe/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
102 changes: 62 additions & 40 deletions Food-Recipe/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = "";
Expand All @@ -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();
}
}

Expand All @@ -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);
}
Expand All @@ -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;

Expand Down Expand Up @@ -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);

}
}

Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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;
}
}

0 comments on commit 2472dfb

Please sign in to comment.