Commit 8e164fb

authored

Merge pull request #41 from tajulafreen/Recipe_App

50Projects-HTML-CSS-JavaScript : Recipe app

2 parents 2b557a8 + c2a2ce0 commit 8e164fbCopy full SHA for 8e164fb

File tree

+129

-0

lines changed

+129

-0

lines changed

Lines changed: 11 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -430,6 +430,17 @@ In order to run this project you need:`
`430`	`430`	`</details>`
`431`	`431`	`</li>`
`432`	`432`
	`433`	`+<li>`
	`434`	`+<details>`
	`435`	`+<summary>Recipe App</summary>`
	`436`	`+<p>The Recipe App is designed to make cooking enjoyable and easy for everyone, from beginners to seasoned chefs. Discover a wide range of recipes, create your own, and share them with the community. With an intuitive interface and smart features, it helps you explore new dishes, organize your favorite recipes, and plan meals for any occasion.</p>`
	`437`	`+<ul>`
	`438`	`+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/RecipeApp/">Live Demo</a></li>`
	`439`	`+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/RecipeApp">Source</a></li>`
	`440`	`+</ul>`
	`441`	`+</details>`
	`442`	`+</li>`
	`443`	`+`
`433`	`444`	`</ol>`
`434`	`445`
`435`	`446`	`<p align="right">(<a href="#readme-top">back to top</a>)</p>`

Lines changed: 19 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,19 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+<head>`
	`4`	`+ <meta charset="UTF-8">`
	`5`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0">`
	`6`	`+ <title>Recipe App</title>`
	`7`	`+ <link rel="stylesheet" href="style.css">`
	`8`	`+</head>`
	`9`	`+<body>`
	`10`	`+ <h1>Recipe App</h1>`
	`11`	`+ <div class="search-box">`
	`12`	`+ <input type="text" id="search-input" placeholder="Search for recipes...">`
	`13`	`+ <button id="search">Search</button>`
	`14`	`+ </div>`
	`15`	`+ <div class="recipes" id="recipes"></div>`
	`16`	`+</div>`
	`17`	`+<script src="script.js"></script>`
	`18`	`+</body>`
	`19`	`+</html>`

Lines changed: 38 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,38 @@`
	`1`	`+/* eslint-disable no-use-before-define */`
	`2`	`+`
	`3`	`+const searchRecipes = async () => {`
	`4`	`+ const query = document.getElementById('search-input').value;`
	`5`	`+ if (!query) return;`
	`6`	`+`
	`7`	`+ try {`
	`8`	`+ const response = await fetch(`
	`9`	+ `https://www.themealdb.com/api/json/v1/1/search.php?s=${query}`,
	`10`	`+ );`
	`11`	`+ const data = await response.json();`
	`12`	`+ displayRecipes(data.meals);`
	`13`	`+ } catch (error) {`
	`14`	`+ console.error('Error fetching recipes:', error);`
	`15`	`+ }`
	`16`	`+};`
	`17`	`+`
	`18`	`+const displayRecipes = (meals) => {`
	`19`	`+ const recipesContainer = document.getElementById('recipes');`
	`20`	`+ recipesContainer.innerHTML = '';`
	`21`	`+`
	`22`	`+ if (!meals) {`
	`23`	`+ recipesContainer.innerHTML = '<p>No recipes found!</p>';`
	`24`	`+ return;`
	`25`	`+ }`
	`26`	`+`
	`27`	`+ meals.forEach((meal) => {`
	`28`	`+ const recipe = document.createElement('div');`
	`29`	`+ recipe.className = 'recipe';`
	`30`	+ recipe.innerHTML = `
	`31`	`+ <img src="${meal.strMealThumb}" alt="${meal.strMeal}">`
	`32`	`+ <h3>${meal.strMeal}</h3>`
	`33`	`+ <a href="${meal.strSource}" target="_blank">View Recipe</a>`
	`34`	+ `;
	`35`	`+ recipesContainer.appendChild(recipe);`
	`36`	`+ });`
	`37`	`+};`
	`38`	`+document.getElementById('search').addEventListener('click', searchRecipes);`

Lines changed: 61 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,61 @@`
	`1`	`+body {`
	`2`	`+ font-family: Arial, sans-serif;`
	`3`	`+ background-color: #f8f8f8;`
	`4`	`+ margin: 0;`
	`5`	`+ padding: 0;`
	`6`	`+ display: flex;`
	`7`	`+ flex-direction: column;`
	`8`	`+ justify-content: center;`
	`9`	`+ align-items: center;`
	`10`	`+}`
	`11`	`+`
	`12`	`+h1 {`
	`13`	`+ text-align: center;`
	`14`	`+ color: #333;`
	`15`	`+}`
	`16`	`+`
	`17`	`+.search-box {`
	`18`	`+ display: flex;`
	`19`	`+ gap: 20px;`
	`20`	`+}`
	`21`	`+`
	`22`	`+input[type="text"] {`
	`23`	`+ min-width: 300px;`
	`24`	`+ max-width: 400px;`
	`25`	`+ padding: 10px;`
	`26`	`+ font-size: 16px;`
	`27`	`+ border: 1px solid #ccc;`
	`28`	`+ border-radius: 4px;`
	`29`	`+}`
	`30`	`+`
	`31`	`+button {`
	`32`	`+ padding: 10px 20px;`
	`33`	`+ font-size: 16px;`
	`34`	`+ background: #28a745;`
	`35`	`+ color: white;`
	`36`	`+ border: none;`
	`37`	`+ border-radius: 4px;`
	`38`	`+ cursor: pointer;`
	`39`	`+}`
	`40`	`+`
	`41`	`+button:hover {`
	`42`	`+ background: #218838;`
	`43`	`+}`
	`44`	`+`
	`45`	`+.recipes {`
	`46`	`+ display: grid;`
	`47`	`+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));`
	`48`	`+ gap: 20px;`
	`49`	`+}`
	`50`	`+`
	`51`	`+.recipe {`
	`52`	`+ background: #f4f4f4;`
	`53`	`+ padding: 15px;`
	`54`	`+ border-radius: 8px;`
	`55`	`+ text-align: center;`
	`56`	`+}`
	`57`	`+`
	`58`	`+.recipe img {`
	`59`	`+ width: 100%;`
	`60`	`+ border-radius: 8px;`
	`61`	`+}`

Comments

(0)