You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.1 KiB
49 lines
1.1 KiB
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', () => {
|
|
currentActive++
|
|
|
|
if(currentActive > circles.length) {
|
|
currentActive = circles.length
|
|
}
|
|
|
|
update()
|
|
})
|
|
|
|
prev.addEventListener('click', () => {
|
|
currentActive--
|
|
|
|
if(currentActive < 1) {
|
|
currentActive = 1
|
|
}
|
|
|
|
update()
|
|
})
|
|
|
|
function update() {
|
|
circles.forEach((circle, idx) => {
|
|
if(idx < currentActive) {
|
|
circle.classList.add('active')
|
|
} else {
|
|
circle.classList.remove('active')
|
|
}
|
|
})
|
|
|
|
const actives = document.querySelectorAll('.active')
|
|
|
|
progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%'
|
|
|
|
if(currentActive === 1) {
|
|
prev.disabled = true
|
|
} else if(currentActive === circles.length) {
|
|
next.disabled = true
|
|
} else {
|
|
prev.disabled = false
|
|
next.disabled = false
|
|
}
|
|
} |