2
respostas

Minha solução: desafio data-attribute

Além da funcionalidade de exibir/esconder, criei os botões solicitados via Javascript também:

//crio o botão de Exibir
var button = document.createElement('button');
button.setAttribute('type','button');
button.setAttribute('data-button','show');
button.appendChild(document.createTextNode('Exibir'));
document.body.appendChild(button);

//crio o botão de Esconder
var button = document.createElement('button');
button.setAttribute('type','button');
button.setAttribute('data-button','hidden');
button.appendChild(document.createTextNode('Esconder'));
document.body.appendChild(button);

//Seleciono os botões criados
const botoes = document.querySelectorAll("[data-button]");

//Seleciono a lista
const lista = document.querySelector("ul");

//Crio um evento de click em cada botão criado
botoes.forEach((botao) =>{
    botao.addEventListener("click",(evento) => {
        showLista(evento.target.dataset.button)

    })
});

//função responsável por exibir/esconder os itens da lista
function showLista(show){
    const itensLista = lista.querySelectorAll("[cor]");     

    itensLista.forEach(item => {
        if (show === 'show'){
            item.removeAttribute('hidden');
        }else{
            item.setAttribute('hidden', 'true');

        }
    });


}

Aceito sugestões de refatoração!

2 respostas

Oi Valmor, tudo bem?

Primeiramnete parabéns por aceitar o desafio e concluí-lo! Gostei muito das funcionalidades que criou! Parabéns por ir além :D

Espero que esteja gostando da experiência de aprendizado.

Um abraço e bons estudos.

Olá Valmor, poderia me explicar pq vc criou os botões via JS? eu nunca tinha visto isso antes, achei fantástico o que vc fez