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, idx) => {
        if (idx < currentActive){
            circle.classList.add('active');
        } else {
            circle.classList.remove('active');
        }
    })

    const actives = document.querySelectorAll('.active');
    const numerator = actives.length - 1;
    const denominator = circles.length - 1;

    progress.style.width = (100*( numerator/denominator))+'%';

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