40 lines
911 B
JavaScript
40 lines
911 B
JavaScript
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', () => {
|
|
if (currentActive < circles.length) {
|
|
currentActive++;
|
|
}
|
|
|
|
update();
|
|
});
|
|
|
|
prev.addEventListener('click', () => {
|
|
if (currentActive > 1) {
|
|
currentActive--;
|
|
}
|
|
update();
|
|
});
|
|
|
|
function update() {
|
|
currentActive === 1 ? (prev.disabled = true) : (prev.disabled = false);
|
|
currentActive === circles.length
|
|
? (next.disabled = true)
|
|
: (next.disabled = false);
|
|
|
|
circles.forEach((circle, index) => {
|
|
if (index < currentActive) {
|
|
circle.classList.add('active');
|
|
} else {
|
|
circle.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
progress.style.width =
|
|
((currentActive - 1) / (circles.length - 1)) * 100 + '%';
|
|
}
|