dishamodi0910 · dishamodi0910 · Oct 26, 2023 · Oct 22, 2023 · Oct 22, 2023
diff --git a/.gitignore b/.gitignore
@@ -127,4 +127,5 @@ dist
 .yarn/unplugged
 .yarn/build-state.yml
 .yarn/install-state.gz
-.pnp.*
+.pnp.*
+.vscode
diff --git a/New_APIs/Recipe_Realm_API/README.md b/New_APIs/Recipe_Realm_API/README.md
@@ -0,0 +1,45 @@
+# Recipe API Web App
+
+This is a simple web application that allows you to search for recipes using the MealDB API and display detailed information about a selected recipe, including its name, category, area, instructions, ingredients, and a link to a video demonstration (if available).
+
+## Features
+
+- Search for recipes by name.
+- Display detailed information about the selected recipe.
+- View a list of ingredients separated by commas.
+- Access a link to a YouTube video for a recipe (if available).
+
+## Technologies Used
+
+- HTML
+- CSS
+- JavaScript
+
+## Usage
+
+1. Clone the repository to your local machine:
+
+2. Open the `index.html` file in your web browser.
+
+3. Enter the name of the dish you're looking for and click the "Search" button.
+
+4. The recipe details, including ingredients and a YouTube link (if available), will be displayed.
+
+## Code Explanation
+
+- The code uses HTML for the structure and layout of the web page.
+- CSS is used for styling and layout adjustments.
+- JavaScript is responsible for handling user input, making API requests, and dynamically updating the content.
+
+## API Integration
+
+- This web app integrates with the MealDB API to fetch and display recipe data.
+- It uses the API's search endpoint to retrieve recipe information based on user input.
+
+## Credits
+
+- [MealDB API](https://www.themealdb.com/api.php)
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
diff --git a/New_APIs/Recipe_Realm_API/rec.css b/New_APIs/Recipe_Realm_API/rec.css
@@ -0,0 +1,97 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+body {
+  background-image: url("https://thumbs.dreamstime.com/b/italian-food-background-variety-ingredients-over-slate-35112782.jpg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100vh;
+}
+.container {
+  background-color: #b0acac;
+  width: 80vw;
+  max-width: 3705em;
+  padding: 3em 2.5em;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  border-radius: 0.62em;
+  box-shadow: 0 1.25em 1.8em rgba(8, 21, 65, 0.25);
+}
+.search-wrapper {
+  display: grid;
+  grid-template-columns: 9fr 3fr;
+  gap: 1.25em;
+}
+.search-wrapper button:hover {
+  background-color: #033e23;
+}
+.search-wrapper button {
+  font-size: 1em;
+  background-color: #056238;
+  color: #ffffff;
+  padding: 0.8em 0;
+  border: none;
+  border-radius: 1.5em;
+  cursor: pointer;
+}
+.search-wrapper input {
+  font-size: 1em;
+  padding: 0 0.62em;
+  border: none;
+  border-bottom: 2px solid #033e23;
+  outline: none;
+  color: #222a43;
+}
+#result {
+  margin-top: 1.25em;
+}
+.container .flag-img {
+  display: block;
+  width: 30%;
+  min-width: 7.5em;
+  margin: 1.8em auto 1.2em auto;
+}
+.container h2 {
+  font-weight: 600;
+  color: #222a43;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  margin-bottom: 1.8em;
+}
+.data-wrapper {
+  margin-bottom: 1em;
+  letter-spacing: 0.3px;
+}
+.container h4 {
+  display: inline;
+  font-weight: 500;
+  color: #222a43;
+}
+.container span {
+  color: #5d6274;
+}
+.container h3 {
+  text-align: center;
+  font-size: 1.2em;
+  font-weight: 400;
+  color: #ff465a;
+}
+
+#clear-btn {
+  font-size: 1em;
+  background-color: #024b05;
+  color: #ffffff;
+  padding: 0.8em 0;
+  border: none;
+  border-radius: 1.5em;
+  cursor: pointer;
+  width: 8em;
+}
diff --git a/New_APIs/Recipe_Realm_API/rec.html b/New_APIs/Recipe_Realm_API/rec.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Poppins"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="rec.css" />
+    <title>RECIPE REALM</title>
+  </head>
+  <body>
+    <div class="container">
+      <div class="search-wrapper">
+        <input
+          type="text"
+          id="recipe-inp"
+          placeholder="Type in the name of the dish you're looking for a recipe of"
+        />
+        <button id="search-btn">Search</button>
+      </div>
+      <div id="result"></div>
+    </div>
+    <script src="rec.js"></script>
+  </body>
+</html>
diff --git a/New_APIs/Recipe_Realm_API/rec.js b/New_APIs/Recipe_Realm_API/rec.js
@@ -0,0 +1,65 @@
+let searchBtn = document.getElementById("search-btn");
+let recipeinp = document.getElementById("recipe-inp");
+let result = document.getElementById("result");
+
+searchBtn.addEventListener("click", () => {
+  let recipeName = recipeinp.value;
+  let finalURL = `https://www.themealdb.com/api/json/v1/1/search.php?s=${recipeName}`;
+  console.log(finalURL);
+  fetch(finalURL)
+    .then((response) => response.json())
+    .then((data) => {
+      if (data.meals) {
+        const meal = data.meals[0];
+        result.innerHTML = `
+                    <img src="${meal.strMealThumb}" class="flag-img">
+                    <h2>${meal.strMeal}</h2>
+                    <div class="wrapper">
+                        <div class="data-wrapper">
+                            <h4>Meal : </h4>
+                            <span>${meal.strMeal}</span>
+                        </div>
+                        <div class="data-wrapper">
+                            <h4>YouTube : </h4>
+                            <a href="${meal.strYoutube}" target="_blank">Watch on YouTube</a>                        
+                        </div>
+                        <div class="data-wrapper">
+                            <h4>Article : </h4>
+                            <a href="${meal.strSource}" target="_blank">Read Artcile</a>                        
+                        </div>
+                    <div class="wrapper">
+                        <div class data-wrapper">
+                            <h4>Category : </h4>
+                            <span>${meal.strCategory}</span>
+                        </div>
+                    </div>
+                    <div class="wrapper">
+                        <div class="data-wrapper">
+                            <h4>Area : </h4>
+                            <span>${meal.strArea}</span>
+                        </div>
+                    </div>
+                    <div class="wrapper">
+                        <div class="data-wrapper">
+                            <h4>Instructions : </h4>
+                            <span>${meal.strInstructions}</span>
+                        </div>
+                    </div>
+                    <button id="clear-btn">Close</button>
+                `;
+      } else {
+        result.innerHTML = `<h3>No results found for "${recipeName}"</h3>`;
+      }
+    })
+
+    .catch((error) => {
+      console.error(error);
+      result.innerHTML = `<h3>An error occurred while fetching data.</h3>`;
+    });
+});
+
+document.addEventListener("click", function (e) {
+  if (e.target && e.target.id === "clear-btn") {
+    result.innerHTML = "";
+  }
+});
diff --git a/New_APIs/Recipe_Realm_API/recipe_image.jpg b/New_APIs/Recipe_Realm_API/recipe_image.jpg