script.js

const progress = document.getElementById('progress');
const prev = document.getElementById('prev');
const next = document.getElementById('next');
const circles = document.querySelectorAll('.circle');


let currentActive = 1;


next.addEventListener('click', () => {
    currentActive++

    if (currentActive > circles.length) {
        currentActive = circles.length
    }


    update()
})


prev.addEventListener('click', () => {
    currentActive--

    if (currentActive <= 1) {
        currentActive = 1

    }

    update()
})


function update() {
    circles.forEach((circle, index) => {
        if (index < currentActive) {
            circle.classList.add('active')
        }
        else {
            circle.classList.remove('active')
        }
    })


    const actives = document.querySelectorAll('.active');


    progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%';





    if (currentActive === 1) {
        prev.disabled = true
    }
    else if (currentActive === circles.length) {
        next.disabled = true
    }
    else {
        prev.disabled = false;
        next.disabled = false;
    }




}