From 1b8ba15e22e3cf4a29079c365dedf93d7eb5e23e Mon Sep 17 00:00:00 2001 From: shree-77 Date: Sat, 28 Oct 2023 17:41:23 +0530 Subject: [PATCH 1/5] Clean code --- Food-Recipe/index.js | 368 +++++++++++++++++++++++-------------------- 1 file changed, 193 insertions(+), 175 deletions(-) diff --git a/Food-Recipe/index.js b/Food-Recipe/index.js index 8785a75..16a66c1 100644 --- a/Food-Recipe/index.js +++ b/Food-Recipe/index.js @@ -4,21 +4,21 @@ document.addEventListener("DOMContentLoaded", () => { const form = document.querySelector("form"); const searchInput = document.querySelector(".search__input"); const nameElement = document.querySelector(".ingredient-searched"); - - if (form && searchInput) { - form.addEventListener("submit", (event) => { + + if (form && searchInput && nameElement) { + form.addEventListener("submit", async (event) => { event.preventDefault(); const searched = document.createElement("h2"); searched.textContent = `Your results for ${searchInput.value}`; - nameElement.innerHTML = " "; + nameElement.innerHTML = ""; nameElement.appendChild(searched); clearResults(); - responseCount=0; - Autocomplete(searchInput.value); + responseCount = 0; + await Autocomplete(searchInput.value); }); } else { - console.error("The form or search input element is not found in the DOM."); + console.error("The form, search input, or name element is not found in the DOM."); } }); @@ -30,7 +30,7 @@ const fetchQueue = []; // Queue to manage fetch requests async function executeFetchQueue() { while (fetchQueue.length > 0) { - if(responseCount>=2){ + if (responseCount >= 1) { break; } const { recipeName, originalName } = fetchQueue.shift(); @@ -39,21 +39,16 @@ async function executeFetchQueue() { responseCount++; } } + // Fetching AutoComplete the User input async function Autocomplete(recipeName) { - // //by Andrei : ot make it easy to add elements and check styling. Will require commenting (overriding) out actual APi functionality. DO NOT DELETE - // if (localStorage['resultForLS']) { - // fetchThumbnailVideoDescription('chicken breast') - // } - // //END - const url = `https://tasty.p.rapidapi.com/recipes/auto-complete?prefix=${recipeName}`; const options = { method: "GET", headers: { "X-RapidAPI-Key": API_KEY, - "X-RapidAPI-Host": "tasty.p.rapidapi.com" - } + "X-RapidAPI-Host": "tasty.p.rapidapi.com", + }, }; try { @@ -74,8 +69,7 @@ async function Autocomplete(recipeName) { } } -//Fetching the Thumbnail from API - +// Fetching the Thumbnail from API async function fetchThumbnailVideoDescription(recipeName) { try { const response = await fetch( @@ -84,8 +78,8 @@ async function fetchThumbnailVideoDescription(recipeName) { method: "GET", headers: { "X-RapidAPI-Key": API_KEY, - "X-RapidAPI-Host": "tasty.p.rapidapi.com" - } + "X-RapidAPI-Host": "tasty.p.rapidapi.com", + }, } ); @@ -94,49 +88,50 @@ async function fetchThumbnailVideoDescription(recipeName) { } const data = await response.json(); - console.log(data.results[0]) + console.log(data.results[0]); + if (Array.isArray(data.results) && data.results.length > 0) { const thumbnail = data.results[0].thumbnail_url; const video_url = data.results[0].original_video_url; const description = data.results[0].description; + const countryTag = () => { - let result = '' + let result = ""; data.results[0]?.tags.filter((entry) => { - if (entry.root_tag_type === 'cuisine' && entry.display_name !== 'Cuisine') - result += `${entry.display_name} ` + if (entry.root_tag_type === "cuisine" && entry.display_name !== "Cuisine") + result += `${entry.display_name} `; }); - return result - } - const rating = Math.ceil(data.results[0].user_ratings.score * 5) - const yields = data.results[0].yields - const cookTime = data.results[0]?.total_time_tier?.display_tier - const instructionsTag = data.results[0]?.instructions + return result; + }; + + const rating = Math.ceil(data.results[0].user_ratings.score * 5); + const yields = data.results[0].yields; + const cookTime = data.results[0]?.total_time_tier?.display_tier; + const instructionsTag = data.results[0]?.instructions; + const nutrition = () => { - const obj = data.results[0]?.nutrition - console.log(obj) - let temp = '' - let result = '' - if (Object.keys(obj).length > 0) { + const obj = data.results[0]?.nutrition; + let result = ""; + if (obj) { for (const key in obj) { - if (obj.hasOwnProperty(key) && key !== 'updated_at') { - temp += `${key}: ${obj[key]}, `; + if (obj.hasOwnProperty(key) && key !== "updated_at") { + result += `${key}: ${obj[key]}, `; } } - temp.slice(0, -2).split(',').forEach(item => { - result += `
  • ${item}
    • ` - }) + result = result.slice(0, -2).split(',').map(item => `
  • ${item}
    • `).join(""); } - return result - } + return result; + }; + const difficultyTag = () => { const master = data.results[0]?.tags; const filteredDifficultyTags = master.filter((entry) => { return ( - entry.root_tag_type === 'difficulty' && - (entry.display_name === 'Easy' || - entry.display_name === 'Medium' || - entry.display_name === 'Difficult' || - entry.display_name === 'Hard') + entry.root_tag_type === "difficulty" && + (entry.display_name === "Easy" || + entry.display_name === "Medium" || + entry.display_name === "Difficult" || + entry.display_name === "Hard") ); }); const result = filteredDifficultyTags.map((entry) => entry.display_name); @@ -144,26 +139,13 @@ async function fetchThumbnailVideoDescription(recipeName) { }; createRecipe(recipeName, thumbnail, video_url, description, countryTag, rating, cookTime, yields, instructionsTag, nutrition, difficultyTag); - - - // const resultForLS = { //can comment out once LS is set - // 'recipeName': recipeName, - // 'thumbnail': thumbnail, - // 'video_url': video_url, - // 'description': description, - // 'country': countryTag, - // 'rating': rating, - // 'yields': yields, - // 'cookTime': cookTime - // } - // localStorage.setItem('resultForLS', JSON.stringify(resultForLS)) - } else { console.error("No results found in thumbnail API for:", recipeName); } } catch (error) { console.error(error); } +} // // by Andrei : to make it easy to add elements and check styling. Will require commenting (overriding) out actual API functionality. // // by Andrei: set LS for faster display of search result (mock result will aways display 'chicken') DO NOT DELETE @@ -178,7 +160,7 @@ async function fetchThumbnailVideoDescription(recipeName) { // console.log(dataMea.results[0].yields) // //END -} + //Creating the dynamic receipe content box @@ -220,151 +202,199 @@ function NoResults() { recipeContainer.appendChild(NoResult); } -function Capitalize(name) { - result = '' - for (word of name.split(' ')) { - result += word[0].toUpperCase() + word.slice(1) + ' ' - } - return result -} - // Function for view Recipe button + function addDialog(name, url, video_url, description, countryTag, rating, cookTime, yields, instructionsTag, nutrition, difficultyTag) { + const modal = createModal(); + const close = createCloseButton(); + const mealName = createMealName(name); + const mealImage = createMealImage(url); + const list = createTagList(countryTag, difficultyTag); + const info = createInfoSection(yields, cookTime); + const ingredientsText = createIngredients(description); + const instructionsText = createInstructions(instructionsTag); + const linkContainer = createVideoLink(video_url); + const nutritionDetails = createNutritionDetails(nutrition); + modal.append(close, mealName, mealImage, list, info, ingredientsText, instructionsText, linkContainer, nutritionDetails); + document.querySelector('.results-section').appendChild(modal); + modal.classList.add('modal-active'); + + close.addEventListener('click', () => closeModal(modal)); + document.body.addEventListener('keydown', (e) => handleKeyPress(e, modal)); + + colorStars(rating); +} + +function createModal() { const modal = document.createElement('div'); modal.classList.add('modal'); + return modal; +} +function createCloseButton() { const close = document.createElement('button'); close.classList.add('modal__close'); close.innerHTML = '✖'; + return close; +} + +function createMealName(name) { const mealName = document.createElement('h3'); mealName.classList.add('modal__name'); mealName.textContent = Capitalize(name); + return mealName; +} +function createMealImage(url) { const mealImage = document.createElement('img'); mealImage.src = url; mealImage.alt = 'Meal Image'; mealImage.classList.add('modal__image'); + return mealImage; +} - const list = document.createElement('ul') - list.classList.add('modal__tags') - - const country = document.createElement('li') - country.textContent = countryTag() +function createTagList(countryTag, difficultyTag) { + const list = document.createElement('ul'); + list.classList.add('modal__tags'); + + const country = createTagItem(countryTag()); + const difficulty = createTagItem(`Difficulty: ${difficultyTag()}`); + const stars = document.createElement('li'); + stars.classList.add('modal-tag__rating'); + stars.innerHTML = ''; + list.append(country, difficulty, stars); + return list; +} - const difficulty = document.createElement('li') - difficulty.textContent += `Difficulty: ${difficultyTag()}` +function createTagItem(text) { + const item = document.createElement('li'); + item.textContent = text; + return item; +} - const stars = document.createElement('li') - stars.classList.add('modal-tag__rating') - stars.innerHTML = '' - list.append(country, difficulty, stars) +function createInfoSection(yields, cookTime) { + const info = document.createElement('div'); + info.classList.add('modal__info'); + const servings = createSubheading(yields); + const timeInfo = createSubheading('Cooking Time:', cookTime); + + info.appendChild(servings[0]); + info.appendChild(timeInfo[0]); + info.appendChild(timeInfo[1]); - const info = document.createElement('div') - info.classList.add('modal__info') + return info; +} +function createSubheading(title, text) { + const heading = document.createElement('h4'); + heading.textContent = title; - const servings = document.createElement('h4') - servings.textContent = yields + if (text) { + const content = document.createElement('p'); + content.textContent = text; + return [heading, content]; + } - const timeInfo = document.createElement('div') - const timeTitle = document.createElement('h4') - timeTitle.textContent = 'Cooking Time: ' - const timeNumber = document.createElement('p') - timeNumber.textContent = cookTime + return [heading]; +} - timeInfo.append(timeTitle, timeNumber) - info.append(servings, timeInfo) +function createIngredients(description) { + const ingredientsContainer = document.createElement('div'); + const ingredientsTitle = document.createElement('h4'); + ingredientsTitle.textContent = 'Ingredients'; - const ingredientsTitle = document.createElement('h4') - ingredientsTitle.textContent = 'Ingredients: ' const ingredientsText = document.createElement('p'); ingredientsText.classList.add('modal__ingredients'); - ingredientsText.textContent = 'Coriander chocolate peanut butter dip lavender lemonade blueberry pops red lentil curry hummus falafel bowl mint arugula salad fall coconut milk rich coconut cream.'; + ingredientsText.textContent = description; + ingredientsContainer.appendChild(ingredientsTitle); + ingredientsContainer.appendChild(ingredientsText); + return ingredientsContainer; +} - const instructionsTitle = document.createElement('h4') - instructionsTitle.textContent = 'Instructions: ' - const instructionsText = document.createElement('ol'); - instructionsText.classList.add('modal__instructions'); - instructionsText.innerHTML = getInstructions(instructionsTag); - function getInstructions(data) { - result = '' - for (let i = 0; i < data.length; i++) { - result += ` -
  • - ${data[i].display_text} -
    • - ` - } - return result - } +function createInstructions(instructionsTag) { + const instructions = document.createElement('ul'); + instructions.classList.add('modal__instructions'); + const subheading = document.createElement('h4'); + subheading.textContent = 'Instructions:'; + instructions.appendChild(subheading); + instructionsTag.forEach((instruction) => { + const listItem = document.createElement('li'); + listItem.textContent = instruction.display_text; + instructions.appendChild(listItem); + }); - const linkContainer = document.createElement('div') - linkContainer.classList.add('modal__btn-wrapper') + return instructions; +} + + +function createVideoLink(video_url) { + const linkContainer = document.createElement('div'); + linkContainer.classList.add('modal__btn-wrapper'); const video_link = document.createElement('a'); video_link.href = video_url; - video_link.target = "_blank"; + video_link.target = '_blank'; video_link.textContent = 'Watch video'; video_link.classList.add('modal__video-link'); - linkContainer.append(video_link) - - const details = document.createElement('details') - details.classList.add('modal__nutrition') - const summary = document.createElement('summary') - summary.textContent = 'Nutrition Information' - const nutritionList = document.createElement('ul') - - nutritionList.innerHTML = nutrition() - - details.append(summary, nutritionList) - - - //Need to work on other things to display. + linkContainer.appendChild(video_link); + return linkContainer; +} - modal.append(close, mealName, mealImage); - modal.append(list, info) - modal.append(ingredientsTitle, ingredientsText); - modal.append(instructionsTitle, instructionsText); - modal.append(linkContainer, details); +function createNutritionDetails(nutrition) { + const details = document.createElement('details'); + details.classList.add('modal__nutrition'); + const summary = document.createElement('summary'); + summary.textContent = 'Nutrition Information'; + const nutritionList = document.createElement('ul'); + nutritionList.innerHTML = nutrition(); + details.append(summary, nutritionList); + return details; +} +function closeModal(modal) { + const resultsSection = document.querySelector('.results-section'); + if (resultsSection) { + resultsSection.removeChild(modal); + } +} - document.querySelector('.results-section').appendChild(modal); - // modal.style.display = 'block'; - modal.classList.add('modal-active'); +function handleKeyPress(event, modal) { + if (event.key === 'Escape') { + const resultsSection = document.querySelector('.results-section'); + if (resultsSection && resultsSection.contains(modal)) { + resultsSection.removeChild(modal); + } + } +} - close.addEventListener('click', function () { - document.querySelector('.results-section').removeChild(modal); - }); - //by Andrei: to properly dispose of the dialog element on Escape key press - //works, but throws an exception - document.body.addEventListener('keydown', (e) => { - if (e.key === 'Escape') { - try { - const resultsSection = document.querySelector('.results-section'); - if (resultsSection.contains(modal)) { - resultsSection.removeChild(modal); - } - } catch (error) { - console.error("Caught an exception:", error); - } +function colorStars(rating) { + for (let i = 1; i <= 5; i++) { + const star = document.querySelector(`.fa-star:nth-child(${i})`); + if (i <= rating) { + star.style.color = 'rgb(255, 196, 0)'; } - }); - colorStars(rating) + } } +function Capitalize(text) { + result = '' + for (word of text.split(' ')) { + result += word[0].toUpperCase() + word.slice(1) + ' ' + } + return result; +} -// Function to clear existing results function clearResults() { const recipeContainer = document.querySelector(".results__container"); @@ -373,26 +403,14 @@ function clearResults() { } } -function colorStars(score) { - for (let i = 1; i <= 5; i++) { - const star = document.querySelector(`.fa-star:nth-child(${i})`); - if (i <= score) { - star.style.color = 'rgb(255, 196, 0)'; - } - } - console.log('the modal should display:', score, 'stars') -} - - - -//by Andrei : static modal functionality +// //by Andrei : static modal functionality -//by Andrei : to see the styling changes we make to the modal -const modal = document.querySelector('.modal') -const openModal = document.querySelector('.result__get-recipe') -const closeModal = document.querySelector('.modal__close') -// closeModal.addEventListener('click', () => modal.style.display = 'none') -// openModal.addEventListener('click', () => modal.style.display = 'block') -closeModal.addEventListener('click', () => modal.classList.remove('modal-active')) -openModal.addEventListener('click', () => modal.classList.add('modal-active')) +// //by Andrei : to see the styling changes we make to the modal +// const modal = document.querySelector('.modal') +// const openModal = document.querySelector('.result__get-recipe') +// const closeModal = document.querySelector('.modal__close') +// // closeModal.addEventListener('click', () => modal.style.display = 'none') +// // openModal.addEventListener('click', () => modal.style.display = 'block') +// closeModal.addEventListener('click', () => modal.classList.remove('modal-active')) +// openModal.addEventListener('click', () => modal.classList.add('modal-active')) From cf757a6b6ab89b6321ef89eeb9f6bdcf11c8ed31 Mon Sep 17 00:00:00 2001 From: shree-77 Date: Sat, 28 Oct 2023 18:57:48 +0530 Subject: [PATCH 2/5] Code readability --- Food-Recipe/index.js | 104 +++++++++++++++++-------------------------- 1 file changed, 42 insertions(+), 62 deletions(-) diff --git a/Food-Recipe/index.js b/Food-Recipe/index.js index 16a66c1..99240d7 100644 --- a/Food-Recipe/index.js +++ b/Food-Recipe/index.js @@ -1,11 +1,17 @@ -//User Input +// Constants and Global Variables + +const API_KEY = "c0ceab46e0msh0eadabf65682e61p12dd5ejsnbcab6b2c9a32"; +const RATE_LIMIT = 5; // Requests per second let responseCount = 0; +const fetchQueue = []; + +//Event Listener + document.addEventListener("DOMContentLoaded", () => { const form = document.querySelector("form"); const searchInput = document.querySelector(".search__input"); const nameElement = document.querySelector(".ingredient-searched"); - if (form && searchInput && nameElement) { form.addEventListener("submit", async (event) => { event.preventDefault(); @@ -22,25 +28,20 @@ document.addEventListener("DOMContentLoaded", () => { } }); -const API_KEY = "c0ceab46e0msh0eadabf65682e61p12dd5ejsnbcab6b2c9a32"; - -const RATE_LIMIT = 5; // Requests per second - -const fetchQueue = []; // Queue to manage fetch requests - async function executeFetchQueue() { while (fetchQueue.length > 0) { if (responseCount >= 1) { break; } const { recipeName, originalName } = fetchQueue.shift(); - await fetchThumbnailVideoDescription(recipeName, originalName); + await fetchResponses(recipeName, originalName); await new Promise((resolve) => setTimeout(resolve, 1000 / RATE_LIMIT)); responseCount++; } } // Fetching AutoComplete the User input + async function Autocomplete(recipeName) { const url = `https://tasty.p.rapidapi.com/recipes/auto-complete?prefix=${recipeName}`; const options = { @@ -69,8 +70,9 @@ async function Autocomplete(recipeName) { } } -// Fetching the Thumbnail from API -async function fetchThumbnailVideoDescription(recipeName) { +// Fetching details from API + +async function fetchResponses(recipeName) { try { const response = await fetch( `https://tasty.p.rapidapi.com/recipes/list?from=0&size=1&q=${recipeName}`, @@ -147,42 +149,22 @@ async function fetchThumbnailVideoDescription(recipeName) { } } - // // by Andrei : to make it easy to add elements and check styling. Will require commenting (overriding) out actual API functionality. - // // by Andrei: set LS for faster display of search result (mock result will aways display 'chicken') DO NOT DELETE - // if (!localStorage['resultForLS']) { - // localStorage.setItem('resultForLS', JSON.stringify(resultForLS)) - // } else { console.log('exists') } - - // const fromLS = JSON.parse(localStorage['resultForLS']) - // console.log(fromLS) - // createRecipe(fromLS['recipeName'], fromLS['thumbnail'], fromLS['video_url'], fromLS['description']); - // const dataMea = JSON.parse(localStorage.getItem('entire data')) - // console.log(dataMea.results[0].yields) - // //END - - - -//Creating the dynamic receipe content box +// Function to create a dynamic recipe content box function createRecipe(recipeName, img_url, video_url, description, countryTag, rating, cookTime, yields, instructionsTag, nutrition, difficultyTag) { const box = document.createElement("div"); + box.classList.add("results__result"); + const resultIntro = document.createElement("div"); resultIntro.classList.add("results__result--intro"); - box.classList.add("results__result"); - const recipeDetails = document.createElement("h3"); - const img = document.createElement("img"); - const button = document.createElement("button"); - button.classList.add("result__get-recipe"); - button.textContent = "View Recipe"; + const recipeDetails = document.createElement("h3"); + recipeDetails.textContent = capitalize_firstLetter(recipeName); - recipeDetails.textContent = Capitalize(recipeName); + const img = document.createElement("img"); img.src = img_url; - button.addEventListener('click', () => { - addDialog(recipeName, img_url, video_url, description, countryTag, rating, cookTime, yields, instructionsTag, nutrition, difficultyTag); - }); - + const button = createViewRecipeButton(recipeName, img_url, video_url, description, countryTag, rating, cookTime, yields, instructionsTag, nutrition, difficultyTag); resultIntro.appendChild(recipeDetails); resultIntro.appendChild(button); @@ -193,16 +175,33 @@ function createRecipe(recipeName, img_url, video_url, description, countryTag, r recipeContainer.appendChild(box); } -//Function for No results +// Function to create a "View Recipe" button and attach a click event + +function createViewRecipeButton(recipeName, img_url, video_url, description, countryTag, rating, cookTime, yields, instructionsTag, nutrition, difficultyTag) { + const button = document.createElement("button"); + button.classList.add("result__get-recipe"); + button.textContent = "View Recipe"; + + button.addEventListener('click', () => { + addDialog(recipeName, img_url, video_url, description, countryTag, rating, cookTime, yields, instructionsTag, nutrition, difficultyTag); + }); + return button; +} + +// Function to display "No Results" message -function NoResults() { +function noResults() { const recipeContainer = document.querySelector(".results__container"); - const NoResult = document.createElement('h2'); - NoResult.textContent = 'No result Found'; - recipeContainer.appendChild(NoResult); + const noResult = document.createElement('h2'); + noResult.textContent = 'No result found'; + recipeContainer.appendChild(noResult); } +// Function to capitalize the first letter of a string +function capitalize_firstLetter(str) { + return str.charAt(0).toUpperCase() + str.slice(1); +} // Function for view Recipe button @@ -298,7 +297,6 @@ function createSubheading(title, text) { content.textContent = text; return [heading, content]; } - return [heading]; } @@ -317,8 +315,6 @@ function createIngredients(description) { return ingredientsContainer; } - - function createInstructions(instructionsTag) { const instructions = document.createElement('ul'); instructions.classList.add('modal__instructions'); @@ -332,11 +328,9 @@ function createInstructions(instructionsTag) { listItem.textContent = instruction.display_text; instructions.appendChild(listItem); }); - return instructions; } - function createVideoLink(video_url) { const linkContainer = document.createElement('div'); linkContainer.classList.add('modal__btn-wrapper'); @@ -376,7 +370,6 @@ function handleKeyPress(event, modal) { } } - function colorStars(rating) { for (let i = 1; i <= 5; i++) { const star = document.querySelector(`.fa-star:nth-child(${i})`); @@ -386,7 +379,6 @@ function colorStars(rating) { } } - function Capitalize(text) { result = '' for (word of text.split(' ')) { @@ -402,15 +394,3 @@ function clearResults() { recipeContainer.removeChild(recipeContainer.firstChild); } } - - -// //by Andrei : static modal functionality - -// //by Andrei : to see the styling changes we make to the modal -// const modal = document.querySelector('.modal') -// const openModal = document.querySelector('.result__get-recipe') -// const closeModal = document.querySelector('.modal__close') -// // closeModal.addEventListener('click', () => modal.style.display = 'none') -// // openModal.addEventListener('click', () => modal.style.display = 'block') -// closeModal.addEventListener('click', () => modal.classList.remove('modal-active')) -// openModal.addEventListener('click', () => modal.classList.add('modal-active')) From cf247e98ef2732f51e39ec0e49a8bcc8c07a4cb9 Mon Sep 17 00:00:00 2001 From: Helen Chong <119173961+helenclx@users.noreply.github.com> Date: Sun, 29 Oct 2023 23:52:29 +0800 Subject: [PATCH 3/5] Minor indentation fix --- Food-Recipe/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Food-Recipe/index.js b/Food-Recipe/index.js index 99240d7..e8f0a42 100644 --- a/Food-Recipe/index.js +++ b/Food-Recipe/index.js @@ -207,7 +207,7 @@ function capitalize_firstLetter(str) { function addDialog(name, url, video_url, description, countryTag, rating, cookTime, yields, instructionsTag, nutrition, difficultyTag) { const modal = createModal(); - const close = createCloseButton(); + const close = createCloseButton(); const mealName = createMealName(name); const mealImage = createMealImage(url); const list = createTagList(countryTag, difficultyTag); From 7c0ccf1b2810044ce5f797df7f2b375a48890dde Mon Sep 17 00:00:00 2001 From: Helen Chong <119173961+helenclx@users.noreply.github.com> Date: Mon, 30 Oct 2023 00:05:10 +0800 Subject: [PATCH 4/5] Comment out the modal mockup --- Food-Recipe/index.html | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/Food-Recipe/index.html b/Food-Recipe/index.html index 74732b9..51ba86f 100644 --- a/Food-Recipe/index.html +++ b/Food-Recipe/index.html @@ -64,7 +64,7 @@

    Discover, Cook, Enjoy - Your Recipe Hub!

    -
    + +
      +
    • +
    +
    -
    + -->