UPDATE(New API): added Recipe API

dishamodi0910 · Oct 22, 2023 · ce442f4 · ce442f4
1 parent 751959d
commit ce442f4
Show file tree

Hide file tree

Showing 5 changed files with 191 additions and 1 deletion.
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/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