Home

Welcome to the 02Project wiki!

Script commented

// Coletando os elementos HTML por ID. Como no HTML só podemos ter um único ID para cada elemento o getElementById sempre selecionara apenas 1 elemento. const progress = document.getElementById('progress') const prev = document.getElementById('prev') const next = document.getElementById('next') // O querySelectorAll coleta todos os elementos que atenderem os requisitos passados. Nesse caso todos elemtos com classe circle. E adicionam a um NodeList. const circles = document.querySelectorAll('.circle') // Criando um contador. let currentActive = 1 // Adcionando a escuta de click ao botão next. next.addEventListener('click', () => { // Adciona um ao contador a cada click. currentActive++ // Se o contador for maior do que a quantidade de elementos de circles(no caso quatro) é executada o código, se não for passa direto. if (currentActive > circles.length) { // Quando o contador estrapola para um número maior do que o número de circles que é quatro ele recebe o circles.length e volta a ser quatro, travando seu valor em no máximo quatro. currentActive = circles.length } // Executa a função update update() }) // Adcionando a escuta de click ao botão prev. prev.addEventListener('click', () => { // Subtrai um do contador a cada click. currentActive-- // Se o valor do contador for subtraido até chegar a 0 é executado o código. if (currentActive < 1) { // Quando o contador chega a zero ele recebe um, assim ele fica travado em no mínimo um. currentActive = 1 } // Executa a função update update() }) // Declarando a função update que compara o valor do contador com o index dos elementos no Node e adciona ou remove a classe "active". function update() { // for Each, executa um loop para cada elementos de circles. E como parametros passamos circle e idx que poderão ser utilizados dentro do loop. circles.forEach((circle, idx) => { // Se idx for menor que o contador, executa o código de if, se não for executa o de else. Onde idx recebe o index da posição do elemento atual no NodeList. if (idx < currentActive) { // Adciona a classe active ao elemento atual sendo passado no loop. circle.classList.add('active') } else { // remove a classe active do elemento atual sendo passado no loop. circle.classList.remove('active') } // na pratica o primeiro elemento de circles sempre ficara com a classe active, e ao clicar em next adicionamos tambem ao proximo elemento do NodeList essa classe, e ao clicar em prev, retiramos do ultimo elemento essa classe. }) // O querySelectorAll coleta todos os elementos que atenderem os requisitos passados. Nesse caso todos elemtos com a classe active. E adicionam a um NodeList. const actives = document.querySelectorAll('.active') // O style do elemento com classe progress vai receber uma alteração em width baseado no calculo que leva em consideração quantos elementos estão com a classe active. progress.style.width = // Na pratica essa alteração faz com que a linha entre os circles seja preenchida ou não com background azul da esquerda para direita, ao clicar em next e previw. ((actives.length - 1) / (circles.length - 1)) * 100 + '%' // Se o contador for igual a um. if (currentActive === 1) { //Desabilita o botão prev. prev.disabled = true // Se o contador for igual ao lenght de cirlces. } else if (currentActive === circles.length) { //Desabilita o botão next. next.disabled = true //Em ultimo caso. } else { //Habibila os botões prev.disabled = false next.disabled = false } }