script.js

const resultsNav = document.getElementById('resultsNav');
const favoritesNav = document.getElementById('favoritesNav');
const imagesContainer = document.querySelector('.images-container');
const saveConfirmed = document.querySelector('.save-confirmed');
const loader = document.querySelector('.loader');

// NASA API 
const apiKey = 'DEMO_KEY';
const count = 3;
const apiUrl = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}&count=${count}`;

let resultsArray = [];
let favorites = {};

function showContent(page){
    window.scrollTo({top:0, behavior: 'instant'});
    if(page === 'results'){
        resultsNav.classList.remove('hidden');
        favoritesNav.classList.add('hidden');
    } else {
        resultsNav.classList.add('hidden');
        favoritesNav.classList.remove('hidden');
    }
    loader.classList.add('hidden');
}

function createDOMNodes(page){
    const currentArray = page === 'results' ? resultsArray : Object.values(favorites); 
    currentArray.forEach((result) => {
        // Card Container
        const card = document.createElement('div');
              card.classList.add('card');
        // Link 
        const link = document.createElement('a');
              link.href = result.dhUrl;
              link.title = 'View Full Image';
              link.target = '_blank';
        // Image
        const image = document.createElement('img');
              image.src = result.url;
              image.alt = 'NASA Picture of the Day';
              image.loading = 'lazy';
              image.classList.add('card-img-top');
        // Card Body
        const cardBody = document.createElement('div');
              cardBody.classList.add('card-body');
        // Card Title
        const cardTitle = document.createElement('h5');
              cardTitle.classList.add('card-title');
              cardTitle.textContent = result.title;
        // Save Text
        const saveText = document.createElement('p');
              saveText.classList.add('clickable');
              
              if(page === 'results'){
                    saveText.style.cursor='pointer';
                    saveText.textContent = 'Add to Favorites';
                    saveText.setAttribute('onclick', `saveFavorite('${result.url}')`);
              } else {
                    saveText.textContent = 'Remove Favorites';
                    saveText.style.cursor='pointer';
                    saveText.setAttribute('onclick', `removeFavorite('${result.url}')`);
              }
        // Card Text
            const cardText = document.createElement('p');
                cardText.textContent = result.explanation;
        // Footer Container 
            const footer = document.createElement('small');
                footer.classList.add('text-muted');
        // Date 
            const date = document.createElement('strong');
                date.textContent = result.date;
        // Copyright
            const copyrightResult = result.copyright === undefined ? '' : result.copyright;
            const copyRight = document.createElement('span');
                copyRight.textContent = ` ${copyrightResult}`;
        // Now append these elements right order
            footer.append(date, copyRight);
            cardBody.append(cardTitle, saveText, cardText,footer);
            link.appendChild(image);
            card.append(link, cardBody);
            imagesContainer.appendChild(card);
    });
}

function updateDOM(page){
    // Get Favorites from localStorage
    if(localStorage.getItem('nasaFavorites')){
        favorites = JSON.parse(localStorage.getItem('nasaFavorites'));
    }
    imagesContainer.textContent = '';
    
    createDOMNodes(page);   
    showContent(page);
}

// Get 10 images from NASA API
async function getNasaPictures(){
    // Show Loader
    loader.classList.remove('hidden');
    try{
        const response = await fetch(apiUrl);
        resultsArray = await response.json();
        updateDOM('results');
    } catch (error){
        // Catch Error Here
          console.log(error)
    }; 
}

// Add result to Favorites Object
    function saveFavorite(itemUrl){
        // Loop through Result Array to select Favorite
         resultsArray.forEach((item) => {
             if(item.url.includes(itemUrl) && !favorites[itemUrl]){
                 favorites[itemUrl] = item;
                // Show Save Confirmation for 2 second
                saveConfirmed.hidden = false;
                // Hide Save Confirmation after 2 second
                setTimeout(() => {
                    saveConfirmed.hidden = true;
                }, 2000);
                // Set Favorites in localStorage
                localStorage.setItem('nasaFavorites', JSON.stringify(favorites));
             }
         })
    }

// Remove result of Favorites Object
    function removeFavorite(itemUrl){
        if(favorites[itemUrl]){
            delete favorites[itemUrl];
            // Set Favorites in localStorage
            localStorage.setItem('nasaFavorites', JSON.stringify(favorites));
            updateDOM('favorites');
        }
        
    }

// On Load
getNasaPictures();