const warning=document.getElementById('warning');
const searchButton =document.getElementById('searchBtn');
const data = document.getElementById('foods');
searchButton.addEventListener('click',function(){
const keyword = document.getElementById('keyword').value;
data.innerHTML = '';
if(keyword==''){
warning.style.display='block';
}
else{
getFoodItems(keyword);
warning.style.display='none';
}
})
// get the food details area
const displayDetails=name=>{
const url =`https://www.themealdb.com/api/json/v1/1/lookup.php?i=${name}`
fetch (url)
.then(res=>res.json())
.then(data=>{renderFoodDetail(data.meals[0]);
});
}
const renderFoodDetail=food=>{
const foodDiv=document.getElementById('foodDiv');
foodDiv.innerHTML=`
${food.strMeal}
Ingredients
${food.strMeasure1}, ${food.strIngredient1}
${food.strMeasure2}, ${food.strIngredient2}
${food.strMeasure3}, ${food.strIngredient3}
${food.strMeasure4}, ${food.strIngredient4}
${food.strMeasure5}, ${food.strIngredient5}
${food.strMeasure6}, ${food.strIngredient6}
`
foodDiv.style.display='block';
}
// hide details area
function HideDetails(){
foodDiv.style.display="none";
}
// get the food with image area
function getFoodItems(mealId){
const api=`https://www.themealdb.com/api/json/v1/1/search.php?s=${mealId}`
fetch(api)
.then(res=>res.json())
.then(data=>{
displayFoods(data.meals);
});
const displayFoods=foods=>{
const foodsDiv= document.getElementById('foods');
if(foods!=null){
foods.map(food=>{
const foodDiv=document.createElement('div');
foodDiv.className='col-md-3';
const foodInfo=`
${food.strMeal}
`;
foodDiv.innerHTML=foodInfo;
foodsDiv.appendChild(foodDiv);
});
}else {
warning.style.display = 'block';
}
}
}