Finished Day 2

50Days/day2/script.js

@@ -0,0 +1,39 @@
+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 + '%';
+}