JavaScript получить случайное изображение из Unsplash

Question

Реализовал функционал при прокрутке страницы автоматически загружаются изображения, а сделать так, что бы после обновлении страницы отображалось только одно случайное изображение из Unsplash?

JS

let fact;
const photoContainer = document.getElementById('photo-container');
async function showPic () {
    const url = 
    'https://api.unsplash.com/photos/?client_id=F3Lq5bwhNJdj_SbtRdcoMWaU2uW0Qd3iqeTrp9kXQOI'
    const response = await fetch(url);
    console.log(response.status);
    console.log(response.ok);

    fact = await response.json();
    const urlsImg = Array.from(fact[0].urls);
    console.log(fact[0].urls.regular);

    fact.forEach((element) => {
        const image = document.createElement('img');
        image.setAttribute('src', `${element.urls.regular}`);
        image.setAttribute('width', '304');
        image.setAttribute('height', '208');
        photoContainer.append(image);
    })
};

document.addEventListener('scroll', function (e) {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
        showPic();
    }
});
showPic();

HTML

<div id="photo-container"></div>

Answer 1

Например так

let fact, single = true,
    rndNum = Math.floor(Math.random() * 10);
const photoContainer = document.getElementById('photo-container');

async function showPic() {
    const url = 'https://api.unsplash.com/photos/?client_id=F3Lq5bwhNJdj_SbtRdcoMWaU2uW0Qd3iqeTrp9kXQOI';
    const response = await fetch(url);

    fact = await response.json();
    const urlsImg = Array.from(fact[0].urls);

    fact.forEach((element, i) => {
        if (i == rndNum || !single) {
            const image = document.createElement('img');
            image.setAttribute('src', `${element.urls.regular}`);
            image.setAttribute('width', '304');
            image.setAttribute('height', '208');
            photoContainer.append(image);
        }
    })
};

document.addEventListener('scroll', function() {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
        single = false;
        showPic();
    }
});

showPic();

<div id="photo-container"></div>

БЛОГ НА HUSL

JavaScript получить случайное изображение из Unsplash

Ответы (1 шт):