text: 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')
  
      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
      }
  }