add prev and next button functionalities

Author: tajulafreen

Diff for: ProgressSteps/script.js

@@ -0,0 +1,45 @@
+const progress = document.getElementById('progress');
+const prev = document.getElementById('prev');
+const next = document.getElementById('next');
+const circles = document.querySelectorAll('.circle');
+
+let currentActive = 1;
+
+const 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;
+  }
+};
+
+next.addEventListener('click', () => {
+  currentActive += 1;
+  if (currentActive > circles.length) {
+    currentActive = circles.length;
+  }
+  update();
+});
+
+prev.addEventListener('click', () => {
+  currentActive -= 1;
+  if (currentActive < 1) {
+    currentActive = 1;
+  }
+  update();
+});