50 Projetos em 50 Dias

Antes de tudo aqui vai o site dos criadores do desafio. 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 1: 확장 카드

HTML, CSS 및 JavaScript는 Front-End의 세 가지 작업입니다. Não tem um desenvolvedor que já não tenha sofrido para alinhar um objeto ao centro ou tenha ficado horas trabalhando na responsividade de um site. Esses queridinhos estão em todas as páginas web que abrimos e a demanda por profissionais preparados está cada vez maior, então nada melhor do que treinar um pouco.

VS Code 설치 및 확장된 Live Server는 기본 기술에 대한 기본 정보와 정확성을 필요로 합니다.



HTML에 대한 최초의 가치는 무엇입니까? Uma div principal chamada container vai receber as divs secundárias.

<div class="container">

            <div class="painel ativo" width="953" height="635" style="background-image: url('/images/20190112_105723.jpg')">
                <h3>Terra</h3>
            </div>

            <div class="painel" width="953" height="635" style="background-image: url('/images/20190125_081325.jpg')">
                <h3>Fogo</h3>
            </div>

'painel ativo' é a classe que vai receber a estilização para expandir ao ser clicada.

CSS temos alguns pontos legais가 없습니다. A altura das fotos, por exemplo, ocupando 80% da tela vista com a medida vh, O border-radius que permite as bordas arredondadas e a transição já configurada deixam o nosso projeto visualmente pronto.

Algumas linhas de código foram removidas. Esse não é o CSS 적분.

.painel{
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 80vh;
    border-radius: 50px;
    flex: 0.5;
    margin: 10px;
    transition: flex 0.7s ease-in;
}
.painel.ativo{
    flex: 5;
}

Mas a verdadeira estrela aparece com poucas linhas de código. O JavaScript tem apenas 14 linhas, mas é ele que vai permitir que ao clicar em uma imagem, ela expanda e as outras retraiam.

 painel.addEventListener('click', () => {
        removerAtivo()
        painel.classList.add('ativo')
    })

추가 도구를 추가하거나 'ativo' 및 classList 제거 도구를 사용하여 'ativo' apenas na imagem clicada를 추가할 수 있습니다.

function removerAtivo(){
    paineis.forEach(painel => {
        painel.classList.remove('ativo')
    })
}

Essa는 DOM에 기능을 합니다. De forma resumida a Document Object Model transforma as tag HTML em objetos e com o JavaScript conseguimos alterar esses "objetos". 포괄적인 변경 클래스 e resultemente sua estilização. Eu usei essa técnica em um outro projeto, uma calculadora de IMC em que de acordo com o gênero o avatar mudava.





Esse projeto é simples, mas fica muito bonito e trabalha conceitos Importantes no desenvolvimento web, como manipulações e estilização com CSS. Eu consigo pensar em diversas ideias para aprimorar a ferramenta, inclusive permitindo que os próprios usuários adicionassem fotos e gerassem um GIF para baixar. De qualquer forma, pequenos projetos como esse demonstram habilidade em conceitos básicos muito Importantes e isso vale muito a pena.

Algo que não falei lá em cima foi sobre a resolução das imagens. É muito interessante que as fotos escolhidas tenham pelo menos 900px de largura, ou esse efeito de expansão não fica tão legal. Unsplash.com에서 사용할 수 있는 이미지는 은행에서 사용할 수 없으며 프로세스 크리에이티보는 중요하지 않습니다.

Espero que tenham gostado. 먹었다!


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

[email protected] ou 펠로 트위터 @E_thrgnrk