Fetch API and Display
Published
•1 min read. Fetch data from the JSON placeholder API and display it in the browser. Also, implement the skeleton loader which will be displayed when the data is getting fetched. (No library should be used for implementing the skeleton loader)<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Album</title>
</head>
<body>
<div>
<h1>Beautiful images</h1>
<ul></ul>
</div>
<script>
fetch('https://jsonplaceholder.typicode.com/photos')
.then(response => response.json())
.then(data =>{
data.forEach(user => {
const markup =`<li><img src="${user.url}"></li>`;
document.querySelector('ul').insertAdjacentHTML('beforeend',markup)
});
});
</script>
</body>
</HTML>
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body{
width: 100vw;
}
ul {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
img{
width: 150px;
height: 150px;
margin: 10px;
}
