Muhammad Sufiyan's Blog

API Call and DOM Manipulation - Vanilla JavaScript

Muhammad Sufiyan's photo
Muhammad Sufiyan
·

3 min read

This guide will show you how to fetch data from an API and display the results on a web page using HTML, CSS, and JavaScript. We will use the following API to get recipes for pizza: https://forkify-api.herokuapp.com/api/v2/recipes?search=pizza.

1. Setting Up the Project

Create a new folder for your project and create three files: index.html, styles.css, and script.js.

2. HTML Structure (index.html)

First, let's create the basic HTML structure.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pizza Recipes</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Pizza Recipes</h1>
        <div id="recipes"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. Styling the Page (styles.css)

Next, let's add some basic styles to make our page look nice.

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
}

.container {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 100%;
}

h1 {
    text-align: center;
    color: #333;
}

.recipe {
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
}

.recipe:last-child {
    border-bottom: none;
}

.recipe h2 {
    margin: 0;
    font-size: 18px;
    color: #444;
}

.recipe p {
    margin: 5px 0 0;
    color: #666;
}

4. JavaScript for API Call and DOM Manipulation (script.js)

Finally, let's add the JavaScript to fetch data from the API and display it on the page.

document.addEventListener('DOMContentLoaded', () => {
    const recipesContainer = document.getElementById('recipes');

    fetch('https://forkify-api.herokuapp.com/api/v2/recipes?search=pizza')
        .then(response => response.json())
        .then(data => {
            const recipes = data.data.recipes;
            recipes.forEach(recipe => {
                const recipeElement = document.createElement('div');
                recipeElement.classList.add('recipe');

                const recipeTitle = document.createElement('h2');
                recipeTitle.textContent = recipe.title;

                const recipePublisher = document.createElement('p');
                recipePublisher.textContent = `Publisher: ${recipe.publisher}`;

                recipeElement.appendChild(recipeTitle);
                recipeElement.appendChild(recipePublisher);

                recipesContainer.appendChild(recipeElement);
            });
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });
});

Explanation

  1. HTML:

    • A basic structure with a container to hold the recipe results.

    • A div with an id of recipes where we will inject the recipe data.

  2. CSS:

    • Basic styling for the page and recipe items.

    • Flexbox to center the content on the page.

  3. JavaScript:

    • We wait for the DOM to be fully loaded using DOMContentLoaded.

    • We fetch data from the API using the fetch function.

    • Once we get the data, we loop through the recipes and create new HTML elements to display each recipe's title and publisher.

    • We append these elements to the recipes container on the page.

Testing

  1. Open the index.html file in your web browser.

  2. You should see a list of pizza recipes displayed on the page.

Summary

This guide demonstrates how to:

  • Set up an HTML, CSS, and JavaScript project.

  • Make an API call to fetch data.

  • Manipulate the DOM to display data on a web page.

Feel free to customize the styles and structure to make it your own!

HTML5CSSJavaScriptES6APIsfetch