project started

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

Hide file tree

Showing 3 changed files with 142 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -4,8 +4,32 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Recipe App</title>
+    <link rel="stylesheet" href="style.css">
+
 </head>
 <body>
+    <header>
+        <nav>
+            <h1>Recipe App</h1>
+            <form action="">
+                <input type="text" placeholder="Search for recipes" class="searchbox">
+                <button type="submit" class="search-btn">Search</button>
+
+
+            </form>
+        </nav>
+    </header>
+    <main>
+        <section>
+            <div class="recipe-container">
+                <h2>Search your favourite recipes</h2>
+
+            </div>
+        </section>
+    </main>
+
+
 
 </body>
+<script src="script.js"></script>
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,36 @@
+const searchbox=document.querySelector('.searchbox');
+const searchbtn=document.querySelector('.search-btn');
+const recipecontainer=document.querySelector('.recipe-container');
+
+const fetchrecipes= async (query)=>{
+    recipecontainer.innerHTML="Fetching recipes"
+    const data= await fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${query}`);
+
+    const response= await data.json();
+    recipecontainer.innerHTML="";
+    response.meals.forEach(meal => {
+        // normal for loop bhi lga skte h
+        const recipediv=document.createElement('div');
+        recipediv.classList.add('recipe');// meal islie lere h bcoz hmne foreach loop mei element ka naam meal lia h toh usse acccess krenge sbko
+
+        recipediv.innerHTML=`
+        <img src="${meal.strMealThumb}">
+        <h3>${meal.strMeal}</h3>
+        <p>${meal.strArea}</p>
+        <p>${meal.strCategory}</p>`
+
+        recipecontainer.appendChild(recipediv);// container mei jo element create kia h usko append krdia
+
+
+
+    });
+    //console.log(response.meals[0]);// jo pehla meal tha vo access ho gya
+
+}
+
+searchbtn.addEventListener('click', (e)=>{
+    e.preventDefault();//autosubmit ni hoega , page refresh ni hga button click krne p
+const searchinput=searchbox.value.trim();
+   fetchrecipes(searchinput);
+});
+
diff --git a/style.css b/style.css
@@ -1,3 +1,83 @@
 *{
-    background-color: lightcoral;
-}
+    margin:0;
+    padding:0;
+    box-sizing: border-box;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+
+}
+body{
+    background-color: #2b1d0f;
+    color:#fff;
+
+}
+header nav{
+    background-color: #212121;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    z-index: 1;/* jiska z-index zyada hta h vo text upr dikhta h*/
+
+}
+header nav h1{
+    font-size: 26px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+}
+header nav form{
+    display: flex;
+    justify-content: center;
+
+}
+form input[type="text"]{
+    flex-grow: 1;
+    margin-right: 10px;
+
+
+}
+form inut[type="text"],buton[type="submit"]{
+    border:none;
+    font-size: 18px;
+    padding: 10px;
+    border-radius:4px ;
+}
+form button[type="submit"]{
+    background-color: #f44336;
+    color: #fff;
+    cursor: pointer;
+    transition: background-color 0.2s ease-in-out;/* taaki jb button pr cursor leke jae toh starting m transition dheere ho and jb cursor hatae tb bhi dheere ho*/
+
+
+}
+form button[type="submit"]:hover{
+    background-color:#ff5c5c;
+
+}
+
+/*main section css styling*/
+.recipe-container{
+    text-align: center;
+    margin-top: 20px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+
+
+
+
+
+
+
+@media screen  and (max-width:600px){
+    header nav{
+        flex-direction: column;
+    }
+    header nav form{
+        width: 80%;
+        margin-top: 20px;
+
+    }
+
+}