diff --git a/my code/02-progress-steps/index.html b/my code/02-progress-steps/index.html new file mode 100644 index 0000000..441fdbe --- /dev/null +++ b/my code/02-progress-steps/index.html @@ -0,0 +1,38 @@ + + + + + + + + + 02-progress-steps + + + +
+
+
+ + + +
+ +
+ 1 + 2 + 3 + 4 +
+
+ +
+ + +
+
+ + + + + \ No newline at end of file diff --git a/my code/02-progress-steps/script.js b/my code/02-progress-steps/script.js new file mode 100644 index 0000000..589ffd3 --- /dev/null +++ b/my code/02-progress-steps/script.js @@ -0,0 +1,53 @@ +let currentStep = 1; +const numbers = document.querySelectorAll(".number"); +const bars = document.querySelectorAll(".bar"); + +const prev = () => { + currentStep--; + + if (currentStep < 1) { + currentStep = 1; + } + + update(); +}; + +const next = () => { + currentStep++; + + if (currentStep > 4) { + currentStep = 4; + } + + update(); +}; + +function update() { + numbers.forEach((number, index) => { + if (index < currentStep) { + number.classList.add("active"); + } else { + number.classList.remove("active"); + } + }); + + bars.forEach((bar, index) => { + if (index < currentStep - 1) { + bar.classList.add("active-bar"); + } else { + bar.classList.remove("active-bar"); + } + }); + + if (currentStep > 1) { + document.getElementById("prev").disabled = false; + } else { + document.getElementById("prev").disabled = true; + } + + if (currentStep < 4) { + document.getElementById("next").disabled = false; + } else { + document.getElementById("next").disabled = true; + } +} diff --git a/my code/02-progress-steps/style.css b/my code/02-progress-steps/style.css new file mode 100644 index 0000000..06a8d5e --- /dev/null +++ b/my code/02-progress-steps/style.css @@ -0,0 +1,88 @@ +* { + margin: 0; + padding: 0; +} + +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + font-family: Arial, Helvetica, sans-serif; +} + +.wrapper { + width: 300px; +} + +.container { + position: relative; +} + +.container, +.number-container { + width: 100%; +} + +.number-container { + display: flex; + justify-content: space-between; +} + +.number { + background: #fff; + width: 30px; + text-align: center; + height: 30px; + border-radius: 50%; + border: 4px solid #c4c4c4; + line-height: 30px; + transition: border-color 0.3s ease-in; +} + +.active { + border-color: rgb(21, 95, 255); +} + +.bar-wrapper { + position: absolute; + height: 5px; + width: 300px; + top: 50%; + display: flex; + transform: translateY(-50%); + z-index: -1; +} + +.bar { + width: calc(100% / 3); + display: block; + height: 5px; + background: #c4c4c4; + transition: background-color 0.3s linear; +} + +.active-bar { + background-color: rgb(21, 95, 255); +} + +.button-wrapper { + margin-top: 10px; + justify-content: center; + display: flex; +} + +.btn { + background-color: rgb(21, 95, 255); + color: #ffffff; + font-family: Arial, Helvetica, sans-serif; + padding: 10px 15px; + border: unset; + border-radius: 5px; + margin: 10px; + font-size: 16px; +} + +button:disabled { + background-color: #c4c4c4; +}