diff --git a/index.html b/index.html index d54098b..a062c1b 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,32 @@ Recipe App + + +
+ +
+
+
+
+

Search your favourite recipes

+ +
+
+
+ + + \ No newline at end of file diff --git a/script.js b/script.js index e69de29..7362089 100644 --- 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=` + +

${meal.strMeal}

+

${meal.strArea}

+

${meal.strCategory}

` + + 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 index f8e54cd..a455351 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,83 @@ *{ - background-color: lightcoral; -} \ No newline at end of file + 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; + + } + +}