1
resposta

Minha solução

Eu resolvi assim:

JS:

const cores = document.querySelectorAll("[cor]");

function mostraTintas()
{
    cores.forEach((elemento) =>
    {
        elemento.style.visibility = "visible";
    });
}

function escondeTintas()
{
    cores.forEach((elemento) =>
    {
        elemento.style.visibility = "hidden";
    });
}

HTML:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Manipulando o DOM - Aula 3</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>

  <button>Aluratintas em estoque:</button>

  <ul class="lista">
    <li cor="laranja" tipo="tinta-exterior" class="item">Tinta laranja</li>
    <li cor="vermelho" tipo="tinta-interior" class="item">Tinta vermelha</li>
    <li cor="branco" tipo="tinta-interior" class="item">Tinta branca</li>
    <li cor="amarelo" tipo="tinta-exterior" class="item">Tinta amarela</li>
    <li cor="rosa" tipo="tinta-exterior" class="item">Tinta rosa</li>
    <li cor="preto" tipo="tinta-exterior" class="item">Tinta preta</li>
  </ul>

  <button onclick="mostraTintas()">Mostrar Tintas</button>
  <button onclick="escondeTintas()">Esconder Tintas</button>

  <a href="https://alura.com.br/" target="_blank"><img src="https://www.alura.com.br/assets/img/home/alura-logo.svg" alt="" class="alura-logo"></a>
  <script src="main.js"></script>
</body>
</html>
1 resposta

Olá, Rulian!

Agradeço por compartilhar sua solução conosco. Parece que você está manipulando o DOM para mostrar e esconder as tintas da lista quando os botões são clicados. Sua abordagem está correta e parece estar funcionando bem.

No seu código JavaScript, você está utilizando o método querySelectorAll para selecionar todos os elementos com o atributo cor. Em seguida, você define duas funções, mostraTintas e escondeTintas, que iteram sobre os elementos selecionados e alteram a propriedade visibility para "visible" e "hidden", respectivamente.

No HTML, você adicionou os botões "Mostrar Tintas" e "Esconder Tintas" com os atributos onclick que chamam as funções correspondentes.

No geral, sua solução parece estar correta e eficiente. Continue praticando e explorando mais sobre a manipulação do DOM em JavaScript.

Espero ter ajudado e bons estudos!