1
resposta

Atividade data-attribute

ARQUIVO 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 onclick="mostraTintas()" data-tinta >Mostrar tintas em estoque:</button>

  <ul class="lista">
    <li cor="laranja" tipo="tinta-exterior" class="item" id="ocultar">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="ocultaTintas()" data-oculta >Ocultar lista de 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>

ARQUIVO JS

const tinta = document.querySelector('[data-tinta]');
const lista = document.querySelector('.lista');
const oculta = document.querySelector('[data-oculta]');

tinta.addEventListener('click', (evento) => {
    console.log('passeiaqui');

    lista.style.visibility = "visible";
})

oculta.addEventListener('click', (evento) => {
    console.log('passei aqui');

    lista.style.visibility = "hidden";
})

Está correto?

1 resposta

Oi, Karoline! Tudo bom?

Parabéns pela conclusão desta atividade, está usando corretamente os data-attributes e sua solução resolve o problema citado na atividade.

Bons estudos!