script.js

const progress = document.getElementById('progress')
const prev = document.getElementById('prev')
const next = document.getElementById('next')
const status = document.getElementById('status')
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')
            if (idx === currentActive - 1) {
                circle.setAttribute('aria-current', 'step')
            } else {
                circle.removeAttribute('aria-current')
            }
        } else {
            circle.classList.remove('active')
            circle.removeAttribute('aria-current')
        }
    })

    const activeCount = Array.from(circles).filter(circle => circle.classList.contains('active')).length

    const percent = (activeCount - 1) / (circles.length - 1) * 100
    progress.style.width = percent + '%'
    progress.setAttribute('aria-valuenow', String(Math.round(percent)))
    status.textContent = `Step ${currentActive} of ${circles.length}`

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

update()