done

Aashi19234 · Jan 31, 2024 · eab04eb · eab04eb
1 parent fb00e5a
commit eab04eb
Show file tree

Hide file tree

Showing 3 changed files with 214 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Recipe App</title>
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+
 
 </head>
 <body>
@@ -22,8 +24,19 @@ <h1>Recipe App</h1>
     <main>
         <section>
             <div class="recipe-container">
-                <h2>Search your favourite recipes</h2>
+                <h2>Search your favourite recipes...</h2>
+
+            </div>
+            <div class="recipe-details">
+                <button type="button" class="recipe-close-btn">
+                    <i class="fas fa-times"></i>
 
+                </button>
+
+
+            <div class="recipe-details-content">
+
+            </div>
             </div>
         </section>
     </main>

diff --git a/script.js b/script.js
@@ -1,10 +1,12 @@
 const searchbox=document.querySelector('.searchbox');
 const searchbtn=document.querySelector('.search-btn');
 const recipecontainer=document.querySelector('.recipe-container');
-
+const recipedetailscontent=document.querySelector('.recipe-details-content');
+const recipeclosebtn=document.querySelector('.recipe-close-btn');
 const fetchrecipes= async (query)=>{
-    recipecontainer.innerHTML="Fetching recipes"
-    const data= await fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${query}`);
+    recipecontainer.innerHTML="<h2>Fetching recipes...</h2>"
+    try {
+        const data= await fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${query}`);
 
     const response= await data.json();
     recipecontainer.innerHTML="";
@@ -16,21 +18,83 @@ const fetchrecipes= async (query)=>{
         recipediv.innerHTML=`
         <img src="${meal.strMealThumb}">
         <h3>${meal.strMeal}</h3>
-        <p>${meal.strArea}</p>
-        <p>${meal.strCategory}</p>`
+        <p><span>${meal.strArea}</span> Dish</p>
+        <p>Belongs to <span>${meal.strCategory}</span> category</p>`
+        const button= document.createElement('button');
+        button.textContent="View Recipe";
+        recipediv.appendChild(button);
+        button.addEventListener('click', ()=>{
+            //pop-up window for recipe
+            openRecipePopup(meal);
+        });
 
         recipecontainer.appendChild(recipediv);// container mei jo element create kia h usko append krdia
 
 
 
     });
+    }
+     catch (error) {
+        recipecontainer.innerHTML="<h2>Error in fetching recipes...</h2>"
+
+    }
+
+
     //console.log(response.meals[0]);// jo pehla meal tha vo access ho gya
 
+}
+const fetchIngredients=(meal)=>{
+    //console.log(meal);
+    let ingredientslist="";
+    for(let i=1;i<=20;i++){
+        const ingredient = meal[`strIngredient${i}`];
+        if(ingredient){
+            const measure=meal[`strMeasure${i}`];
+            ingredientslist+=`<li>${measure} ${ingredient}</li>`
+
+
+        }
+        else{
+            break;
+
+        }
+    }
+    return ingredientslist;
+
+
 }
 
+
+const openRecipePopup=(meal)=>{
+    recipedetailscontent.innerHTML=`
+    <h2 class="recipename">${meal.strMeal}</h2>
+    <h3>Ingredients:</h3>
+    <ul class="ingredientlist">${fetchIngredients(meal)}</ul>
+    <div  class="recipeinstructions">
+    <h3>Instructions:</h3>
+    <p>${meal.strInstructions}</p>
+    </div>
+    
+    
+    
+    `
+
+    recipedetailscontent.parentElement.style.display="block";
+
+}
+recipeclosebtn.addEventListener('click', ()=>{
+    recipedetailscontent.parentElement.style.display="none";
+});
+
+
 searchbtn.addEventListener('click', (e)=>{
     e.preventDefault();//autosubmit ni hoega , page refresh ni hga button click krne p
 const searchinput=searchbox.value.trim();
+if(!searchinput){
+    recipecontainer.innerHTML=`<h2>Type the meal in the search box.</h2>`;
+    return;
+}
    fetchrecipes(searchinput);
 });
 
+  // ``-> template literals
diff --git a/style.css b/style.css
@@ -8,6 +8,7 @@
 body{
     background-color: #2b1d0f;
     color:#fff;
+
 
 }
 header nav{
@@ -36,7 +37,7 @@ form input[type="text"]{
 
 
 }
-form inut[type="text"],buton[type="submit"]{
+form input[type="text"],button[type="submit"]{
     border:none;
     font-size: 18px;
     padding: 10px;
@@ -50,9 +51,10 @@ form button[type="submit"]{
 
 
 }
-form button[type="submit"]:hover{
+form button[type="submit"]:hover, .recipe button:hover, .recipe-close-btn:hover {
     background-color:#ff5c5c;
 
+
 }
 
 /*main section css styling*/
@@ -61,15 +63,142 @@ form button[type="submit"]:hover{
     margin-top: 20px;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+grid-gap:40px;
+
+
+width:80%;
+margin:10px auto;
+padding: 20px;
+place-items: center;
+
+
+
 }
+.recipe{
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    color:#000;
+    border-radius: 6px;
+    box-shadow: 0 5px 10px rgba(78,73,73,0.1), -5x -5px 10px rgba(34,34,34,0.5);
+    cursor: pointer;
+    max-width: 350px;
+    transition: transform 0.3s ease-in-out;
 
 
+}
+.recipe:hover{
+    transform: scale(1.02);/*bahar aata hua effect*/
 
+}
+.recipe img{
+    height: 300px;
 
+}
+.recipe h3{
+    font-size: 24px;
 
+}
+.recipe p{
+    font-size: 20px;
+    color: #4a4a4a;
+    margin: 5px 0;
 
+}
+.recipe span{
+    font-weight: 600;
+}
+.recipe button{
+    font-size: 20px;
+    font-weight: 600;
+    padding: 10px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin: 18px auto;
+    background-color: #f44336;
+
+    color: #fff;
+}
+.recipe-details{
+    display: none;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #694c2f;
+    -webkit-transform: translate(-50%,-50%);
+    border-radius: 12px;
+    width: 40%;
+    height: 60%;
+    font-size: 20px;
+    transition: all 0.5s ease-in-out;
+    overflow-y: scroll;
+}
+/*adding scroll bar to recipe detail popup*/
+.recipe-details::-webkit-scrollbar{
+    width: 10px;
+}
+.recipe-details::-webkit-scrollbar-thumb{
+    background: #b5b5ba;
+    border: 16px;
+    --webkit-border-radius:16px;
 
+}
+.recipe-details-content{
+    padding: 30px;
 
+}
+.recipename{
+    text-align: center;
+    text-transform: uppercase;
+    text-decoration: underline;
+    margin-bottom: 10px;
+
+}
+.ingredientlist li{
+    margin-bottom: 10px;
+    margin-left: 20px;
+
+}
+.recipeinstructions p{
+    line-height: 30px;
+    white-space: pre-line;/*white spaces handle hre hai*/
+
+}
+.recipe-close-btn{
+    border:none;
+    font-size: 18px;
+    padding: 8px;
+    border-radius:4px ;
+    background-color: #f44336;
+    color: #fff;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+}
+.recipename,.ingredientlist,.recipeinstructions {
+    margin-bottom: 10px;
+}
+body::-webkit-scrollbar{
+    width: 16px;
+}
+body::-webkit-scrollbar-thumb{
+    background: #a1a1a1;
+
+
+}
+body::-webkit-scrollbar-track{
+    /*scroll bar ke background ko background*/
+    background: #ebebeb;
+
+}
 @media screen  and (max-width:600px){
     header nav{
         flex-direction: column;