diff --git a/New_APIs/FoodPix_API/README.md b/New_APIs/FoodPix_API/README.md new file mode 100644 index 0000000..9a0bef3 --- /dev/null +++ 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 new file mode 100644 index 0000000..f660bf6 Binary files /dev/null and b/New_APIs/FoodPix_API/assets/FoodPix_API_demo.webm differ diff --git a/New_APIs/FoodPix_API/assets/preview.png b/New_APIs/FoodPix_API/assets/preview.png new file mode 100644 index 0000000..da01a53 Binary files /dev/null and b/New_APIs/FoodPix_API/assets/preview.png differ diff --git a/New_APIs/FoodPix_API/index.html b/New_APIs/FoodPix_API/index.html new file mode 100644 index 0000000..820a64b --- /dev/null +++ b/New_APIs/FoodPix_API/index.html @@ -0,0 +1,58 @@ + + + + + + + Hungry Monster + + + + + + + + + + + + + +
+
+
+
+
+
+
+ + +
+
+
+
+
+ + + + + + + diff --git a/New_APIs/FoodPix_API/style.css b/New_APIs/FoodPix_API/style.css new file mode 100644 index 0000000..7ce3792 --- /dev/null +++ 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 new file mode 100644 index 0000000..a02751d --- /dev/null +++ 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 + ` + `; + div.innerHTML = allMealInfo; + meal.appendChild(div); + }); + } + else { + result.style.display = "none" + const div = document.createElement('div'); + text = ` +
+

eisob amader restaurent e nai!

+
`; + 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 = ` +
+ +
+
+

${perItem.strMeal}

+ Ingredients +
+ +
+
`; + } + }) + div.innerHTML = mealInfo; + result.appendChild(div); + }); + result.innerHTML = null; +} diff --git a/New_APIs/README.md b/New_APIs/README.md index 015aa72..aa8494b 100644 --- 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.|