Merge pull request #41 from tajulafreen/Recipe_App

tajulafreen · web-flow · commit 8e164fb865b2 · 2024-12-19T23:25:01.000+05:30
50Projects-HTML-CSS-JavaScript : Recipe app
diff --git a/README.md b/README.md
@@ -430,6 +430,17 @@ In order to run this project you need:
 </details>
 </li>
 
+<li>
+<details>
+<summary>Recipe App</summary>
+<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>
+<ul>
+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/RecipeApp/">Live Demo</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/RecipeApp">Source</a></li>
+</ul> 
+</details>
+</li>
+
 </ol>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
diff --git a/Source-Code/RecipeApp/index.html b/Source-Code/RecipeApp/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Recipe App</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Recipe App</h1>
+    <div class="search-box">
+        <input type="text" id="search-input" placeholder="Search for recipes...">
+        <button id="search">Search</button>
+    </div>
+    <div class="recipes" id="recipes"></div>
+</div>
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/Source-Code/RecipeApp/script.js 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 = '<p>No recipes found!</p>';
+    return;
+  }
+
+  meals.forEach((meal) => {
+    const recipe = document.createElement('div');
+    recipe.className = 'recipe';
+    recipe.innerHTML = `
+            <img src="${meal.strMealThumb}" alt="${meal.strMeal}">
+            <h3>${meal.strMeal}</h3>
+            <a href="${meal.strSource}" target="_blank">View Recipe</a>
+        `;
+    recipesContainer.appendChild(recipe);
+  });
+};
+document.getElementById('search').addEventListener('click', searchRecipes);
diff --git a/Source-Code/RecipeApp/style.css 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;
+}
