From 6edc85f7d721634cec80211b8d0c352dd5d53119 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Thu, 19 Dec 2024 22:32:07 +0530 Subject: [PATCH 1/2] add the recipe app --- Source-Code/RecipeApp/index.html | 19 ++++++++++ Source-Code/RecipeApp/script.js | 38 ++++++++++++++++++++ Source-Code/RecipeApp/style.css | 61 ++++++++++++++++++++++++++++++++ 3 files changed, 118 insertions(+) create mode 100644 Source-Code/RecipeApp/index.html create mode 100644 Source-Code/RecipeApp/script.js create mode 100644 Source-Code/RecipeApp/style.css diff --git a/Source-Code/RecipeApp/index.html b/Source-Code/RecipeApp/index.html new file mode 100644 index 0000000..51ba5bf --- /dev/null +++ b/Source-Code/RecipeApp/index.html @@ -0,0 +1,19 @@ + + + + + + Recipe App + + + +

Recipe App

+
+ + +
+
+ + + + \ No newline at end of file diff --git a/Source-Code/RecipeApp/script.js b/Source-Code/RecipeApp/script.js new file mode 100644 index 0000000..de13836 --- /dev/null +++ b/Source-Code/RecipeApp/script.js @@ -0,0 +1,38 @@ +/* eslint-disable no-use-before-define */ + +const searchRecipes = async () => { + const query = document.getElementById('search-input').value; + if (!query) return; + + try { + const response = await fetch( + `https://www.themealdb.com/api/json/v1/1/search.php?s=${query}`, + ); + const data = await response.json(); + displayRecipes(data.meals); + } catch (error) { + console.error('Error fetching recipes:', error); + } +}; + +const displayRecipes = (meals) => { + const recipesContainer = document.getElementById('recipes'); + recipesContainer.innerHTML = ''; + + if (!meals) { + recipesContainer.innerHTML = '

No recipes found!

'; + return; + } + + meals.forEach((meal) => { + const recipe = document.createElement('div'); + recipe.className = 'recipe'; + recipe.innerHTML = ` + ${meal.strMeal} +

${meal.strMeal}

+ View Recipe + `; + recipesContainer.appendChild(recipe); + }); +}; +document.getElementById('search').addEventListener('click', searchRecipes); diff --git a/Source-Code/RecipeApp/style.css b/Source-Code/RecipeApp/style.css new file mode 100644 index 0000000..3cea222 --- /dev/null +++ b/Source-Code/RecipeApp/style.css @@ -0,0 +1,61 @@ +body { + font-family: Arial, sans-serif; + background-color: #f8f8f8; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +h1 { + text-align: center; + color: #333; +} + +.search-box { + display: flex; + gap: 20px; +} + +input[type="text"] { + min-width: 300px; + max-width: 400px; + padding: 10px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 4px; +} + +button { + padding: 10px 20px; + font-size: 16px; + background: #28a745; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover { + background: #218838; +} + +.recipes { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 20px; +} + +.recipe { + background: #f4f4f4; + padding: 15px; + border-radius: 8px; + text-align: center; +} + +.recipe img { + width: 100%; + border-radius: 8px; +} From c2a2ce0de73b14a5b597ba37126d7a8d0ad3280b Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Thu, 19 Dec 2024 23:16:45 +0530 Subject: [PATCH 2/2] update the readme --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index a57a985..f34710e 100644 --- a/README.md +++ b/README.md @@ -430,6 +430,17 @@ In order to run this project you need: +
  • +
    +Recipe App +

    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.

    + +
    +
    • +

    (back to top)