Best matchAPI requestsIntermediate
Weather App
Request current weather data and display the response clearly.
Build a weather app →Recipe Book App
Build a recipe book app with HTML, CSS, and JavaScript while practicing API requests and async and await.
Intermediate30–45 minutesHTML5CSS3JavaScript
You'll practice
API RequestsAsync and AwaitDOM Selection
01 — What you'll build
Recipe Book App
In this project, we’re going to build a recipe book app using HTML, CSS, and JavaScript. You’ll see how to fetch recipe data and create useful recipe cards from the response. Along the way, you’ll practice API requests, async and await, and DOM selection, so you can understand how the interface and JavaScript logic work together.
02 — Included
- Live API-powered results
- Recipe Book App interface
- Responsive HTML and CSS layout
- Complete source code and live demo
03 — You'll practice
- Fetch data from an API
- Work with asynchronous JavaScript
- Select HTML elements from the DOM
- Change styles by updating CSS classes
- Update content on the page
- Create and add elements dynamically
Recommended knowledge: Basic HTML and CSS, JavaScript functions and arrays, Promises and the Fetch API, JavaScript arrays and array methods.
Complete project files
Build It from the Source Code
This project connects the interface to live API results.
- 1Create three files
- 2Copy the code
- 3Run
index.html
Before you run it
- Keep an internet connection available for live data.
Project structure
recipe-book-app/
<!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>
JS Related Projects
Practice with Related Projects
Practice API requests, async/await, and array methods with these related projects.
Best match
async/awaitIntermediate
Image Search App
Turn a search term into a gallery of API results.
Build an image search app →
array methodsIntermediate
Photo Gallery
Request remote photos and arrange the results into a gallery.
Build a photo gallery →Related: API requestsBest match
Weather App
Request current weather data and display the response clearly.
Build a weather appRelated: async/await
Image Search App
Turn a search term into a gallery of API results.
Build an image search appRelated: array methods
Photo Gallery
Request remote photos and arrange the results into a gallery.
Build a photo gallery