The projects related to the progress step it is generated by an another script in JavaScript that change the class in the DOM.

There are two event listeners in the script and there is a function that update the CSS. So, the new style is following:

function update() {
    circles.forEach((circle,idx) => {
        if(idx < 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
    }
}

The project has a an average difficulty and it’s instructive to understand who works the event listeners and the updates in the CSS classes. But I wonder if it is reusable because the progress steps as I can see in the practices is something that there are in a lot of pre built solutions. Tu sum up, a fun project that it’s not reusable.

Project code

Project Demo