In this project, we're developing a recipe book application that features a variety of recipes obtained through a free recipe API. We need an API key to access this API. Each time the page is refreshed, a new set of recipes with distinct ingredients will be displayed. Additionally, a link is provided to access the recipe website.
Create these three files, copy the code into each one, then open index.html with Live Server.
recipe-book-app/ ├── index.html ├── style.css └── index.js
<!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" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Recipe Book App</h1>
</header>
<div class="container">
<ul id="recipe-list" class="recipe-list">
<!-- <li class="recipe-item">
<img
src="https://spoonacular.com/recipeImages/12345-312x231.jpg"
alt="Recipe 1"
/>
<h2>Recipe 1</h2>
<p>
<strong>Ingredients:</strong> Ingredient 1, Ingredient 2, Ingredient
3
</p>
<a href="#">View Recipe</a>
</li>
<li class="recipe-item">
<img
src="https://spoonacular.com/recipeImages/12545-312x231.jpg"
alt="Recipe 2"
/>
<h2>Recipe 2</h2>
<p>
<strong>Ingredients:</strong> Ingredient 1, Ingredient 2, Ingredient
3
</p>
<a href="#">View Recipe</a>
</li>
<li class="recipe-item">
<img
src="https://spoonacular.com/recipeImages/12445-312x231.jpg"
alt="Recipe 3"
/>
<h2>Recipe 3</h2>
<p>
<strong>Ingredients:</strong> Ingredient 1, Ingredient 2, Ingredient
3
</p>
<a href="#">View Recipe</a>
</li> -->
</ul>
</div>
<script src="index.js"></script>
</body>
</html>
Continue your learning journey with these handpicked projects that share similar concepts and technologies
%202.webp?alt=media&token=7ffdb0b5-c934-43e2-a7a1-029e283cce6f)
In this project, you will learn how to build a testimonial slider using HTML, CSS and JavaScript. We use a timer to change the sliders automatically and also we have added a bountiful animation showing the slides.
View project
Let's create a weight converter project that converts pounds to kilograms. The webpage features an input field where users can enter a weight in pounds, and the webpage automatically displays the equivalent weight in kilograms. After 10 seconds, the result is removed, and the input field is emptied using the 'set time out' method. We've also incorporated an error handling feature to handle negative input numbers. If the user enters a negative number, the webpage displays an error message, "Please enter a valid number." We'll learn how to handle error situations and remove the error message after two seconds using an event listener for the input field. The event listener will call a function that performs the desired actions.
View project
Welcome to the Stopwatch Project! We will create a timer displayed at the top, along with three buttons - start, stop, and reset. Clicking the START button will begin the timer. The STOP button will pause the timer using a JavaScript method called SetInterval, which can be cleared using clearInterval. The RESET button will reset the timer to zero. If you click STOP and then START again, the timer will continue from the previously elapsed time. We'll start by installing CSS for the buttons' design and hover effects, then use JavaScript to get the browser time, manipulate the content, replace it with the calculated time, and provide the start, stop, and reset functionality.
View project