1
resposta

[Resolução] JavaScript: Manipulando o DOM - Módulo 4 Aula 06

Apenas compartilhando a solução que achei para o desafio proposto.

1- Comecei por adicionar o botão "Esconder" e alterar os atributos do já existente:

<button data-botao="mostrar">Aluratintas em estoque:</button>
<button data-botao="esconder">Esconder</button>

2- Implementei uma estilização simples para uma classe especifica no arquivo CSS:

.esconder{
  display: none;
}

3- Depois implementei o seguinte código JS:

const lista = document.querySelector('.lista');
var botoes = document.querySelectorAll('[data-botao]')

botoes.forEach((botao) => {
  botao.addEventListener('click', (evento) => {
    mostraEscondeTinda(evento.target.dataset.botao)
  })
})

function mostraEscondeTinda(operacao) {
  if(operacao === 'mostrar') lista.classList.remove('esconder');
  else if(operacao === 'esconder') lista.classList.add('esconder');
  else alert(`A operação escolhida (${operacao}) é inválida!`);
}
1 resposta

Oi Jonas, tudo bem?

Obrigada por compartilhar com a gente o seu código. E parabéns por ter aceito o desafio e concluí-lo, gostei bastante da sua solução!

Fazer esses desafios é uma ótima maneira de praticar :D

Bons estudos.

Abraço.