keep moving forward

Author: Tduncan14

steps/index.html

@@ -22,8 +22,10 @@
         </div>
     </div>
 
-    <button class="btn" id="prev" disabled></button>
-    <button class="btn" id="next"></button>
+    <div class="btnMe">
+        <button class="btn" id="prev" disabled>Prev</button>
+        <button class="btn" id="next"> Next</button>
+    </div>
 
     <script src="./script.js"></script>
 </body>

steps/script.js

@@ -0,0 +1,68 @@
+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;
+    }
+
+
+
+
+}

steps/style.css

@@ -5,6 +5,12 @@
 }
 
 
+:root {
+    --line-border-fill: #3498db;
+    --line-border-empty: #e0e0e0;
+
+}
+
 
 body {
     display: flex;
@@ -31,7 +37,7 @@ body {
 
 .progress-container::before {
     content: '';
-    background-color: #e0e0e0;
+    background-color: var(--line-border-empty);
     position: absolute;
     top: 50%;
     left: 0;
@@ -43,7 +49,7 @@ body {
 
 
 .progress {
-    background-color: #3498db;
+    background-color: var(--line-border-fill);
     position: absolute;
     top: 50%;
     left: 0;
@@ -69,4 +75,35 @@ body {
 
 .circle.active {
     border-color: #3498db;
+}
+
+.btn {
+    background-color: var(--line-border-fill);
+    color: #fff;
+    border: 0;
+    border-radius: 6px;
+    cursor: pointer;
+    font-family: inherit;
+    padding: 8px 30px;
+    margin: 5px;
+    font-size: 14px;
+}
+
+
+.btn:active {
+    transform: scale(0.98);
+}
+
+.btn:focus {
+    outline: 0;
+}
+
+
+.btn:disabled {
+    background-color: var(--line-border-empty);
+    cursor: pointer;
+}
+
+.btnMe {
+    display: flex;
 }