Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] Minha solução

Olá, segue meu código referente ao desafio:

Adicionei os botões com as imagens dos robôs:

 <section class="muda-cor">
            <button class="botao-cor" ><img data-cor="Amarelo"  class="img-cor" src="img/Robotron 2000 - Amarelo.png"></button>
            <button class="botao-cor" ><img data-cor="Azul"  class="img-cor" src="img/Robotron 2000 - Azul.png"></button>
            <button class="botao-cor" ><img data-cor="Branco"  class="img-cor" src="img/Robotron 2000 - Branco.png"></button>
            <button class="botao-cor" ><img data-cor="Preto"  class="img-cor" src="img/Robotron 2000 - Preto.png"></button>
            <button class="botao-cor" ><img data-cor="Rosa"  class="img-cor" src="img/Robotron 2000 - Rosa.png"></button>
            <button class="botao-cor" ><img data-cor="Vermelho"  class="img-cor" src="img/Robotron 2000 - Vermelho.png"></button>
        </section>

CSS dos mesmos: (quanto ao CSS, ainda não estou muito satisfeito com o posicionamento de alguns elementos, vou tentar arrumar depois)


.muda-cor {
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin-left: 4rem;  
    z-index: 2;
}

.botao-cor {
    width: 5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    padding: 0.25rem;
    background-color: rgba(192, 188, 188, 0.863);
}

.botao-cor:hover {
    transform: scale(1.2);
    transition: 1s;
}

.img-cor {
    width: 5rem;    
}

No JS usei uma função parecida com a do instrutor, mas ao invés do 'onclick', usei o addEventListener, aproveitando pra praticar o forEach e o uso dos data-attribute da maneira que fomos ensinados:

const cores = document.querySelectorAll(".botao-cor")

cores.forEach ( (elemento) =>{
    elemento.addEventListener("click", (e) => mudaCor(e.target.dataset.cor))

})

function mudaCor(cor) {
    document.querySelector(".robo").src = `img/Robotron 2000 - ${cor}.png`;
}

Link no GitHub:

https://mms4ntos.github.io/robotron-2000/?

Muito obrigado pelo curso!

1 resposta
solução!

Olá Matheus, tudo bem?

Parabéns pelo projeto e por ter concluído o desafio!

Sobre o CSS, é normal não ficarmos satisfeitos com o posicionamento dos elementos logo de primeira, mas com o tempo e prática, você vai aprimorando suas habilidades.

Quanto ao JavaScript, ficou ótimo o uso do addEventListener e do forEach, isso mostra que você está praticando e se esforçando para aprender cada vez mais.

Continue assim e não desista de aprender!

Um abraço e bons estudos.