How to create a webpage using HTML, CSS, and JavaScript to request data from an API and display it on the webpage


 <!DOCTYPE html>
<title>API Data Display</title>
<h1>API Data</h1>
<div id="data-container"></div>
<script src="main.js"></script>


body {
font-family: Arial, sans-serif;
text-align: center;

#data-container {
margin: 0 auto;
width: 80%;
text-align: left;


//Make a request to the API endpoint
.then(response => response.json())
.then(data => {
//Get the data container element
const dataContainer = document.getElementById('data-container');
//Loop through the data and create a new element for each item
data.forEach(item => {
const newItem = document.createElement('p');
newItem.innerText = JSON.stringify(item);
.catch(error => console.error(error));

Note: This is a very basic example and you may want to add error handling and more formatting/styling to your actual implementation.

You also have to make sure that you have the right endpoint url and the right api key if it required.

Similar Posts