Afroj Mansoori's Blog

Fetch API and Display

Afroj Mansoori's photo
Afroj Mansoori
·

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;
}

Web DevelopmentHTML5JavaScriptCSSAPIs