Added Food recipe finder

Vanilla-JS-Projects/Intermediate/Food-Recipe-Finder/README.md

@@ -0,0 +1,81 @@
+<h1 align='center'><b>💥 FoodRecipe-Finder 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+
+<div align='center'>
+
+  ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) 
+   ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) 
+ ![Bootstrap](https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge&logo=bootstrap&logoColor=white)
+  ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 
+  <!-- ![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) -->
+  <!-- ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) -->
+  <!-- ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) -->
+  <!-- ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) -->
+  <!-- ![Web3.js](https://img.shields.io/badge/web3.js-F16822?style=for-the-badge&logo=web3.js&logoColor=white) -->
+  <!-- ![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB) -->
+  <!-- ![Angular.js](https://img.shields.io/badge/angular.js-%23E23237.svg?style=for-the-badge&logo=angularjs&logoColor=white) -->
+  <!-- ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) -->
+  <!-- ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) -->
+  <!-- ![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D) -->
+  <!-- ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white) -->
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <!-- <p>Add Description of the project</p> -->
+    <p>Ever stuck at finding the best recipe to cook. FoodRecipe-Finder helps you to find the best recipe details.</p>
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<!-- Add steps how to run this project -->
+<p>To run this project locally, follow these steps:
+
+- Fork this repository.
+- Clone the forked repository.
+- Open index.html in your web browser to start your culinary exploration.
+
+</p>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<!-- add the screenshot of the project (Mandatory) -->
+
+![FoodRecipe](https://raw.githubusercontent.com/AmrutaJayanti/WebMasterLog/FoodRecipe/Vanilla-JS-Projects/Intermediate/Food-Recipe-Finder/screenshot.webp)
+
+
+
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Amruta Jayanti</i></b> 👦</h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/amruta-jayanti-064523254?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/AmrutaJayanti'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>

Vanilla-JS-Projects/Intermediate/Food-Recipe-Finder/index.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <title>Food Recipe Finder</title>
+    <style>
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+            100% { transform: scale(1); }
+        }
+
+       .btn-animated {
+            animation: pulse 2s infinite alternate;
+        }
+
+        body {
+            background-color: rgb(179, 223, 236);
+        }
+    </style>
+</head>
+<body>
+    <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
+        <div class="container-fluid">
+            <div class="row w-100">
+                <a class="navbar-brand col-8">🍔 FoodRecipe Finder 🍕</a>
+                <form class="form-inline col-md-6 d-flex justify-content-end">
+                    <input id="searchQuery" class="form-control me-2" type="search" placeholder="Search for Recipe..." aria-label="Search">
+                    <button class="btn btn-outline-success btn-animated" type="button" onclick="searchRecipe()">Search</button>
+                </form>
+            </div>
+        </div>
+    </nav>
+    <div class="container-fluid">
+        <h3 style="color: red;"><i>Popular Searches...</i></h3>
+        <div class="row">
+            <div id="pasta" class="col">
+                <img src="https://tse1.mm.bing.net/th?id=OIP.ffFYBa77Mbwdy_hpjz3cjgHaFj&pid=Api&P=0&h=180">
+                <button class="btn btn-outline-success col" onclick="displayRecipeDetails('716429')">Search Recipe</button>
+            </div>
+            <div id="pizza" class="col">
+                <img src="https://up.yimg.com/ib/th?id=OIP.6nUA8YoAJKgAjt2EC-facgHaFk&pid=Api&rs=1&c=1&qlt=95&w=138&h=104">
+                <button class="btn btn-outline-success col" onclick="displayRecipeDetails('209128')">Search Recipe</button>
+            </div>
+        </div>
+        <div id="recipe-details" class="row">
+            <h2 id="recipe-title"></h2>
+            <ul id="ingredients-list"></ul>
+            <p id="instructions"></p>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
+
+    <script>
+        function searchRecipe() {
+            const query = document.getElementById('searchQuery').value.trim();
+            if (!query) return;
+
+            const apiKey = '2ab606a3174a49fe8399fed5cb3f775d';
+            const apiUrl = `https://api.spoonacular.com/recipes/search?query=${query}&number=5&apiKey=${apiKey}`;
+
+            fetch(apiUrl)
+               .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Network response was not ok');
+                    }
+                    return response.json();
+                })
+               .then(data => {
+                    if (data.results.length > 0) {
+                        // Assuming we choose the first recipe for simplicity
+                        const recipeId = data.results[0].id;
+                        displayRecipeDetails(recipeId);
+                    } else {
+                        console.error('No recipes found');
+                    }
+                })
+               .catch(error => {
+                    console.error('There was a problem fetching data:', error);
+                });
+        }
+
+        function displayRecipeDetails(recipeId) {
+    const apiKey = '2ab606a3174a49fe8399fed5cb3f775d';
+    const apiUrl = `https://api.spoonacular.com/recipes/${recipeId}/information?apiKey=${apiKey}`;
+
+    fetch(apiUrl)
+       .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+       })
+       .then(data => {
+            const recipeTitle = data.title;
+            const ingredients = data.extendedIngredients;
+            const instructions = data.instructions;
+
+            document.getElementById('recipe-title').innerText = recipeTitle;
+            document.getElementById('ingredients-list').innerHTML = '';
+            for (const ingredient of ingredients) {
+                const li = document.createElement('li');
+                li.innerText = ingredient.original;
+                document.getElementById('ingredients-list').appendChild(li);
+            }
+            document.getElementById('instructions').innerText = instructions;
+        })
+       .catch(error => {
+            console.error('There was a problem fetching recipe details:', error);
+        });
+}
+
+    </script>
+</body>
+</html>