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!