scrpt.js

const progress = document.getElementById("progress")
const next = document.getElementById("nxt")
const prev = document.getElementById("prev")
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 {
        prev.disabled = false
    }

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