dishamodi0910 · SanskarSinghiit · Aug 9, 2024 · Aug 9, 2024 · Aug 9, 2024
diff --git a/New_APIs/FoodPix_API/README.md b/New_APIs/FoodPix_API/README.md
@@ -0,0 +1,21 @@
+# FoodPix API
+
+**FoodPix API** provides high-quality images of various foods based on user queries. It’s ideal for visual food discovery and enhancing content with appealing food imagery.
+
+## Features
+
+- **High-Quality Food Images**: Access vibrant, high-resolution images.
+- **Food Discovery**: Search for images by food type or category.
+- **Instant Results**: Quickly retrieve images with minimal latency.
+
+## Usage
+
+1. **Endpoint**: `GET /images`
+2. **Parameters**:
+   - `query` (string): The type of food you want to search for.
+3. **Response**:
+   - Returns an array of image URLs related to the food query.
+
+## Demo Video
+
+[FoodPix_API_demo.webm](https://github.com/user-attachments/assets/1fbcc77b-619d-4299-bfb3-9a973bfe8017)
diff --git a/New_APIs/FoodPix_API/assets/FoodPix_API_demo.webm b/New_APIs/FoodPix_API/assets/FoodPix_API_demo.webm
diff --git a/New_APIs/FoodPix_API/assets/preview.png b/New_APIs/FoodPix_API/assets/preview.png
diff --git a/New_APIs/FoodPix_API/index.html b/New_APIs/FoodPix_API/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+   <meta charset="UTF-8">
+   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <title>Hungry Monster</title>
+   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css">
+   <link rel="preconnect" href="https://fonts.gstatic.com">
+   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
+   <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<!-- code link: https://github.com/googlermridul/hungry
+live link: https://googlermridul.github.io/hungry/ -->
+
+   <div id="searchBox">
+      <div class="container">
+         <div class="row">
+            <div class="col">
+               <div class="input-group my-5">
+                  <div class="input-group-prepend">
+                     <span class="input-group-text"><i class="fas fa-search"></i></span>
+                  </div>
+                  <input id="inputField" type="text" class="form-control" placeholder="Search For Meal...">
+                  <div class="input-group-append">
+                     <button id="searchBtn" type="submit" class="btn">Search</button>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+   </div>
+
+
+   <div id="mealDetailSection" class="mb-5 mx-3">
+      <div class="container">
+         <div class="row">
+            <div id="mealDetails"></div>
+         </div>
+      </div>
+   </div>
+
+
+   <div id="mealSecion" class="mb-5">
+      <div class="container">
+         <div id="meal"></div>
+      </div>
+   </div>
+
+
+   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+   <script src="style.js"></script>
+</body>
+</html>
diff --git a/New_APIs/FoodPix_API/style.css b/New_APIs/FoodPix_API/style.css
@@ -0,0 +1,110 @@
+* {
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+}
+body {
+   font-family: 'Poppins', sans-serif;
+}
+h3 {
+   font-size: 24px;
+   color: #333;
+   font-weight: 600;
+}
+b {
+   font-weight: 600;
+}
+.btn:focus {
+   box-shadow: none;
+}
+
+#searchBox .input-group {
+   max-width: 400px;
+   margin: auto;
+   background: #ffeee8;
+   overflow: hidden;
+   border-radius: 5px;
+}
+#searchBox .input-group-prepend .input-group-text {
+   background: none;
+   border: none;
+   padding: 0 20px;
+}
+#searchBox .input-group-append #searchBtn {
+   padding: 0 25px;
+   background: #ff855f;
+   color: #fff;
+   font-size: 14px;
+   transition: .4s;
+}
+#searchBox .input-group-append #searchBtn:hover {
+   background: #ff6738;
+}
+#searchBox .input-group .form-control {
+   padding: 25px;
+   padding-left: 0;
+   border: none;
+   font-size: 14px;
+   background: #ffeee8;
+}
+#searchBox .input-group .form-control:focus {
+   box-shadow: none;
+}
+
+#mealDetailSection #mealDetails {
+    width: 500px;
+    margin: auto;
+    background: #ffeee8;
+    border-radius: 5px;
+}
+.item-details {
+   padding: 0 20px;
+}
+
+#mealDetailSection ul {
+   list-style: none;
+   margin-top: 15px;
+}
+#mealDetailSection ul li {
+   margin-bottom: 5px;
+   font-size: 14px;
+}
+#mealDetailSection ul li .fas {
+   color: #ff855f
+}
+
+.meal-box {
+   border: none;
+   background: #ffeee8;
+   border-radius: 5px;
+}
+.meal-box h5 {
+   color: #333;
+   font-weight: 600;
+   padding: 10px;
+}
+
+#meal{
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    margin: 0px;
+    align-items: center;
+    grid-gap: 15px;
+    position: relative;
+}
+#mealDetails {
+   margin: 0 15px;
+}
+
+.error {
+   position: absolute;
+   display: block;
+   width: 100%;
+   text-align: center;
+}
+
+@media (max-width: 768px) {
+   #meal{
+       grid-template-columns: repeat(2, 2fr) !important;
+   }
+}
diff --git a/New_APIs/FoodPix_API/style.js b/New_APIs/FoodPix_API/style.js
@@ -0,0 +1,104 @@
+const result = document.getElementById('mealDetails');
+
+// search button
+const searchButton = document.getElementById('searchBtn');
+searchButton.addEventListener('click', (event) => {
+   event.preventDefault();
+   const inputField = document.getElementById('inputField').value;
+   inputValue(inputField);
+});
+
+// input field code here
+function inputValue(inputField) {
+   result.style.display = "none";
+   const meal = document.getElementById('meal');
+   let url = "";
+   if (inputField.length === 1) {
+      url = `https://www.themealdb.com/api/json/v1/1/search.php?f=${inputField}`;
+      meal.innerHTML = null;
+      meal.innerHTML = null;
+   } else {
+      url = `https://www.themealdb.com/api/json/v1/1/search.php?s=${inputField}`;
+      meal.innerHTML = null;
+      meal.innerHTML = null;
+   }
+   fetch(url)
+      .then(res => res.json())
+      .then(data => {
+         displayData(data)
+      })
+}
+
+// all meal box here
+const displayData = data => {
+   let text = "";
+   if (data.meals) {
+      data.meals.forEach(item => {
+         const div = document.createElement('div');
+         const allMealInfo = text + `
+            <button onclick="showMealDetails('${item.strMeal}')" class="meal-box">
+               <div>
+                  <div>
+                     <img class="img-fluid rounded" src="${item.strMealThumb}"/>
+                     <div class="text">
+                        <h5>${item.strMeal}</h5>
+                     </div>
+                  </div>
+               </div>
+            </button>`;
+         div.innerHTML = allMealInfo;
+         meal.appendChild(div);
+      });
+   }
+   else {
+      result.style.display = "none"
+      const div = document.createElement('div');
+      text = `
+        <div class="error">
+            <h3>eisob amader restaurent e nai!</h3>
+        </div>`;
+      div.innerHTML = text;
+      meal.appendChild(div);
+   }
+}
+
+// meal details here
+const showMealDetails = (string) => {
+   url = `https://www.themealdb.com/api/json/v1/1/search.php?s=${string}`;
+   fetch(url)
+      .then(res => res.json())
+      .then(data => {
+         result.style.display = "block"
+         const div = document.createElement('div');
+         let mealInfo;
+         data.meals.forEach(perItem => {
+         if (string === perItem.strMeal) {
+            mealInfo = `
+               <div>
+                  <img src="${perItem.strMealThumb}" class="img-fluid rounded">
+                  <div class="item-details">
+                     <div class="my-3">
+                        <h3>${perItem.strMeal}</h3>
+                        <b>Ingredients</b>
+                     </div>
+                     <ul>
+                        <li>${perItem.strIngredient1}</li>
+                        <li>${perItem.strIngredient2}</li>
+                        <li>${perItem.strIngredient3}</li>
+                        <li>${perItem.strIngredient4}</li>
+                        <li>${perItem.strIngredient5}</li>
+                        <li>${perItem.strIngredient6}</li>
+                        <li>${perItem.strIngredient7}</li>
+                        <li>${perItem.strIngredient8}</li>
+                        <li>${perItem.strIngredient9}</li>
+                        <li>${perItem.strIngredient10}</li>
+                     </ul>
+                  </div>
+               </div>`;
+            }
+         })
+         div.innerHTML = mealInfo;
+         result.appendChild(div);
+      });
+   result.innerHTML = null;
+}
diff --git a/New_APIs/README.md b/New_APIs/README.md
@@ -22,6 +22,7 @@
 |[Temperature_API](./Temperature_API/)| Real-time global temperature data via HTTP requests from reliable weather sources
 |[Cryptocurrency_API](./Cryptocurrency_API/)|This demonstrates how a convert Cryptocurrency and spefic currency to dollars only|
 |[Weather_Forecast_API](./Weather_Forecast_API/)|This demonstrates we can know weather report via api and spefic locactions only|
+|[FoodPix_API](./FoodPix_API/)|Your gateway to high-quality food images for any culinary inspiration.|