Geek Logbook

Tech sea log book

50projectsIn50days – Day 2: Progress Steps

The projects related to the progress step it is generated by an another script in JavaScript that change the class in the DOM.

There are two event listeners in the script and there is a function that update the CSS. So, the new style is following:

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
    }
}

The project has a an average difficulty and it’s instructive to understand who works the event listeners and the updates in the CSS classes. But I wonder if it is reusable because the progress steps as I can see in the practices is something that there are in a lot of pre built solutions. Tu sum up, a fun project that it’s not reusable.

Project code

Project Demo

Leave a Reply

Your email address will not be published. Required fields are marked *.

*
*
You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>