feat: day 2

Author: solygambas

002-progress steps/index.html

@@ -14,9 +14,12 @@
         <div class="circle">2</div>
         <div class="circle">3</div>
         <div class="circle">4</div>
+        <!-- Add More Steps -->
+        <div class="circle">5</div>
       </div>
-      <button class="btn" id="prev" disabled>Prev</button>
-      <button class="btn" id="next">Next</button>
+      <!-- Customize Button Text -->
+      <button class="btn" id="prev" disabled>Back</button>
+      <button class="btn" id="next">Continue</button>
     </div>
     <script src="script.js"></script>
   </body>

002-progress steps/script.js

@@ -3,7 +3,8 @@ const prev = document.getElementById("prev");
 const next = document.getElementById("next");
 const circles = document.querySelectorAll(".circle");
 
-let currentActive = 1;
+// Change Initial Active Step
+let currentActive = 2;
 
 next.addEventListener("click", () => {
   currentActive++;
@@ -32,3 +33,5 @@ const update = () => {
     next.disabled = false;
   }
 };
+
+update();

002-progress steps/style.css

@@ -1,7 +1,8 @@
 @import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");
 
 :root {
-  --line-border-fill: #3498db;
+  /* Change Active Step Color */
+  --line-border-fill: #e67e22;
   --line-border-empty: #e0e0e0;
 }
 
@@ -58,8 +59,9 @@ body {
 }
 
 .circle {
-  background-color: #fff;
-  color: #999;
+  /* Style Inactive Circles */
+  background-color: #fbfbfb;
+  color: #716969;
   border-radius: 50%;
   height: 30px;
   width: 30px;