Entrar Ainda não tem acesso?
2
respostas

Minha Resolução

Referente ao curso JavaScript: manipulando o DOM, no capítulo Montando um robô e atividade Consolidando o seu conhecimento

por BRUNO CESAR DE SOUZA GUIMARAES
| 84.5k xp | 39 posts
const botoes = document.querySelectorAll('[data-botao]');
const cores = document.querySelectorAll('[data-elemento]');

botoes.forEach((el)=>{
    el.addEventListener('click', (ev)=> {
        if(ev.target.dataset.botao === 'mostrar-tintas') mostraTintas()

        if(ev.target.dataset.botao === 'apagar-tintas')escondeTintas()
    })
})


function mostraTintas(){
    cores.forEach((ev) => ev.style.visibility = 'visible')
}

function escondeTintas(){
    cores.forEach((ev) => ev.style.visibility = 'hidden')
}

As funcoes mostraTintas() e escondeTintas() ficaram fora do eventEventListener pois não achei uma boa ideia por um foreach dentro de outro, caso alguém tenha uma resolução mais elegante, compartilhe por favor.

2 respostas
por BRUNO CESAR DE SOUZA GUIMARAES
| 84.5k xp | 39 posts

Refatorando:

const botoes = document.querySelectorAll('[data-botao]');
const cores = document.querySelectorAll('[data-elemento]');

botoes.forEach((el)=>{
    el.addEventListener('click', (ev)=> {
        if(ev.target.dataset.botao === 'mostrar-tintas')mostrarTintaNaTelaOuNao('visible')
        if(ev.target.dataset.botao === 'apagar-tintas')mostrarTintaNaTelaOuNao('hidden')
    })
})


function mostrarTintaNaTelaOuNao(param){
    cores.forEach((ev) => ev.style.visibility = param)
}

Conforme eu for melhorando o código vou jogando o resultando aqui.

por Lorena Garcia
| 8372k xp | 12222 posts
Alura Scuba Team Suporte Educacional

Oi Bruno, tudo bem?

Parabéns por se dedicar aos estudos! Muito bom ver que você vai sempre refatorando e buscando a melhor forma de codar :D

Gostei muito da sua solução!

Continue os bons estudos.

Abraço.