Personal-Website/script.js

function init() {
    const cards = document.getElementsByClassName('card-wrapper');

    for (let i = 0; i < cards.length; i++) {
        const cardListener = cards[i].getElementsByClassName('card-listener')[0];
        cardListener.addEventListener('click', () => openCard(cards, i));
    }

}

function openCard(cards, i) {
    for (let j = 0; j < cards.length; j++) {
        if (j === i) {
            cards[j].classList.remove('hidden');
            cards[j].classList.add('active');
            cards[j].getElementsByClassName('content-wrapper')[0].classList.add('visible');
            continue;
        }
        cards[j].getElementsByClassName('content-wrapper')[0].classList.remove('visible');
        cards[j].classList.add('hidden');
        cards[j].classList.remove('active');
    }
}

function addInProgress() {
    if (window.location.href.indexOf('127.0.0.1') === -1) {
        const warning = document.createElement('div');
        warning.id = 'under-construction';
        warning.innerHTML = "This website is currently under development. Nothing will work as expected. Click anywhere to dismiss this message.";
        warning.onclick = function() {
            this.style.display = 'none';
        };
        document.body.appendChild(warning);
    }
}

function nextPage() {
    const nextButtons = document.getElementsByClassName('close');
    const cards = document.getElementsByClassName('card-wrapper');

    for (let i = 0; i < nextButtons.length; i++) {
        nextButtons[i].addEventListener('click', function() {

            cards[(i+1) % nextButtons.length].classList.remove('hidden');
            cards[(i+1) % nextButtons.length].classList.add('active');
            cards[(i+1) % nextButtons.length].getElementsByClassName('content-wrapper')[0].classList.add('visible');

            cards[i].getElementsByClassName('content-wrapper')[0].classList.remove('visible');
            cards[i].classList.add('hidden');
            cards[i].classList.remove('active');
        });
    }
}

function idle() {
    let idleTime = 61;
    const cards = document.getElementsByClassName('card-wrapper');
    let cardIndex = 0;
    setInterval(function() {
        idleTime+=2;
        if (idleTime > 1) {
            openCard(cards, cardIndex++ % cards.length);
        }
    }, 10000);

    document.onclick = document.onm = function() {
        console.log('User active, resetting idle timer.');
        idleTime = 0;
    };
}


addInProgress();
init();
nextPage();
idle();