diff --git a/.gitignore b/.gitignore index 6a7d6d8..fe9f239 100644 --- a/.gitignore +++ b/.gitignore @@ -127,4 +127,5 @@ dist .yarn/unplugged .yarn/build-state.yml .yarn/install-state.gz -.pnp.* \ No newline at end of file +.pnp.* +.vscode diff --git a/New_APIs/Recipe_Realm_API/README.md b/New_APIs/Recipe_Realm_API/README.md new file mode 100644 index 0000000..57a8cba --- /dev/null +++ b/New_APIs/Recipe_Realm_API/README.md @@ -0,0 +1,45 @@ +# Recipe API Web App + +This is a simple web application that allows you to search for recipes using the MealDB API and display detailed information about a selected recipe, including its name, category, area, instructions, ingredients, and a link to a video demonstration (if available). + +## Features + +- Search for recipes by name. +- Display detailed information about the selected recipe. +- View a list of ingredients separated by commas. +- Access a link to a YouTube video for a recipe (if available). + +## Technologies Used + +- HTML +- CSS +- JavaScript + +## Usage + +1. Clone the repository to your local machine: + +2. Open the `index.html` file in your web browser. + +3. Enter the name of the dish you're looking for and click the "Search" button. + +4. The recipe details, including ingredients and a YouTube link (if available), will be displayed. + +## Code Explanation + +- The code uses HTML for the structure and layout of the web page. +- CSS is used for styling and layout adjustments. +- JavaScript is responsible for handling user input, making API requests, and dynamically updating the content. + +## API Integration + +- This web app integrates with the MealDB API to fetch and display recipe data. +- It uses the API's search endpoint to retrieve recipe information based on user input. + +## Credits + +- [MealDB API](https://www.themealdb.com/api.php) + +## License + +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. diff --git a/New_APIs/Recipe_Realm_API/rec.css b/New_APIs/Recipe_Realm_API/rec.css new file mode 100644 index 0000000..f0bb21f --- /dev/null +++ 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 new file mode 100644 index 0000000..981f9ef --- /dev/null +++ b/New_APIs/Recipe_Realm_API/rec.html @@ -0,0 +1,27 @@ + + + + + + + + RECIPE REALM + + +
+
+ + +
+
+
+ + + diff --git a/New_APIs/Recipe_Realm_API/rec.js b/New_APIs/Recipe_Realm_API/rec.js new file mode 100644 index 0000000..80f8f4a --- /dev/null +++ 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 = ` + +

${meal.strMeal}

+
+
+

Meal :

+ ${meal.strMeal} +
+
+

YouTube :

+ Watch on YouTube +
+
+

Article :

+ Read Artcile +
+
+
+

Category :

+ ${meal.strCategory} +
+
+
+
+

Area :

+ ${meal.strArea} +
+
+
+
+

Instructions :

+ ${meal.strInstructions} +
+
+ + `; + } else { + result.innerHTML = `

No results found for "${recipeName}"

`; + } + }) + + .catch((error) => { + console.error(error); + result.innerHTML = `

An error occurred while fetching data.

`; + }); +}); + +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 new file mode 100644 index 0000000..e341409 Binary files /dev/null and b/New_APIs/Recipe_Realm_API/recipe_image.jpg differ