Received Messages:
+ diff --git a/progressbar.mjs b/progressbar.mjs new file mode 100644 index 0000000..d80bd8a --- /dev/null +++ b/progressbar.mjs @@ -0,0 +1,67 @@ +export class ProgressBar { + constructor(container) { + this.currentStep = 0; + this.totalSteps = 7; + this.progressContainer = document.createElement('div'); + this.progressContainer.className = 'progress-container'; + + // Create progress steps + for (let i = 0; i < this.totalSteps; i++) { + const step = document.createElement('div'); + step.className = 'progress-step'; + step.dataset.step = i; + this.progressContainer.appendChild(step); + } + + container.appendChild(this.progressContainer); + + // Create mock progress button + this.mockButton = document.createElement('button'); + this.mockButton.textContent = 'Next Step'; + this.mockButton.className = 'mock-button'; + this.mockButton.addEventListener('click', () => this.incrementProgress()); + + container.appendChild(this.mockButton); + + this.updateProgress(); + } + + incrementProgress() { + if (this.currentStep < this.totalSteps) { + this.currentStep++; + this.updateProgress(); + } + + if (this.currentStep === this.totalSteps) { + this.mockButton.disabled = true; + this.mockButton.textContent = 'Completed'; + } + } + + updateProgress() { + const steps = this.progressContainer.querySelectorAll('.progress-step'); + steps.forEach((step, index) => { + if (index < this.currentStep) { + step.classList.add('active'); + } else { + step.classList.remove('active'); + } + }); + } + + reset() { + this.currentStep = 0; + this.mockButton.disabled = false; + this.mockButton.textContent = 'Next Step'; + this.updateProgress(); + } +} + +// Initialize progress bar when DOM is loaded +document.addEventListener('DOMContentLoaded', () => { + const container = document.querySelector('.progress-bar-container'); + if (container) { + const progressBar = new ProgressBar(container); + window.progressBar = progressBar; // Make it globally accessible for testing + } +}); \ No newline at end of file diff --git a/style.css b/style.css index 00dc60a..8095c26 100755 --- a/style.css +++ b/style.css @@ -6,3 +6,113 @@ body { justify-content: center; overflow: hidden; } + +.progress-bar-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + width: 100%; + max-width: 800px; + padding: 2rem; +} + +.progress-container { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + position: relative; + margin-bottom: 30px; +} + +.progress-container::before { + content: ''; + position: absolute; + top: 50%; + left: 0; + height: 4px; + width: 100%; + background-color: aliceblue; + transform: translateY(-50%); + z-index: 0; +} + +.progress-step { + width: 30px; + height: 30px; + background-color: aliceblue; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + position: relative; + z-index: 1; + transition: all 0.3s ease; + cursor: pointer; +} + +.progress-step:hover { + transform: scale(1.1); + box-shadow: 0 0 10px rgba(30, 144, 255, 0.3); +} + +.progress-step.active { + background-color: dodgerblue; +} + +.progress-step.active ~ .progress-step { + background-color: aliceblue; +} + +.mock-button { + padding: 12px 24px; + font-size: 1rem; + background-color: dodgerblue; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: all 0.3s ease; +} + +.mock-button:hover:not(:disabled) { + background-color: #1e74d0; + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.mock-button:disabled { + background-color: #ccc; + cursor: not-allowed; + opacity: 0.7; +} + +@media screen and (max-width: 600px) { + .progress-container { + flex-direction: row; + flex-wrap: wrap; + gap: 1rem; + } + + .progress-step { + width: 25px; + height: 25px; + } + + .mock-button { + padding: 10px 20px; + font-size: 0.9rem; + } +} + +@media screen and (max-width: 400px) { + .progress-bar-container { + padding: 1rem; + } + + .progress-step { + width: 20px; + height: 20px; + } +} \ No newline at end of file