Commit 6edc85f

committed

add the recipe app

1 parent 2b557a8 commit 6edc85fCopy full SHA for 6edc85f

File tree

+118

-0

lines changed

+118

-0

lines changed

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)