updated js file

recipe_website/main.js

@@ -3,3 +3,65 @@ const showMenu = document.querySelector('.site');
 menu.addEventListener('click', function(){
     showMenu.classList.toggle('showmenu')
 })
+//recipe
+const search_btn = document.getElementById('search-btn');
+const meal_list = document.getElementById('meal');
+const meal_detail = document.querySelector('.meal-content');
+const recipe_btn = document.getElementById('recipe-button');
+
+search_btn.addEventListener('click', getMealList);
+meal_list.addEventListener('click', getMealRecipe);
+recipe_btn.addEventListener('click', () =>{
+    meal_detail.parentElement.classList.remove('showRecipe');
+});
+
+function getMealList(){
+    let searchInputText = document.getElementById('search-input').value.trim();
+    fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${searchInputText}`).then(response => response.json()).then(data => {
+        let html = "";
+        if(data.meals){
+            data.meals.forEach(meal => {
+                html += `<div class="meal-item" data-id = "${meal.idMeal}">
+                            <div class="meal-img">
+                                <img src="${meal.strMealThumb}" alt="">
+                            </div>
+                            <div class="meal-name">
+                                <h3>${meal.strMeal}</h3>
+                                <a href="" class="recipe-btn">Get Recipe</a>
+                            </div>
+                        </div>`;
+            });
+            meal_list.classList.remove('notFound')
+        }
+        else{
+            html = "Sorry! we do not have this meal"
+            meal_list.classList.add('notFound');
+        }
+        meal_list.innerHTML = html;
+
+    });
+}
+function getMealRecipe(x){
+    x.preventDefault();
+    if(x.target.classList.contains('recipe-btn')){
+        let meal_item = x.target.parentElement.parentElement;
+        fetch(`https://www.themealdb.com/api/json/v1/1/lookup.php?i=${meal_item.dataset.id}`).then(respond => respond.json()).then(data => mealRecipeModel(data.meals));
+    }
+}
+function mealRecipeModel(meal){
+    meal = meal[0];
+    let html = `<h2 class="recipe-title">${meal.strMeal}</h2>
+                <p class="recipe-cat">${meal.strCategory}</p>
+                <div class="recipe-guide">
+                    <h3>Directions:</h3>
+                    <p>${meal.strInstructions}</p>
+                </div>
+                <div class="recipe-img">
+                    <img src="${meal.strMealThumb}" alt="">
+                </div>
+                <div class="recipe-link">
+                    <a href="${meal.strYoutube}" target="_blank">Watch Video</a>
+                </div>`;
+    meal_detail.innerHTML = html;
+    meal_detail.parentElement.classList.add('showRecipe');
+}