Solução para troca de cor

Boa tarde Alura,

Compartilho com vocês minha solução para uma nova funcionalidade de troca de cor do robô.

Basicamente, incluo mais 3 elementos. Um botão +, - e a label que apresenta a cor selecionada.

A função trocaCor somente é ativada caso se o data-attribute seja = "cor".

Esta função itera sobre uma lista de cores ['vermelho','azul', ...], sendo o máximo seu tamanho-1 e mínimo 0. A função acumula um index que associa a cor da lista e por fim altera a url da imagem.

HTML

...
<section class="robotron">
            <img class="robo" src=**"img/Robotron 2000 - Azul.png"** alt="Robotron" id="robotron">
            <figcaption class="titulo">ROBOTRON <br>2000</figcaption>
        </section>
...
 <section class="equipamentos">
            <form action="" class="montador">
                <div class="box montador-conteudo">
                    <div class="peca">
                        <label for="" class="peca-titulo">Cor</label>
                        <div class="controle">
                            **<buttom class="controle-ajuste-cor" data-controle="-" data-peca="cor">-</buttom>
                            <input type="text" class="controle-contador-cor" value="Azul" data-contador>
                            <buttom class="controle-ajuste-cor" data-controle="+" data-peca="cor">+</buttom>**
                        </div>
                    </div>
                    ...

CSS (ajuste de tamanho da label)

...

.controle-contador-cor {
    width: 100px;
    height: 35px;
    background: none;
    border: 0;
    margin: 0 1rem;
    color: var(--main-branco);
    text-align: center;
    font-size: 2.5em;
    display: inline-flex;
    align-items: center;
    padding-top: 8px;
}
...

JS

const cores = ["Azul","Vermelho", "Amarelo", "Branco", "Preto", "Rosa"];

const pecas = {
...}

controle.forEach((elemento) => {
    elemento.addEventListener('click', (evento) => {
    if (evento.target.dataset.peca != "cor"){
                    
        manipulaDados(evento.target.dataset.controle, evento.target.parentNode);
        atualizaEstasticas(evento.target.dataset.peca, evento.target.dataset.controle);
    }
    else{
        **trocaCor(evento.target.dataset.controle, evento.target.parentNode);**
    }
    })
    
});


function trocaCor(operacao, node_pai){
    const tipo = node_pai.querySelector('[data-contador]');
    var corAtual = tipo.value;
    var indexCor = cores.indexOf(corAtual);
    if((operacao === "+") && (indexCor < cores.length-1)){
        indexCor += 1
        tipo.value = cores[indexCor]
    }
    if((operacao === "-") && (indexCor > 0)){
        indexCor -= 1
        tipo.value = cores[indexCor]
    }
    var imagem = document.querySelector('.robo');
    var srcImagem = `img/Robotron 2000 - ${tipo.value}.png`; //template string
    document.getElementById("robotron").src=srcImagem;
};