https://foodrecipes-api.netlify.app/script.js

1const searchBtn = document.getElementById('search-btn');
2const mealList = document.getElementById('meal');
3const mealDetailsContent = document.querySelector('.meal-details-content');
4const recipeCloseBtn = document.getElementById('recipe-close-btn');
5const searchInput = document.getElementById("search-input");
6
7// event listeners
8searchInput.addEventListener("keyup", function(event) {
9    if (event.key === "Enter") {
10      // Trigger the search when "Enter" is pressed
11getMealList();
12    }
13  });
14searchBtn.addEventListener('click', getMealList);
15mealList.addEventListener('click', getMealRecipe);
16recipeCloseBtn.addEventListener('click', () => {
17    mealDetailsContent.parentElement.classList.remove('showRecipe');
18});
19
20
21// get meal list that matches with the ingredients
22function getMealList(){
23    let searchInputTxt = document.getElementById('search-input').value.trim();
24    fetch(`https://www.themealdb.com/api/json/v1/1/filter.php?i=${searchInputTxt}`)
25    .then(response => response.json())
26    .then(data => {
27        let html = "";
28        if(data.meals){
29            data.meals.forEach(meal => {
30                html += `
31                    <div class = "meal-item" data-id = "${meal.idMeal}">
32                    
33                            <div class = "meal-img">
34                                <img src = "${meal.strMealThumb}" alt = "food">
35                            </div>
36                            <div class = "meal-name">
37                                <h3>${meal.strMeal}</h3>
38                                <a href = "#" class = "recipe-btn">Get Recipe</a>
39                            </div>
40              
41                    </div>
42                `;
43            });
44            mealList.classList.remove('notFound');
45        } else{
46            html = "Sorry, item not found!";
47            mealList.classList.add('notFound');
48        }
49
50        mealList.innerHTML = html;
51    });
52      // Show the meal list
53  document.querySelector('.meal-result').style.display = 'block';
54}
55
56
57// get recipe of the meal
58function getMealRecipe(e){
59    e.preventDefault();
60    if(e.target.classList.contains('recipe-btn')){
61        let mealItem = e.target.parentElement.parentElement;
62        fetch(`https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealItem.dataset.id}`)
63        .then(response => response.json())
64        .then(data => mealRecipeModal(data.meals));
65    }
66}
67
68// create a modal
69function mealRecipeModal(meal){
70    console.log(meal);
71    meal = meal[0];
72    let html = `
73        <h2 class = "recipe-title">${meal.strMeal}</h2>
74        <p class = "recipe-category">${meal.strCategory}</p>
75        <div class = "recipe-ingredients">
76            <h3>Ingredients:</h3>
77            <p>${meal.strCategory}</p>
78        </div>
79        <div class = "recipe-instruct">
80            <h3>Instructions:</h3>
81            <p>${meal.strInstructions}</p>
82        </div>
83        <div class = "recipe-meal-img">
84            <img src = "${meal.strMealThumb}" alt = "">
85        </div>
86        <div class = "recipe-link">
87            <a href = "${meal.strYoutube}" target = "_blank">Watch Video</a>
88        </div>
89    `;
90    mealDetailsContent.innerHTML = html;
91    mealDetailsContent.parentElement.classList.add('showRecipe');
92};
93
94// refresh on click
95document.getElementById('clear-btn').addEventListener('click', function() {
96    window.location.reload();
97  });
98