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', () => {
  if (currentActive < circles.length) {
    currentActive++;
  }

  update();
});

prev.addEventListener('click', () => {
  if (currentActive > 1) {
    currentActive--;
  }
  update();
});

function update() {
  currentActive === 1 ? (prev.disabled = true) : (prev.disabled = false);
  currentActive === circles.length
    ? (next.disabled = true)
    : (next.disabled = false);

  circles.forEach((circle, index) => {
    if (index < currentActive) {
      circle.classList.add('active');
    } else {
      circle.classList.remove('active');
    }
  });

  progress.style.width =
    ((currentActive - 1) / (circles.length - 1)) * 100 + '%';
}