app.js

//*colorful text animation*/

let text = document.querySelector('.text');

let htmlSpans = text.innerText.split('').map((letter, i) => {
    return `<span style= "animation-duration: ${Math.random() * 5}s; filter: hue-rotate(${i *50}deg">${letter}</span>`
}).join('');

text.innerHTML = htmlSpans;

// console.log(htmlSpans);

//*----------------------------------------------------------------*/

const imageContainer = document.querySelector('#image-container');
const loader = document.querySelector('#loader');
let ready = false; //when the page first load we want to be false
let imagesLoaded = 0; 
let totalImages = 0; //so that we know when it's done loading everything
let photosArray = []; //We take a empty array because the values within our photos array is going to change every time we make a request
let initialLoad = true; //for faster loading

//*Unsplash API*/

let count = 5;
const apiKey = 'XQOKtMCSYKn9ekqgsQlMEVE6jRk1Ho2FG70UO2OAW_g';
const apiUrl = `https://api.unsplash.com/photos/random/?client_id=${apiKey}&count=${count}`; //in 'count' we will count how many images we wanna see.

//*check if all images were loaded
function imageLoaded() { //this function will call the each individual image
    imagesLoaded++; //starting at 0 and increase by 1 every individual image
    // console.log(imagesLoaded); 
    if(imagesLoaded === totalImages){
        ready = true;
        loader.hidden = true;
        count = 30;
        // console.log('ready =', ready);
    }
}



//**Helper function to setAttributes on DOM Elements */ Actually for creating DRY code (DRY-Don't Repeat Yourself) */

function setAttributes(element, attributes) {
    for (const key in attributes) { //attributes = it is an obj containing both key and the value that we actually want to set
        element.setAttribute(key, attributes[key]);  //key = href, target, src etc
    }
}

//**Create Elements for Links & Photos, Add to DOM*/

function displayPhotos() {
    imagesLoaded = 0; 
    totalImages = photosArray.length; //set totalImages to the length of photosArray
    // console.log('totalImages =', totalImages);
    photosArray.forEach((photo) => { //for each item in this array, we are going to run through this every single time we make a request and we are going to create an item,image and then we are going to put our image into our item and then we are going to put out item into our imageContainer.

        //create <a> to link to Unsplash
        const item = document.createElement('a');
        setAttributes(item, {
            href: photo.links.html,
            target: '_blank', //for opening in the new tab
        });

        //create <img> for photo
        const img = document.createElement('img');
        setAttributes(img, {
            src: photo.urls.regular,
            alt: photo.alt_description,
            title: photo.alt_description,
        });

        //*Event Listener, check when each is finish loading
        img.addEventListener('load', imageLoaded);


        //add <img> to <a>, then put both inside imageContainer Element
        item.appendChild(img);
        imageContainer.appendChild(item);
    });
}


//* Get photos from Unsplash API*/

async function getPhotos() {
    try{
        const res = await fetch(apiUrl);
        photosArray = await res.json();
        displayPhotos();
    } catch(err){
        console.error('Error fetching photos:', err);
        //Catch Error Here
    }
}

//*Check to see if scrolling near bottom of page, Load more Photos

window.addEventListener('scroll', () => {
    if(window.innerHeight + window.scrollY >= document.body.offsetHeight - 1000 && ready) {
        ready = false; //once this runs, so that it will only be ready again if our imagesLoaded ===totalImages
        getPhotos();
    }
}); //This code listens for the scroll event and checks if the user has reached the bottom of the page (with a 1000px margin) to trigger the loading of more photos.
// window.addEventListener('scroll', () => {...}) --->This sets up an event listener that runs whenever the user scrolls on the page.

// window.innerHeight + window.scrollY >= document.body.offsetHeight - 1000 ----> window.innerHeight is the height of the viewport (the visible part of the browser window).

// window.scrollY is the distance the user has already scrolled from the top.

// document.body.offsetHeight is the total height of the document (content, including the parts not visible).

// When the sum of the viewport height and scroll position is greater than or equal to the total document height minus 1000 pixels, it means the user is close enough to the bottom of the page to load more content.

//*on load

getPhotos();