const imageContainer = document.getElementById('image-container');
const loader = document.getElementById('loader');
let ready = false;
let imagesLoaded = 0;
let totalImages = 0;
let photosArray = [];
// Unsplash API
const count = 5;
const apiKey = 'b1W7HIIRrZOO4tZTNaVVBLRx7L7q810zjqEjxj3OAeY'
const apiUrl = `https://api.unsplash.com/photos/random/?client_id=${apiKey}&count=${count}`
function imageLoaded() { imagesLoaded++; if (imagesLoaded === totalImages) { ready = true; loader.hidden = true; count = 30; piUrl = `https://api.unsplash.com/photos/random/?client_id=${apiKey}&count=${count}` }
}
function setAttributes(element, attributes) { for (const key in attributes) { element.setAttribute(key, attributes[key]) }
}
// Create Elements For LInks & Photos, Add to DOM
function displayPhotos() { imagesLoaded = 0; totalImages = photosArray.length; // Run function for each object in photosArray photosArray.forEach((photo) => { const item = document.createElement('a'); setAttributes(item, { href: photo.links.html, target: '_blank', }); const img = document.createElement('img'); setAttributes(img, { src: photo.urls.regular, alt: photo.alt_desciption, title: photo.alt_desciption, }) img.addEventListener('load', imageLoaded); item.appendChild(img); imageContainer.appendChild(item); });
}
//Get photos from Unsplah API
async function getPhotos() { try { const response = await fetch(apiUrl); photosArray = await response.json(); displayPhotos(); } catch (error) { // Catch Error hERE }
}
window.addEventListener('scroll', () => { if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 1000 & ready) { ready = false; getPhotos(); }
})
getPhotos()