Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] Solução AluraTintas

Fiz um pouquinho diferente: mudei o texto do botão que já existe dinamicamente e, o mesmo botão, mostra e oculta a lista:

function mostraTintas(e) {
  const tintas = document.querySelector("[data-lista]")
  const botao = document.querySelector("[data-button]")
  const visivel = window.getComputedStyle(tintas)

  if (visivel.display === "none"){ 
    tintas.style = "display:block"
    botao.innerText = "Aluratintas em estoque (ocultar) :"
  } else {
    tintas.style = "display:none"
     botao.innerText = "Aluratintas em estoque (exibir) :"
  }
}

coloquei data attributes na lista e no botão:

<button onclick="mostraTintas(this)" data-button>Aluratintas em estoque:</button>
.
.
.
 <ul class="lista" data-lista>

https://codepen.io/rauldionisio/full/dygKKjN

1 resposta
solução!

Olá Raul, tudo bem?

Gostei bastante da sua solução para o projeto AluraTintas. É uma forma criativa de mostrar e ocultar a lista utilizando o mesmo botão e mudando o texto dinamicamente.

Você utilizou os data attributes para selecionar o botão e a lista de tintas, o que é uma boa prática para evitar conflitos com outros elementos da página.

Sua função mostraTintas() está bem estruturada e fácil de entender. Além disso, você utilizou o window.getComputedStyle() para verificar se a lista está visível ou não, o que é uma ótima forma de garantir que o código funcione corretamente em diferentes navegadores.

Parabéns pela solução e continue praticando!

Espero ter ajudado, qualquer dúvida, me coloco à disposição! Bons estudos!

Sucesso

Um grande abraço e até mais!

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

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software