[Projeto] Desafio concluido!

Link do projeto: Vercel

Link do Repositório: GitHub

Adicionei uma div na mesma section da imagem do robo.

HTML

<section class="robotron">
            <div class="botoes">
                <button class="cor_robo" id="preto"></button>
                <button class="cor_robo" id="azul"></button>
                <button class="cor_robo" id="vermelho"></button>
                <button class="cor_robo" id="amarelo"></button>
                <button class="cor_robo" id="branco"></button>
                <button class="cor_robo" id="rosa"></button>
            </div>
            <img class="robo" src="img/robotron.png" alt="Robotron" id="robotron">
            <figcaption class="titulo">ROBOTRON <br>2000</figcaption>
        </section>

Decorei so o básico dos botões mas tive que mudar procurar como fazer pra poder clicar nos botões mesmo sobrepondo a imagem, descobri que da pra fazer isso com a propiedade z-index.

CSS

.botoes{
    display: flex;
    gap: 0.5em;
}

#preto{
    background-color: rgb(15, 14, 14);
}

#azul{
    background-color: rgb(38, 38, 168);
}

#vermelho{
    background-color: rgb(209, 44, 44);
}

#amarelo{
    background-color: rgb(233, 233, 49);
}

#branco {
    background-color: rgb(241, 241, 241);
}

#rosa {
    background-color: rgb(245, 135, 154);
}

.cor_robo{
    border-radius: 50%;
    width: 30px;
    height: 30px;
    z-index:999;
}

e por fim fiz uma função simples pra mudar a cor ao clicar nos botões:

Java

const cor = document.querySelectorAll(".cor_robo");

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

function escolheCor(escolha){
    const mudacor = document.getElementById("robotron");
    mudacor.src = "img/robotron-"+escolha+".png";
}