diff --git a/index.html b/index.html
index a062c1b..4bfae07 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,8 @@
Recipe App
+
+
@@ -22,8 +24,19 @@ Recipe App
-
Search your favourite recipes
+ Search your favourite recipes...
+
+
+
diff --git a/script.js b/script.js
index 7362089..6c2d683 100644
--- 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="Fetching recipes...
"
+ 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=`
${meal.strMeal}
- ${meal.strArea}
- ${meal.strCategory}
`
+ ${meal.strArea} Dish
+ Belongs to ${meal.strCategory} category
`
+ 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="Error in fetching recipes...
"
+
+ }
+
+
//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+=`${measure} ${ingredient}`
+
+
+ }
+ else{
+ break;
+
+ }
+ }
+ return ingredientslist;
+
+
}
+
+const openRecipePopup=(meal)=>{
+ recipedetailscontent.innerHTML=`
+ ${meal.strMeal}
+ Ingredients:
+ ${fetchIngredients(meal)}
+
+
Instructions:
+
${meal.strInstructions}
+
Type the meal in the search box.
`;
+ return;
+}
fetchrecipes(searchinput);
});
+ // ``-> template literals
diff --git a/style.css b/style.css
index a455351..e9edfea 100644
--- 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;