프로그레소 엠 에타파스

Antes de tudo aqui vai o site dos criadores do desafio. Eles criaram um curso na Udemy que é super didático mesmo para quem não sabe inglês e deixaram o link do repositório no GitHub. https://50projects50days.com/

Dia 2: 진행 단계

Mais do que ensinar conceitos Importantes, o projeto de hoje é uma funcionalidade que pode ser aplicada em qualquer sistema web.
Os requisitos ainda são os mesmos, mas dessa vez squeezeo que bebi um pouco mais de cafe. Pois bem, ai vai.


O HTML desse projeto conta com uma div container que abriga uma outra div, que vamos de chamar de container de Progresso, e botões de anterior e próximo. divs nesse container de progresso são o supportorte para o JavaScript, que aparece mais a frente.

<div class="container-progresso">

                <div class="progresso" id="progresso"></div>

                <div class="circulo ativo">1</div>

                <div class="circulo">2</div>

                <div class="circulo">3</div>

                <div class="circulo">4</div>

            </div>

O CSS merece destaque especial porque tem uns detalhes tão pequenos que deram uma diferença e tanto. 예를 들어 진행 중인 컨테이너가 없습니다.

.container-progresso::before{
    content: '';
    background-color: #e0e0e0;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    z-index: -1;
}

O 콘텐츠는 HTML이 존재하지 않는 요소에 포함되지 않습니다.

.botao:active{
    transform: scale(0.98);
}

.botao:focus{
    outline: 0;
}

.botao:disabled{
    background-color: #e0e0e0;
    cursor: not-allowed;
}

O focus e uma pseudo-classe CSS e o valor attribuído a ela removeu a linha padrão de botão que o navegador deu quando o elemento foi criado.

É bem Legal lembrar que todo elemento HTML já tem uma estilização pre-definida que pode ser alterada com CSS. O botão é só um exemplo, quase tudo pode ser alterado, até a seleção de texto (e se ele pode ser copiado ou não!)

의사 클래스 비활성화 정의된 용맹 허용되지 않는 커서 que aparece para um botão desativo.

JavaScript 없음, quatro variáveis ​​foram criadas para receber os elementos a serem alterados

proximo.addEventListener('click', () =>{
    ativoAtualmente++

    if(ativoAtualmente > circulos.length){
        ativoAtualmente = circulos.length
    } 

    atualizar()
})

A função atualizar vai ser quem faz as mudanças necessárias para a aplicação funcionar. Para o botão próximo, é ela a responsável por deixar os círculos da cor roxa, ao clicar.

function atualizar(){
    circulos.forEach((circulo, i) =>{
        if(i < ativoAtualmente) {
            circulo.classList.add('ativo')
        } else {
            circulo.classList.remove('ativo')
        }
    })

    const ativos = document.querySelectorAll('.ativo')

    progresso.style.width = (ativos.length - 1) / (circulos.length - 1) * 100 + '%'

    if(ativoAtualmente ===1){
        anterior.disabled = true
    } else if(ativoAtualmente === circulos.length){
        proximo.disabled = true
    } else{
        anterior.disabled = false
        proximo.disabled = false
    }
}

Também é a função atualizar, por meio do botão anterior quem vai desmarcar os círculos. nos ativos, essa função tão especial faz um cálculo que permite que a cada clique no botão, a linha criada no CSS seja pintada, seja de roxo ou cinza, mostrando o progresso.

Por último, a atualizar ativa e desativa os botões através de uma esttrutura condicional, cumprindo todos os requisitos do projeto.



Essa aplicação dispensa dicas de uso, tenho certeza que você já viu diversos 사이트 전자 블로그 활용도 desa ferramenta e agora você já tem noção de por onde começar criar a sua.

에스페로 퀘 텐햄 고스타도. 에테 마이스!


Caso encontre algum erro, queira tirar dúvidas ou fazer um elogio, chega aí para a gente conversar

[email protected] 트위터 @E_thrgnrk