Home

Fetch images with promises

Image by Paul Jarvis
Image © Paul Jarvis
Category: nature
Image by Wojtek Witkowski
Image © Wojtek Witkowski
Category: city
Image by Mark Doda
Image © Mark Doda
Category: closeup
Image by Vadim Sherbakov
Image © Vadim Sherbakov
Category: building
Image by Steven Spassov
Image © Steven Spassov
Category: closeup
Image by Charlie Foster
Image © Charlie Foster
Category: closeup
Image by Vadim Sherbakov
Image © Vadim Sherbakov
Category: night
Image by Vadim Sherbakov
Image © Vadim Sherbakov
Category: building
Image by Paul Jarvis
Image © Paul Jarvis
Category: nature
Image by Rick Waalders
Image © Rick Waalders
Category: nature
Image by Paul Jarvis
Image © Paul Jarvis
Category: closeup
Image by Nick Turner
Image © Nick Turner
Category: closeup

const url = 'https://my-json-server.typicode.com/pverhaert/itf-api/picsum';
const spinner = document.querySelector('.spinner');

function fetchImages() {
    fetch(url)
        .then((response) => {
            // check for errors
            if (!response.ok) {
                throw new Error(`An error has occurred: ${response.status}  ${response.statusText}`); // check for errors
            }
            // return JSON data
            return response.json();
        })
        .then((images) => {
            // add a card for every image in the array images[]
            images.forEach((image) => {
                document.getElementById('imgContainer').innerHTML += `
                    <div class="card">
                      <img src="${image.url}/600/400" class="section media" alt="Image by ${image.author}">
                      <div class="section">
                        Image &copy; <a href="https://unsplash.com/photos/${image.meta.unsplash}" target="_blank">${image.author}</a>
                        <br>
                        Category: ${image.category}
                      </div>
                    </div>
                `;
            });
        })
        .then(() => {
            // hide the spinner
            spinner.classList.add('hidden');
        })
        .catch((error) => {
            spinner.classList.add('hidden');
            console.log(error);
        });
}
fetchImages();