1
resposta

Minha solução (diferente do instrutor)

Olá a todos, Segue a minha solução do desafio proposto. Ela ficou diferente do instrutor, pois criei um botão a mais e coloquei ids no botões no HTML e criei duas funções para mostrar e sumir a lista de tintas no JavaScript.

Caso tenham sugestões de melhorias, elas serão muito bem vindas. Caso tenham dúvidas de como resolvi, fico à disposição para ajudar.

Tive um pouco de dificuldade para chegar na solução e pesquisei na internet para descobrir uma forma.

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 id="show" data-botao="none">Aluratintas em estoque:</button>
  <button id="hide" data-botao="">Ocultar 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>

  <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>

JavaScript

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

botao.forEach((elemento) => {
    elemento.addEventListener("click", (evento) => {
        mostraTintas(evento.target.id);
        someTintas(evento.target.id)
})
})

function mostraTintas(status) {
    if (status === "show") {
        lista.style.display = "block";
    }
}

function someTintas(status) {
    if (status === "hide") {
        lista.style.display = "none";
    }
}
1 resposta

Olá Camila!

Parabéns por encontrar uma solução diferente para o desafio proposto! É ótimo ver que você está explorando diferentes abordagens e colocando em prática o que aprendeu.

Sua solução de adicionar um botão extra e utilizar IDs nos botões no HTML é interessante. Isso permite que você tenha mais controle sobre cada botão e possa criar funções específicas para mostrar e esconder a lista de tintas, caso tenhamos uma continuação graças a esse "controle" ele vai se comportar muito bem, parabéns!

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!