Recipe Finder 😎 (#483)

Vikash-8090-Yadav · Jul 20, 2023 · 1c3df19 · 1c3df19
1 parent 14a8b35
commit 1c3df19
Show file tree

Hide file tree

Showing 4 changed files with 238 additions and 0 deletions.
diff --git a/Frontend-Projects/Recipe-Finder-Website/README.md b/Frontend-Projects/Recipe-Finder-Website/README.md
@@ -0,0 +1,28 @@
+# RECIPE FINDER WEBSITE
+
+This website can find so many recipes of a single products and also tell you how to make it.
+
+--- 
+
+## **Tech Stack 🎮**
+
+- HTML
+- CSS
+- JS
+
+<br>
+
+## **Working Video 📹**
+
+https://github.com/Vikash-8090-Yadav/Future.WebNet/assets/114330097/02d4f190-4c22-4050-ba47-3a6d9fd8718c
+
+<br>
+
+## **Creator 👦**
+
+[Avdhesh Varshney](https://github.com/Avdhesh-Varshney)
+
+<br>
+
+### Thanks for using this project !
+
diff --git a/Frontend-Projects/Recipe-Finder-Website/index.html b/Frontend-Projects/Recipe-Finder-Website/index.html
@@ -0,0 +1,43 @@
+<!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">
+
+    <!-- Logo of the website -->
+    <link rel="shortcut icon" href="https://seeklogo.com/images/F/food-logo-59E5A73AFD-seeklogo.com.png"
+        type="image/x-icon">
+
+    <!-- Main stylesheet -->
+    <link rel="stylesheet" href="./style.css">
+
+    <!-- Title of the website -->
+    <title>Recipe Finder</title>
+</head>
+
+<body>
+    <!-- Main container of the website -->
+    <div class="container">
+        <h1>Recipe Finder</h1>
+
+        <p>
+            Created By <a href="https://github.com/Avdhesh-Varshney">Avdhesh Varshney</a>
+        </p>
+
+        <!-- Form for the user to take input -->
+        <form>
+            <input type="text" id="search" placeholder="Enter ingredients">
+            <button type="submit" id="submit" class="btn">Search</button>
+        </form>
+
+        <!-- Output container to show results -->
+        <div id="results"></div>
+    </div>
+
+    <!-- Main javascript file -->
+    <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/Frontend-Projects/Recipe-Finder-Website/script.js b/Frontend-Projects/Recipe-Finder-Website/script.js
@@ -0,0 +1,36 @@
+// Intialising global variables
+const searchForm = document.querySelector('form');
+const searchInput = document.querySelector('#search');
+const resultsList = document.querySelector('#results');
+
+// Search form submit button
+searchForm.addEventListener('submit', (e) => {
+    e.preventDefault();
+    searchRecipes();
+});
+
+// Fetching data from the api of a particular product
+async function searchRecipes() {
+    const searchValue = searchInput.value.trim();
+    const response = await fetch(`https://api.edamam.com/search?q=${searchValue}&app_id=7aa516a5&app_key=dc836a223fb788b11ae390504d9e97ce&from=0&to=10`);
+    const data = await response.json();
+    displayRecipes(data.hits);
+}
+
+// Showing data to the user
+function displayRecipes(recipes) {
+    let html = '';
+    recipes.forEach((recipe) => {
+        html += `
+        <div>
+            <img src="${recipe.recipe.image}" alt="${recipe.recipe.label}">
+            <h3>${recipe.recipe.label}</h3>
+            <ul>
+                ${recipe.recipe.ingredientLines.map(ingredient => `<li>${ingredient}</li>`).join('')}
+            </ul>
+            <a href="${recipe.recipe.url}" target="_blank">View Recipe</a>
+        </div> 
+        `
+    })
+    resultsList.innerHTML = html;
+}
diff --git a/Frontend-Projects/Recipe-Finder-Website/style.css b/Frontend-Projects/Recipe-Finder-Website/style.css
@@ -0,0 +1,131 @@
+/* Default settings */
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	text-decoration: none;
+}
+
+body {
+	background-color: #f5f5f5;
+	font-family: Arial, sans-serif;
+	font-size: 16px;
+	line-height: 1.5;
+}
+
+.container h1 {
+	color: #333;
+	font-size: 32px;
+	margin-top: 1rem;
+	text-align: center;
+	transition: all 0.4s;
+}
+
+.container p {
+	color: #333;
+	text-align: center;
+	transition: all 0.4s;
+	margin-top: 0.5rem;
+}
+
+.container p a {
+	color: #333;
+}
+
+.container p a:hover {
+	text-decoration: underline;
+}
+
+/* Styling the whole form */
+form {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	margin: 1.5rem 0;
+	gap: 1rem;
+	transition: all 0.4s;
+}
+
+input[type="text"] {
+	background-color: #fff;
+	border: 2px solid #ccc;
+	border-radius: 8px;
+	font-size: 16px;
+	padding: 12px;
+	width: 300px;
+	outline: none;
+}
+
+/* Styling the input button */
+.btn {
+	cursor: pointer;
+	background-color: #007bff;
+	border: none;
+	border-radius: 8px;
+	color: #fff;
+	cursor: pointer;
+	font-size: 16px;
+	padding: 12px 20px;
+	transition: background-color 0.2s;
+}
+
+.btn:hover {
+	background-color: #0069d9;
+}
+
+/* Styling the result container with all boxes for the recipes */
+#results {
+	display: grid;
+	gap: 40px;
+	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+	margin: 40px 10px;
+}
+
+#results>div {
+	background-color: #fff;
+	border-radius: 8px;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+	display: flex;
+	flex-direction: column;
+	padding: 20px;
+}
+
+#results img {
+	border-radius: 8px;
+	margin-bottom: 20px;
+	object-fit: cover;
+	height: 200px;
+	width: 100%;
+}
+
+#results h3 {
+	color: #333;
+	font-size: 24px;
+	margin: 0;
+}
+
+#results ul {
+	margin: 0;
+	padding: 0;
+}
+
+#results li {
+	list-style: none;
+	margin-bottom: 10px;
+}
+
+#results a {
+	background-color: #007bff;
+	border-radius: 8px;
+	color: #fff;
+	font-size: 16px;
+	padding: 12px 20px;
+	text-align: center;
+	text-decoration: none;
+	transition: background-color 0.2s;
+	margin-top: auto;
+}
+
+#results a:hover {
+	background-color: #0069d9;
+}