functions.js

let slideNumber = 0;

const newsImageSources = ['../img/nasa_news_1.jpg', '../img/nasa_news_2.jpg', '../img/nasa_news_3.jpg'];
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();
});
document.addEventListener("DOMContentLoaded", function() {
    onload();
});

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

    setInterval(slideImage, 30000);

    setHoverForOverlay();

    setHoverForOverlay();
}

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() {
    let overlayDescription = document.querySelector('.overlay > .overlay-description');

    overlayDescription.addEventListener("mouseover", function() { hover(true); })
    overlayDescription.addEventListener("mouseout", function() { hover(false); })
}

function hover(hoverActivated) {
    let height = "";

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

    document.querySelectorAll(".overlay").forEach(function(element) {
        element.style.height = height;
    });
}