const searchBtn = document.getElementById('search-btn');
const mealList = document.getElementById('meal');
const mealDetailsContent = document.querySelector('.meal-details-content');
const recipeCloseBtn = document.getElementById('recipe-close-btn');
// add event listener
searchBtn.addEventListener('click', getMealList);
mealList.addEventListener('click', getMealRecipe);
recipeCloseBtn.addEventListener('click', () => {
mealDetailsContent.parentElement.classList.remove('showRecipe')
})
function getMealList() {
let searchInputText = document.getElementById('search-input').value
fetch(`https://www.themealdb.com/api/json/v1/1/filter.php?i=${searchInputText}`)
.then(response => response.json())
.then(data => {
let htmlCode = " ";
if (data.meals) {
data.meals.forEach(meal => {
htmlCode += `
`;
mealList.classList.remove('itemNotFound');
})
}
else {
htmlCode = "We are sorry😢. This item is not available at this moment!
Please Try Another One";
mealList.classList.add('itemNotFound');
}
mealList.innerHTML = htmlCode;
})
}
// https://www.themealdb.com/api/json/v1/1/lookup.php?i=52772
// X Details API
function getMealRecipe(e) {
e.preventDefault();
if (e.target.classList.contains('recipe-btn')) {
let mealItem = e.target.parentElement.parentElement;
fetch(`https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealItem.dataset.id}`)
.then(response => response.json())
.then(data => mealRecipeModal(data.meals));
}
}
function mealRecipeModal(meal) {
console.log(meal);
meal = meal[0];
let html = `
${meal.strMeal}
${meal.strCategory}
Instructions
${meal.strInstructions}
`;
mealDetailsContent.innerHTML = html;
mealDetailsContent.parentElement.classList.add('showRecipe');
}