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)

    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; +}