add the recipe app

tajulafreen · tajulafreen · commit 6edc85f7d721 · 2024-12-19T22:32:07.000+05:30
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;
+}
