How to Build a Food Recipe App with HTML, CSS, Vanilla JS, and an API

8 min readApr 21, 2023

As a frontend web developer, building projects using different technologies is a great way to improve your skills and keep up with the latest trends. In this tutorial, we’ll show you how to create a food recipe app using HTML, CSS, Vanilla JS, and an API. This project is perfect for beginners who want to learn how to work with APIs and create dynamic web applications.

Before we dive into the details, let’s take a look at what our app will do. The food recipe app will allow users to search for recipes based on ingredients. When the user enters an ingredient in the search bar, the app will fetch data from an API and display a list of meals that contain that ingredient. The user can then click on a meal to see the recipe details, including the ingredients and instructions.

Now, let’s get started with the project. First, we need to set up our HTML and CSS. We’ll create a simple layout with a search bar, a list of meals, and a modal for displaying recipe details. We’ll use CSS to style our elements and make them look good.

Next, we’ll work on the JavaScript code. We’ll use the Fetch API to make requests to the food recipe API and retrieve data. We’ll then use JavaScript to manipulate the DOM and display the data on our web page. We’ll also add event listeners to our elements to allow users to interact with the app.

As we build the project, we’ll encounter various challenges and problems to solve. For example, we’ll need to handle errors when the API doesn’t return any data, and we’ll need to create a modal to display the recipe details. These challenges will help us develop our problem-solving skills and become better developers.

Building a food recipe app is just one example of the many projects you can create as a frontend web developer. By working on projects like this, you’ll learn new skills, improve your coding abilities, and gain practical experience that you can apply to your future projects.

In the following sections, we’ll walk you through each step of the development process, from designing the layout of your app to integrating the MealDB API and adding interactive features. Whether you’re a beginner or an experienced developer, this tutorial will provide you with the knowledge and skills you need to create your own custom recipe app. So let’s get started and bring your vision to life!

Great, let’s move on to the first section of the tutorial. In this section, we’ll focus on setting up the HTML file for our recipe app.

Setting up the HTML file:

To begin, create a new folder for your project and name it whatever you like. Inside the folder, create a new HTML file and name it “index.html”. This will be the main file for our recipe app.

Open the “index.html” file in your text editor of choice and add the following code:

<!DOCTYPE html> declares the document type as HTML5.
<html lang="en"> defines the document language as English.
The head section contains meta information, such as the character set, the viewport, and the page title.
<meta charset="UTF-8" /> specifies the character encoding of the document.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> sets the initial scale and width of the viewport for mobile devices.
<title>Find Meal For Your Ingredients</title> sets the title of the webpage.
<link rel="stylesheet" href="styles.css" /> links to the external CSS file.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" /> links to the Font Awesome CSS file, which contains the icons used in the project.
The body section contains the content of the webpage.
<div class="container"> defines a container to hold the webpage content.
<div class="meal-wrapper"> defines a wrapper for the search box, search results, and meal details.
<div class="meal-search"> contains the search box and a quote about real food.
<h2 class="title">Find Meals For Your Ingredients</h2> sets the title for the search box section.
<blockquote> contains the quote and author about real food.
<div class="meal-search-box"> contains the input field and search button.
<input type="text" class="search-control" placeholder="Enter an ingredient" id="search-input" /> sets the input field for the user to enter ingredients.
<button type="submit" class="search-btn btn" id="search-btn"> sets the search button for the user to initiate a search.
<i class="fas fa-search"></i> is the search icon from Font Awesome.
<div class="meal-result"> contains the search results.
<h2 class="title">Your Search Results:</h2> sets the title for the search results section.
<div id="meal"> is the container for the meal items that will be displayed after a search.
<div class="meal-details"> contains the meal details that will be displayed when a user clicks on a meal item.
<button type="button" class="btn recipe-close-btn" id="recipe-close-btn"> sets the close button for the meal details section.
<i class="fas fa-times"></i> is the close icon from Font Awesome.
<div class="meal-details-content"> is the container for the meal details that will be displayed after a user clicks on a meal item.
<script src="script.js"></script> links to the JavaScript file that contains the logic for the webpage.

2. Setting up the CSS file:

After setting up our HTML file, we can move on to adding the CSS styling to make our recipe app look more visually appealing and user-friendly.

Open the “styles.html” file in your text editor of choice and add the following code:

The first line imports the Google font Poppins with various font weights.
The universal selector (*) is used to set padding and margin to 0 and box-sizing to border-box for all elements.
The :root pseudo-class sets two custom CSS variables ( — tenne-tawny and — tenne-tawny-dark) with specific color codes.
The body selector sets font-weight, font-size, line-height, and font-family for the entire page.
The .btn class sets font-family, cursor, outline, and font-size for all buttons.
The .text class sets opacity to 0.8 for text.
The .title class sets font-size and margin-bottom for all titles.
The .container class sets a minimum height of 100vh (viewport height).
The .meal-wrapper class sets the maximum width, margin, padding, background color, and text alignment for the main meal container.
The .meal-search class sets margin and font-size for the meal search bar.
The .meal-search-box class sets margin, display, and align-items for the search bar container.
The .search-control and .search-btn classes set width and other styles for the input box and search button respectively.
The .meal-result class sets margin-top for the meal search result container.
The #meal selector sets margin for the meal container.
The .meal-item class sets border-radius, overflow, box-shadow, and margin for each meal item.
The .meal-img img class sets the width to 100% and display to block for each meal image.
The .meal-name class sets padding for the meal name.
The .recipe-btn class sets text-decoration, color, background, font-weight, font-size, padding, display, width, margin, and border-radius for the recipe button.
The .meal-details class sets position, top, left, transform, color, background, border-radius, width, height, overflow-y, and display for the meal details section.

3. After setting up the CSS file, the next step is to add JavaScript functionality to our recipe app.

Add the following code:

The code defines four variables using the const keyword: searchBtn, mealList, mealDetailsContent, and recipeCloseBtn. These variables are references to HTML elements in the document, which the code uses to attach event listeners and modify the page content.

The code defines three functions: getMealList(), getMealRecipe(), and mealRecipeModal().

The getMealList() function retrieves a list of meals that match a user's inputted ingredient(s) using the MealDB API. It then generates HTML for each meal and updates the page with the results. If there are no matching meals, the function displays an error message.

The getMealRecipe() function is called when a user clicks the "Get Recipe" button for a specific meal. It retrieves the details for the selected meal using the MealDB API and passes the data to the mealRecipeModal() function.

The mealRecipeModal() function generates HTML for a modal window that displays the details for a specific meal. The modal is displayed when the function is called.

Finally, the code attaches event listeners to the search button, the meal list, and the recipe close button. When the search button is clicked, the getMealList() function is called. When a user clicks a "Get Recipe" button, the getMealRecipe() function is called. When a user clicks the recipe close button, the modal is closed.

In summary, this food recipe app project using HTML, CSS, Vanilla JS, and an API is a great way to improve your frontend web development skills. By building this app, you’ll learn how to work with APIs, handle asynchronous data fetching, and dynamically update the DOM based on user input. Additionally, you’ll gain experience with HTML and CSS layout and styling, as well as JavaScript event handling and manipulation.

Significantly, this project will allow you to practice key skills that are important for frontend web developers. For instance, you’ll get a chance to work with real-world data and API integration, which is a critical aspect of building web applications. You’ll also gain experience with JavaScript, which is a powerful and versatile language that underpins much of modern web development.

Overall, this food recipe app project is a valuable addition to your frontend web development portfolio, demonstrating your ability to build engaging and interactive web applications. Through this project, you’ll become more confident in your coding skills and gain practical experience that can help you succeed as a web developer.

If you’re interested in building similar projects, here are some resources you can use to continue your learning:

MDN Web Docs: This is a great resource for learning HTML, CSS, and JavaScript. It has detailed documentation and tutorials on various web development topics.
FreeCodeCamp: FreeCodeCamp is a free online coding platform that offers interactive tutorials on web development. It has a dedicated section for JavaScript and APIs.
CodePen: CodePen is an online community for front-end developers to showcase their work and get feedback. You can find many examples of food recipe apps and other web development projects on CodePen.
Food Recipe API: The food recipe app we built uses the MealDB API. You can check out their documentation and use their API to build your own food recipe app.

We hope this tutorial has been helpful in showing you how to build a food recipe app using HTML, CSS, Vanilla JS, and an API. We encourage you to continue learning and building new projects to improve your skills as a frontend web developer. Happy coding!

How to Build a Food Recipe App with HTML, CSS, Vanilla JS, and an API

Written by Akem Vanelle