API Call and DOM Manipulation - Vanilla JavaScript
As a former 3D Animator with more than 12 years of experience, I have always been fascinated by the intersection of technology and creativity. That's why I recently shifted my career towards MERN stack development and software engineering, where I have been serving since 2021.
With my background in 3D animation, I bring a unique perspective to software development, combining creativity and technical expertise to build innovative and visually engaging applications. I have a passion for learning and staying up-to-date with the latest technologies and best practices, and I enjoy collaborating with cross-functional teams to solve complex problems and create seamless user experiences.
In my current role as a MERN stack developer, I have been responsible for developing and implementing web applications using MongoDB, Express, React, and Node.js. I have also gained experience in Agile development methodologies, version control with Git, and cloud-based deployment using platforms like Heroku and AWS.
I am committed to delivering high-quality work that meets the needs of both clients and end-users, and I am always seeking new challenges and opportunities to grow both personally and professionally.
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
HTML:
A basic structure with a container to hold the recipe results.
A
divwith anidofrecipeswhere we will inject the recipe data.
CSS:
Basic styling for the page and recipe items.
Flexbox to center the content on the page.
JavaScript:
We wait for the DOM to be fully loaded using
DOMContentLoaded.We fetch data from the API using the
fetchfunction.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
recipescontainer on the page.
Testing
Open the
index.htmlfile in your web browser.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!