const cards = document.querySelectorAll('.card');
const nextBtn = document.querySelector('.next');
const prevBtn = document.querySelector('.previous');
let cardPosition = 0;
const endOfCards = cards.length;

const hideCards = () => {
    for (let card of cards) {
        card.classList.remove('visible');
        card.classList.add('hidden');
    }
}

const nextCard = () => {
    hideCards();
    prevBtn.style.opacity = "1";
    if (cardPosition !== endOfCards - 1) {
        cardPosition++;
        if (cardPosition === 4) nextBtn.style.opacity = ".3";
    } 
    cards[cardPosition].classList.add('visible');
}

const prevCard = () => {
    hideCards();
    nextBtn.style.opacity = "1";
    if (cardPosition !== 0) {
        cardPosition--;
        if (cardPosition === 0) prevBtn.style.opacity = ".3";
    } 
    cards[cardPosition].classList.add('visible');
}

nextBtn.addEventListener('click', nextCard);

prevBtn.addEventListener('click', prevCard);