Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const progressFill = document.querySelector('.progress-fill');
+ const milestones = document.querySelectorAll('.milestone');
+ const decreaseBtn = document.getElementById('decreaseBtn');
+ const increaseBtn = document.getElementById('increaseBtn');
+
+ let currentProgress = 0;
+
+ function updateProgress(progress) {
+ currentProgress = Math.max(0, Math.min(100, progress));
+ progressFill.style.width = `${currentProgress}%`;
+
+ milestones.forEach(milestone => {
+ const milestonePercent = parseInt(milestone.dataset.percent);
+ if (milestonePercent <= currentProgress) {
+ milestone.classList.add('active');
+ } else {
+ milestone.classList.remove('active');
+ }
+ });
+
+ // Update button states
+ decreaseBtn.disabled = currentProgress === 0;
+ increaseBtn.disabled = currentProgress === 100;
+ }
+
+ // Click handlers for milestone dots
+ milestones.forEach(milestone => {
+ milestone.addEventListener('click', () => {
+ const newProgress = parseInt(milestone.dataset.percent);
+ updateProgress(newProgress);
+ });
+ });
+
+ // Button click handlers
+ decreaseBtn.addEventListener('click', () => {
+ const prevMilestone = [...milestones].reverse().find(milestone =>
+ parseInt(milestone.dataset.percent) < currentProgress
+ );
+ if (prevMilestone) {
+ updateProgress(parseInt(prevMilestone.dataset.percent));
+ }
+ });
+
+ increaseBtn.addEventListener('click', () => {
+ const nextMilestone = [...milestones].find(milestone =>
+ parseInt(milestone.dataset.percent) > currentProgress
+ );
+ if (nextMilestone) {
+ updateProgress(parseInt(nextMilestone.dataset.percent));
+ }
+ });
+
+ // Initialize progress
+ updateProgress(0);
+ });
