Merge pull request #324 from kartikmehta18/code

Add FoodRecipe_API
dishamodi0910 · Jul 20, 2024 · e0c8c91 · e0c8c91
2 parents 78d9961 + b510c09
commit e0c8c91
Show file tree

Hide file tree

Showing 6 changed files with 248 additions and 0 deletions.
diff --git a/Existing_API_Collection/FoodRecipe_API/README.md b/Existing_API_Collection/FoodRecipe_API/README.md
@@ -0,0 +1,27 @@
+# Dictionary API
+In this project, we make use of the MealDB API. This API is easy to use. I would suggest this project for people who have basic knowledge of fetch()
+
+## Features
+- The project consists of search input and a search button. The user enters the dish name of his choice into this input and hits the search button. When the user clicks on the search button, it displays an image of the respective meal, its name, and the country of origin.
+
+Along with this, we also show a list of ingredients along with the measure. Next to the ingredients, we have a ‘View Recipe’ button. When the user clicks on this button, a pop up opens up with the instructions to cook the meal.
+## Technologies Used
+- HTML
+- CSS
+- JavaScript
+- API ( for fetching data )
+
+# API Integration
+This application uses `https://www.themealdb.com/api/json/v1/1/search.php?s=` to fetch the data.
+
+## Installation
+To set up the Dictionary API locally, follow these steps:
+
+- Clone the repository
+- Switch to Existing_API_Collection folder `cd Existing_API_Collection`
+- Now switch to CountryAPI folder `cd FoodRecipe_API`
+- Run command `.\/index.html`
+
+## Screenshots
+![Screenshot (395)](![alt text](image.png))
+![alt text](image-1.png)
diff --git a/Existing_API_Collection/FoodRecipe_API/image-1.png b/Existing_API_Collection/FoodRecipe_API/image-1.png
diff --git a/Existing_API_Collection/FoodRecipe_API/image.png b/Existing_API_Collection/FoodRecipe_API/image.png
diff --git a/Existing_API_Collection/FoodRecipe_API/index.html b/Existing_API_Collection/FoodRecipe_API/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css" >
+    <title>Document</title>
+</head>
+<body>
+
+    <div class="container">
+        <div class="search">
+            <input type="text" placeholder="Type dish name" id="inp" />
+            <button id ="btn">Search</button>
+        </div>
+        <div id="result"></div>
+      </div>
+
+        </div>
+    </div>
+
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/FoodRecipe_API/script.js b/Existing_API_Collection/FoodRecipe_API/script.js
@@ -0,0 +1,69 @@
+let result = document.getElementById("result");
+let btn = document.getElementById("btn");
+
+let url = "https://www.themealdb.com/api/json/v1/1/search.php?s=";
+
+
+btn.addEventListener("click", () => {
+    let userInp = document.getElementById("inp").value;
+    if (userInp.length == 0) {
+      result.innerHTML = `<h3>Input Field Cannot Be Empty</h3>`;
+    } else {
+      fetch(url + userInp)
+        .then((response) => response.json())
+        .then((data) => {
+          let myMeal = data.meals[0];
+          console.log(myMeal);
+          console.log(myMeal.strMealThumb);
+          console.log(myMeal.strMeal);
+          console.log(myMeal.strArea);
+          console.log(myMeal.strInstructions);
+          let count = 1;
+          let ingredients = [];
+          for (let i in myMeal) {
+            let ingredient = "";
+            let measure = "";
+            if (i.startsWith("strIngredient") && myMeal[i]) {
+              ingredient = myMeal[i];
+              measure = myMeal[`strMeasure` + count];
+              count += 1;
+              ingredients.push(`${measure} ${ingredient}`);
+            }
+          }
+          console.log(ingredients);
+          result.innerHTML = `
+      <img src=${myMeal.strMealThumb}>
+      <div class="details">
+          <h2>${myMeal.strMeal}</h2>
+          <h4>${myMeal.strArea}</h4>
+      </div>
+      <div id="ingredient-con"></div>
+      <div id="recipe">
+          <button id="hide-recipe">X</button>
+          <pre id="instructions">${myMeal.strInstructions}</pre>
+      </div>
+      <button id="show-recipe">View Recipe</button>
+      `;
+          let ingredientCon = document.getElementById("ingredient-con");
+          let parent = document.createElement("ul");
+          let recipe = document.getElementById("recipe");
+          let hideRecipe = document.getElementById("hide-recipe");
+          let showRecipe = document.getElementById("show-recipe");
+          ingredients.forEach((i) => {
+            let child = document.createElement("li");
+            child.innerText = i;
+            parent.appendChild(child);
+            ingredientCon.appendChild(parent);
+          });
+          hideRecipe.addEventListener("click", () => {
+            recipe.style.display = "none";
+          });
+          showRecipe.addEventListener("click", () => {
+            recipe.style.display = "block";
+          });
+        })
+        .catch(() => {
+          result.innerHTML = `<h3>Invalid Input</h3>`;
+        });
+    }
+  });
diff --git a/Existing_API_Collection/FoodRecipe_API/style.css b/Existing_API_Collection/FoodRecipe_API/style.css
@@ -0,0 +1,127 @@
+*{ padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body{
+    background-color: rgb(238, 63, 63);
+}
+.container {
+    background-color: rgb(249, 249, 249);
+    font-size: 16px;
+    padding: 3em 2.8em;
+    width: 90vm;
+    max-width: 32em;
+    position: absolute;
+    transform: translateX(-50%);
+    left: 50%;
+    top: 1em;
+    border-radius: 5px;
+    box-shadow: 0 1.2em 2.5em rgba(61, 61, 61, 0.476);
+
+}
+
+.search {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 9fr 3fr;
+    gap :1.2em;
+}
+#inp{
+    font-size: 1em;
+
+    padding: 0.6em;
+    border:none;
+    outline: none;
+    border-bottom: 2px solid rgb(238, 63, 63);
+}
+#btn{
+    font-size: 15px;
+    background-color: rgb(238, 63, 63);
+    border: none;
+    font-weight: 600;
+    border-radius: 5px;
+    cursor: pointer;
+
+}
+
+img {
+    display: block;
+    width: 50%;
+    margin: 1.8em auto 0 auto;
+  }
+  .details {
+    background-color: #f4c531;
+    position: relative;
+    margin: -4.3em 0 0 0;
+    text-align: center;
+    padding: 0.6em 0;
+  }
+  .details h2 {
+    font-size: 1.2em;
+    font-weight: 600;
+  }
+  .details h4 {
+    font-size: 1em;
+    font-weight: 400;
+  }
+  #show-recipe {
+    font-size: 1em;
+    position: relative;
+    left: 75%;
+    padding: 0.9em 0.6em;
+    background-color: #f4c531;
+    border: none;
+    top: 1.5em;
+    border-radius: 0.3em;
+    font-weight: 600;
+  }
+  #recipe {
+    position: absolute;
+    background-color: #ffffff;
+    min-height: 100%;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    border-radius: 0.6em;
+    display: none;
+  }
+  #recipe pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    padding: 2.5em 1.2em 1.2em 1.2em;
+    font-size: 0.92em;
+    color: #303040;
+  }
+  #hide-recipe {
+    font-size: 1em;
+    position: relative;
+    width: 1.8em;
+    height: 1.8em;
+    background-color: #f4c531;
+    border: none;
+    top: 1.2em;
+    left: 90%;
+    border-radius: 0.3em;
+  }
+  ul {
+    font-size: 1em;
+    position: relative;
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: 0.8em 1.1em;
+    padding: 1.2em 0 0 1.2em;
+    color: #303040;
+    text-transform: capitalize;
+  }
+  h3 {
+    text-align: center;
+    margin-top: 1.8em;
+    color: #202030;
+  }
+  @media screen and (max-width: 500px) {
+    .container {
+      font-size: 14px;
+    }
+  }