functions.js

let slideNumber = 0;

const newsImageSources = ['../img/nasa_news_1.jpg', '../img/nasa_news_2.jpg', '../img/nasa_news_3.jpg'];
const newsTitles = ['Space Station', 'Earth', 'NASA Goddard'];
const newsSubtitles = ['Expedition 48 Crew Lands Safely on Earth', 'NASA Announces Summer 2023 Hottest on Record', 'NASA\'s Webb Snaps Supersonic Outflow of Young Star'];

document.addEventListener("DOMContentLoaded", function() {
    onload();
});

function onload() {
    console.log("Page loaded");

    handleSearchChanged();
    setInterval(slideImage, 30000);
    setHoverForOverlay();
}

function handleSearchChanged() {
    const searchForm = document.forms['search-form'];
    const searchInput = searchForm.elements['search-input'];

    searchInput.addEventListener("input", onInputChanged);
}

async function onInputChanged(event) {
    let searchWord = event.target.value;

    let json = await fetchNews(searchWord);

    if (json === undefined)
        return;

    displaySearchResults(json);
}

function fetchNews(searchWord) {
    let request = fetch(`NewsFetch.php?searchWord=${searchWord}`)
                    .then((response) => {
                        if (response.status >= 200 && response.status < 300) {
                            return response.json();
                        } else {
                            return Promise.reject("An error occured while fetching the news!");
                        }
                    })
                    .catch((error) => console.error(error));  
                    
    return request;               
}

function displaySearchResults(json) {
    const searchResults = document.getElementById('search-results');

    searchResults.innerText = "";

    const ul = document.createElement('ul');

    json.forEach((news) => {
        const li = createNewsChild(news);

        ul.appendChild(li);
    });

    console.log(ul);

    searchResults.appendChild(ul);

    const display = json.length === 0 ? "none" : "block";;
    searchResults.style.display = display;
}

function createNewsChild(news) {
    const li = document.createElement('li');
    const a = document.createElement('a');
    
    const textNode = document.createTextNode(news['title']);
    a.appendChild(textNode);

    const hrefAttr = document.createAttribute('href');
    hrefAttr.value = 'NewsArticle.php?articleId=' + encodeURIComponent(news['id']);

    a.setAttributeNode(hrefAttr);

    li.appendChild(a);

    return li;
}

function slideImage() {
    slideNumber = (slideNumber + 1) % 3;

    const slideImage = document.getElementById('slide-image');

    const slideContainer = document.getElementById('slide-container');
    const slideTitle = slideContainer.children[0];
    const slideSubtitle = slideContainer.children[1];
    
    let newsImageSource = newsImageSources[slideNumber];
    let newsTitle = newsTitles[slideNumber];
    let newsSubtitle = newsSubtitles[slideNumber];

    slideImage.src = newsImageSource;
    slideTitle.textContent = newsTitle;
    slideSubtitle.textContent = newsSubtitle;
}

function setHoverForOverlay() {
    document.querySelectorAll('.overlay > .overlay-description').forEach(function(element) {
        element.addEventListener("mouseover", function() { hover(this, true); });
        element.addEventListener("mouseout", function() { hover(this, false); });
    });
}

function hover(element, hoverActivated) {
    console.log(element);
    let height = "";

    if (hoverActivated)
        height = "100%";
    else
        height = "auto";

    element.parentElement.style.height = height;
}