script.js

//  Select DOM elements

const searchBox = document.querySelector('.searchBox');
const searchBtn = document.querySelector('.searchBtn');
const recipeContainer = document.querySelector('.recipe-container');
const recipeDetailsContents = document.querySelector('.recipe-details-contents')
const recipeCloseBtn = document.querySelector('.recipe-close-btn')



//  Fetch recipes from API

const fetchRecipe = async (query) => {
    recipeContainer.innerHTML = "<h2>Fetching Recipe</h2>";

    try {
    const data = await fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${query}`);
    const respones = await data.json();
    // console.log(respones.meals[0]);

    recipeContainer.innerHTML = "";
    respones.meals.forEach( meal => {
        // console.log(meal);
        const recipeDiv = document.createElement('div')
        recipeDiv.classList.add('recipe')
        recipeDiv.innerHTML = `
        <img src="${meal.strMealThumb}">
        <h3>${meal.strMeal}</h3>
        <p><span>${meal.strArea}</span>Dish</p>
        <p>Belong to <span>${meal.strCategory} </span>Category</p>
        `

        //  Add "View Recipe" button and create
        const button = document.createElement('button');
        button.textContent = "View Recire";
        recipeDiv.appendChild(button);

        button.addEventListener('click', () => {
            openRecipePopup(meal);
        })

        recipeContainer.appendChild(recipeDiv);
    })

    } catch (error) {
            recipeContainer.innerHTML = "<h2>Error In Fetching Recipe</h2>";
    }
}

// function to fetch Ingredents

const fetchIngredents = (meal) => {
    let ingredentsList = "";
    for (let i=1; i<=20; i++){
        const ingredient = meal[`strIngredient${i}`];
        if(ingredient){
            const measure = meal[`strMeasure${i}`];
            ingredentsList += `<li>${ingredient},${measure}</li>`
        }else{
            break;
        }
    }
    return ingredentsList;
}

//  Open recipe popup

const openRecipePopup = (meal) => {
    // console.log(meal);
    recipeDetailsContents.innerHTML = `
    <h2 class="recipeName">${meal.strMeal}</h2>
    <h3>Ingredents</h3>
    <ulclass="ingredentsList">${fetchIngredents(meal)}</ul>
    <div class="recipeInstructions">
    <h3>Instructions:</h3>
    <p>${meal.strInstructions}</p>
    </div>
    `

    recipeDetailsContents.parentElement.style.display = "block";
}

// close popup button view recipe  

recipeCloseBtn.addEventListener('click', () => {
    recipeDetailsContents.parentElement.style.display = "none";
})


//  Handle search button click

searchBtn.addEventListener('click',(e)=>{
    e.preventDefault();
    const searchInput = searchBox.value.trim();
    if(!searchInput){
        recipeContainer.innerHTML = `<h2>Type the meal in the search box</h2>`
        return;
    }
    fetchRecipe(searchInput);
    // console.log('clicked');
});





// // feat: setup DOM element selectors for search, container, and popup
// // 🔹 Selecting input, button, and container elements from HTML
// const searchBox = document.querySelector('.searchBox');
// const searchBtn = document.querySelector('.searchBtn');
// const recipeContainer = document.querySelector('.recipe-container');
// const recipeDetailsContents = document.querySelector('.recipe-details-contents');
// const recipeCloseBtn = document.querySelector('.recipe-close-btn');


// // feat: add fetchRecipe function to get meals from TheMealDB API
// // 🔹 Function that fetches recipes based on user query
// const fetchRecipe = async (query) => {
//     recipeContainer.innerHTML = "<h2>Fetching Recipe...</h2>"; // show loading message

//     try {
//         // feat: fetch data from TheMealDB API
//         const data = await fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${query}`);
//         const respones = await data.json(); // parse JSON response

//         recipeContainer.innerHTML = ""; // clear old results

//         // feat: display recipe cards with image, name, area, and category
//         respones.meals.forEach(meal => {
//             const recipeDiv = document.createElement('div'); // create recipe card
//             recipeDiv.classList.add('recipe');

//             // card content
//             recipeDiv.innerHTML = `
//                 <img src="${meal.strMealThumb}">
//                 <h3>${meal.strMeal}</h3>
//                 <p><span>${meal.strArea}</span> Dish</p>
//                 <p>Belongs to <span>${meal.strCategory}</span> Category</p>
//             `;

//             // feat: add "View Recipe" button to each recipe card
//             const button = document.createElement('button');
//             button.textContent = "View Recipe";
//             recipeDiv.appendChild(button);

//             // feat: add click handler to open popup with details
//             button.addEventListener('click', () => {
//                 openRecipePopup(meal);
//             });

//             recipeContainer.appendChild(recipeDiv); // add card to container
//         });

//     } catch (error) {
//         // fix: show error if API fails
//         recipeContainer.innerHTML = "<h2>Error In Fetching Recipe</h2>";
//     }
// };


// // feat: implement fetchIngredents function to list ingredients and measures
// // 🔹 Extract ingredients + measures from API response
// const fetchIngredents = (meal) => {
//     let ingredentsList = "";
//     for (let i = 1; i <= 20; i++) { // loop through possible 20 ingredients
//         const ingredient = meal[`strIngredient${i}`];
//         if (ingredient) {
//             const measure = meal[`strMeasure${i}`];
//             ingredentsList += `<li>${ingredient} - ${measure}</li>`; // add list item
//         } else {
//             break; // stop if ingredient is empty
//         }
//     }
//     return ingredentsList; // return built list
// };


// // feat: add openRecipePopup function to display recipe details in popup
// const openRecipePopup = (meal) => {
//     // fill popup content
//     recipeDetailsContents.innerHTML = `
//         <h2 class="recipeName">${meal.strMeal}</h2>
//         <h3>Ingredients</h3>
//         <ul class="ingredentsList">${fetchIngredents(meal)}</ul>
//         <div class="recipeInstructions">
//             <h3>Instructions:</h3>
//             <p>${meal.strInstructions}</p>
//         </div>
//     `;

//     recipeDetailsContents.parentElement.style.display = "block"; // show popup
// };


// // feat: add close button functionality to hide recipe popup
// recipeCloseBtn.addEventListener('click', () => {
//     recipeDetailsContents.parentElement.style.display = "none"; // hide popup
// });


// // feat: handle search button click
// searchBtn.addEventListener('click', (e) => {
//     e.preventDefault(); // prevent form submit
//     const searchInput = searchBox.value.trim(); // get user input

//     // fix: handle empty search input with proper message
//     if (!searchInput) {
//         recipeContainer.innerHTML = `<h2>Type the meal in the search box</h2>`;
//         return;
//     }

//     fetchRecipe(searchInput); // call API
// });