-
Notifications
You must be signed in to change notification settings - Fork 186
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* recipe-hunter * readme-added * readme-update
- Loading branch information
1 parent
48ccd3e
commit ff839d4
Showing
6 changed files
with
357 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| <h1 align='center'><b>💥 RECIPE HUNTER 💥</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'> | ||
|
|
||
|  | ||
|  | ||
| <!--  --> | ||
|  | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| </div> | ||
|
|
||
|
|
||
|  | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| ## :zap: Description 📃 | ||
|
|
||
| <div> | ||
| <!-- <p>Add Description of the project</p> --> | ||
| <p>This is the app to find your own favorite recipe and full method to cook it.</p> | ||
| </div> | ||
|
|
||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
|
|
||
| ## :zap: Screenshots 📸 | ||
| <!-- add the screenshot of the project (Mandatory) --> | ||
|  | ||
|
|
||
|
|
||
|  | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| <h4 align='center'>Developed By <b><i>ADITYA SINGH</i></b> 👦</h4> | ||
| <p align='center'> | ||
| <a href='https://www.linkedin.com/in/aditya-singh-64660a164'> | ||
| <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' /> | ||
| </a> | ||
| <a href='https://github.com/aditya9855'> | ||
| <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 ❤️ by 🌟 this repository!</h3> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <title>Recipe Hunter</title> | ||
| </head> | ||
| <body> | ||
|
|
||
|
|
||
|
|
||
| <!-- Main container for the website --> | ||
| <div class="container"> | ||
| <h1>Welcome to Recipe Hunter</h1> | ||
|
|
||
|
|
||
| <!-- Searchbar section --> | ||
| <div class="searchbar"> | ||
| <h2>Find Your Favorite Recipes</h2> | ||
| <div> | ||
| <input size="30" type="text" class="input" id="searchinput" placeholder="Search your favorite recipe" autocomplete="off"> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <div id="result"></div> | ||
|
|
||
|
|
||
|
|
||
|
|
||
| <!-- Footer --> | ||
| <div class="footer"> | ||
| <p>© 2024 Recipe Hunter | <a href="#privacy">Privacy Policy</a> | <a href="#terms">Terms of Use</a></p> | ||
| </div> | ||
|
|
||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
|
|
||
| const inputBox = document.getElementById("searchinput"); | ||
| const searchBtn = document.getElementsByClassName("btn")[0]; | ||
| const resultDiv = document.getElementById("result"); | ||
|
|
||
| function createCard(id, baseURL, image, title, sourceUrl,min) { | ||
| return ` | ||
| <div key="${id}" class="card"> | ||
| <div class="icard"> | ||
| <img class="img" src="${baseURL}${image}" alt="" /> | ||
| <p class="name">${title}</p> | ||
| <p class="time">${min} min</p> | ||
| </div> | ||
| <a href="${sourceUrl}"> | ||
| <button class="btnde"> | ||
| View Recipe | ||
| </button> | ||
| </a> | ||
| </div> | ||
| ` | ||
| } | ||
|
|
||
| const search = async () => { | ||
| var searchInput = inputBox.value.toLowerCase(); | ||
| console.log(searchInput) | ||
| const apiUrl = `https://api.spoonacular.com/recipes/search?query=${searchInput}&number=20&apiKey=2ab606a3174a49fe8399fed5cb3f775d`; | ||
| const resp = await fetch(apiUrl); | ||
| const data = await resp.json(); | ||
| console.log(data); | ||
| resultDiv.innerHTML = ""; | ||
| const resultsData = data.results; | ||
| resultsData.map((item, id) => { | ||
| resultDiv.innerHTML += createCard(id, data.baseUri, item.image, item.title,item.sourceUrl, item.readyInMinutes); | ||
| }); | ||
| if(resultsData.length==0){ | ||
| resultDiv.innerHTML = "No Result Found"; | ||
| } | ||
| } | ||
|
|
||
| inputBox.addEventListener('input', search()); | ||
| inputBox.addEventListener('input', () => search()); | ||
|
|
204 changes: 204 additions & 0 deletions
204
Vanilla-JS-Projects/Intermediate/Recipe-Hunter/style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,204 @@ | ||
| /* Basic Reset */ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| font-family: Arial, sans-serif; | ||
| background-color: #000000; | ||
| color: #ffffff; | ||
| } | ||
|
|
||
|
|
||
| /* Main container */ | ||
| .container { | ||
| padding: 20px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| /* Searchbar styles */ | ||
| .searchbar { | ||
| margin: 20px auto; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .searchbar h2 { | ||
| font-size: 24px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .input { | ||
| width: 300px; | ||
| height: 50px; | ||
| border-radius: 12px; | ||
| border: 2px solid #efebeb; | ||
| padding-left: 10px; | ||
| outline: none; | ||
| } | ||
|
|
||
| #result { | ||
| margin:auto; | ||
| width: 1300px; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: center; | ||
| gap: 30px; | ||
| margin-bottom: 5rem; | ||
| } | ||
| .btnde{ | ||
| width: 150px; | ||
| height: 40px; | ||
| align-items: center; | ||
| border-radius: 10px; | ||
| border: 1px solid #191c24; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .btnde:active { | ||
| box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24); | ||
| } | ||
|
|
||
| .icard{ | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-grow: 1; | ||
| gap: 5px; | ||
| } | ||
| .card { | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: 20px; | ||
| gap: 10px; | ||
| width: 300px; | ||
| border-radius: 10px; | ||
| background-color: #191c24; | ||
| } | ||
|
|
||
| .card:hover { | ||
| transform: scale(1.1); | ||
| transition: all 0.3s; | ||
| } | ||
|
|
||
| .name { | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| .time { | ||
| color: #6463638f; | ||
| font-weight: 200; | ||
| font-size: smaller; | ||
| } | ||
|
|
||
| .img{ | ||
| height: 200px; | ||
| border-radius: 10px; | ||
| } | ||
|
|
||
| .img:hover { | ||
| transform: scale(1.05); | ||
| transition: all 0.5s; | ||
| } | ||
|
|
||
| /* Footer styles */ | ||
| .footer { | ||
| background-color: #191c24; | ||
| text-align: center; | ||
| padding: 10px 0; | ||
| position: fixed; | ||
| width: 100%; | ||
| bottom: 0; | ||
| } | ||
|
|
||
| .footer a { | ||
| color: #fff; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| /* Smartphones (portrait and landscape) */ | ||
| @media (max-width: 600px) { | ||
| .input { | ||
| width: 90%; | ||
| height: 40px; | ||
| } | ||
|
|
||
| .card { | ||
| width: 80%; | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| #result { | ||
| width: 100%; | ||
| gap: 20px; | ||
| } | ||
|
|
||
| .img { | ||
| height: 150px; | ||
| } | ||
|
|
||
| .btnde { | ||
| width: 100px; | ||
| height: 35px; | ||
| } | ||
|
|
||
| .footer { | ||
| font-size: 12px; | ||
| } | ||
| } | ||
|
|
||
| /* Tablets (iPad, etc.) */ | ||
| @media (min-width: 601px) and (max-width: 1024px) { | ||
| .input { | ||
| width: 80%; | ||
| height: 45px; | ||
| } | ||
|
|
||
| .card { | ||
| width: 45%; | ||
| } | ||
|
|
||
| #result { | ||
| width: 90%; | ||
| gap: 20px; | ||
| } | ||
|
|
||
| .img { | ||
| height: 180px; | ||
| } | ||
|
|
||
| .btnde { | ||
| width: 130px; | ||
| height: 35px; | ||
| } | ||
|
|
||
| .footer { | ||
| font-size: 14px; | ||
| } | ||
| } | ||
|
|
||
| /* Desktop */ | ||
| @media (min-width: 1025px) { | ||
| .input { | ||
| width: 400px; | ||
| height: 50px; | ||
| } | ||
|
|
||
| .card { | ||
| width: 300px; | ||
| } | ||
|
|
||
| #result { | ||
| width: 1300px; | ||
| gap: 30px; | ||
| } | ||
|
|
||
| .img { | ||
| height: 200px; | ||
| } | ||
|
|
||
| .btnde { | ||
| width: 150px; | ||
| height: 40px; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters