Recipe Finder in application JavaScript | electro4u
Recipe Finder in JavaScript:
Build an App to Help Users Find Recipes Based on the Ingredients They Have Cooking can be a lot of fun, but it can also be a challenge to come up with new and exciting recipes to make. Especially if you're trying to use up ingredients that you already have on hand.
That's where a recipe finder app can come in handy. A recipe finder app can help you find recipes that match the ingredients you have on hand, so you can avoid wasting food and get creative in the kitchen.
In this tutorial, we'll show you how to build a simple recipe finder app using JavaScript. We'll integrate with the Spoonacular API to get relevant recipes, and we'll use HTML and CSS to create a user interface.
Getting started
To get started, you'll need to create a new directory for your project. Then, create an HTML file called index.html and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>Recipe Finder</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Recipe Finder</h1>
<input type="text" id="search" placeholder="Enter ingredients">
<button id="find">Find recipes</button>
<div id="results"></div>
<script src="script.js"></script>
</body>
</html>This code will create a basic HTML page with a title, a search bar, a button, and a div to display the results.
Next, create a CSS file called style.css and add the following code:
body {
font-family: sans-serif;
}
h1 {
text-align: center;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
button {
background-color: #000;
color: #fff;
padding: 10px;
margin-bottom: 10px;
}
div#results {
width: 100%;
padding: 10px;
}This code will style the HTML elements on your page.
Finally, create a JavaScript file called script.js and add the following code:
// Get the search bar and find button elements
const searchBar = document.querySelector('#search');
const findButton = document.querySelector('#find');
// Add an event listener to the find button
findButton.addEventListener('click', async () => {
// Get the search term from the search bar
const searchTerm = searchBar.value;
// Make an API call to the Spoonacular API
const response = await fetch(`https://api.spoonacular.com/recipes/complexSearch?apiKey=YOUR_API_KEY&query=${searchTerm}`);
const data = await response.json();
// Display the results
const resultsDiv = document.querySelector('#results');
resultsDiv.innerHTML = '';
for (const recipe of data.results) {
const recipeLink = document.createElement('a');
recipeLink.href = recipe.sourceUrl;
recipeLink.textContent = recipe.title;
resultsDiv.appendChild(recipeLink);
}
});This code will add an event listener to the find button. When the user clicks the button, the code will make an API call to the Spoonacular API to get recipes that match the search term. The code will then display the results in the div element with the ID results.
To use the app
Once you've written the code, you can open the index.html file in a web browser to try out the app.
To search for recipes, simply enter the ingredients you have on hand in the search bar and click the find button. The app will then display a list of recipes that match your search.
You can click on any of the recipes to view more information, including the ingredients, instructions, and a link to the source recipe.
Conclusion
This is just a basic example of a recipe finder app. You can add more features to your app, such as the ability to filter recipes by dietary restrictions, cooking time, or cuisine type. You can also use a different recipe API
Top Resources Now:
- Mozilla Developer Network
- JavaScript.info
- freeCodeCamp
- W3Schools JavaScript
- Eloquent JavaScript
- JavaScript MDN Web Docs
Enroll Now:
[JavaScript 2023-2024: From Scratch to Advanced] "Start Supercharging Your Productivity!"
Contact Us:
- For any inquiries, please email us at [info@electro4u.net].
- Follow us on insta [ electro4u_offical_ ] for updates and tips.
Note: If you encounter any issues or specific errors when running this program, please let me know and I'll be happy to help debug them!