progress steps

1

2

3

4

prev

next

const $ = v => document.querySelector(v);
const $$ = v => document.querySelectorAll(v);
const prevBtn = $("#prev");
const nextBtn = $("#next");
const progress=$$('.progress')
const progressBar=$('#progress')
const min=0,max=progress.length-1
let currentActive=0
console.log($('#progress').style);
prevBtn.addEventListener('click',()=>{
    if(prevBtn.classList.contains('disabled')) return;
    update()
})
nextBtn.addEventListener('click',()=>{
    if(nextBtn.classList.contains('disabled')) return;
    console.log(currentActive);
    if(currentActive>=max-1){
        handleClass(nextBtn).addClass('disabled').removeClass('btn-active')
    }
    if(currentActive<=max-1){
        currentActive++
    }
    if(currentActive>0){
        handleClass(prevBtn).addClass('btn-active').removeClass('disabled')
    }
    update()
})
prevBtn.addEventListener('click',()=>{
    if(prevBtn.classList.contains('disabled')) return;
    console.log(currentActive);
    if(currentActive<=1){
        handleClass(prevBtn).addClass('disabled').removeClass('btn-active')
    }
    if(currentActive>0){
        currentActive--
    }
    if(currentActive<=max-1){
        handleClass(nextBtn).addClass('btn-active').removeClass('disabled')
    }
    update()
})

function handleClass(el){
    let methods={
        addClass,
        removeClass
    }
    function addClass(c){
        el.classList.add(c)
        return methods
    }
    function removeClass(c){
        el.classList.remove(c)
        return methods
    }
    return methods
}
function update(){
   progress.forEach((item,index)=>{
       console.log(item);
      if(index<=currentActive){
          item.classList.add('active')
      }else{
          item.classList.remove('active')
      }
      progressBar.style.width=(currentActive/max)*100+'%'
    })
}