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, 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 if(currentActive === circles.length){
      next.disabled = true
    } else {
      prev.disabled = false
      next.disabled = false
    }
  }
  