1
resposta

[Projeto] Solução seletor de cores

Minha solução para a implementação de um seletor de cores para o Robô.

Link: https://robotron-2000-swart-eight.vercel.app/

Página robotron-2000

HTML:

<section class="robotron">
            <img class="robo-imagem" id="robo" src="img/robotron.png" alt="Robotron" id="robotron">
            <figcaption class="titulo">ROBOTRON <br>2000</figcaption>
        </section>
<section>
            <div class="seletor">
                <h2 style="font-size: 1.7em;">Spray</h2>
                <button class="botao" id="Vermelho"></button>
                <button class="botao" id="Azul"></button>
                <button class="botao" id="Amarelo"></button>
                <button class="botao" id="Branco"></button>
                <button class="botao" id="Preto"></button>
                <button class="botao" id="Rosa"></button>
            </div>
        </section>

CSS:

#Vermelho {
    background: no-repeat center/70% url(../img/Vermelho/Robotron\ 2000\ -\ Vermelho.png);
    background-color: var(--main-branco);
  }

  #Azul {
    background: no-repeat center/70% url(../img/Azul/Robotron\ 2000\ -\ Azul.png);
    background-color: var(--main-branco);
  }

  #Amarelo {
    background: no-repeat center/70% url(../img/Amarelo/Robotron\ 2000\ -\ Amarelo.png);
    background-color: var(--main-branco);
  }

  #Branco {
    background: no-repeat center/70% url(../img/Branco/Robotron\ 2000\ -\ Branco.png);
    background-color: var(--main-branco);
  }

  #Preto {
    background: no-repeat center/70% url(../img/Preto/Robotron\ 2000\ -\ Preto.png);
    background-color: var(--main-branco);
  }

  #Rosa {
    background: no-repeat center/70% url(../img/Rosa/Robotron\ 2000\ -\ Rosa.png);
    background-color: var(--main-branco);
  }

JS:

const botoes = document.querySelectorAll(".botao")

botoes.forEach( (elemento) => {
    elemento.addEventListener("click", (evento) => {
        mudaCor(evento.target.id)
    })
}) 

function mudaCor(cor){
    document.querySelector(".robo-imagem").src="img/" + cor + "/Robotron 2000 - " + cor + ".png";
}
1 resposta

Oi Emanuel, tudo bem?

Notei que você está utilizando JavaScript para adicionar um evento de clique aos botões do seletor de cores. Quando um botão é clicado, a função mudaCor é chamada, alterando a imagem do Robô de acordo com a cor selecionada, sua lógica está corretinha.

Muito obrigada por compartilhar com a gente a sua solução e parabéns por praticar!

Um abraço e bons estudos.