Olá pessoal, eu penso sempre que as formações da alura nos oferecem um leque enorme de ferramentas para usarmos como Dev's Front-End, logo, unindo os conhecimentos deste curso e o curso de Javascript Manipulando o DOM desenvolvi a seguinte solução abaixo:
HTML
Adicionei um data-attribute para todos os botões (filtros), de forma a me permitir a seleção desses botões de uma única vez no Javascript com o método querySelectorAll
<li>
<button
class="btn btn-front"
href="#"
id="btnFiltrarLivrosFront"
value="front-end"
data-btn-filter="front-end"
>
LIVROS DE FRONT-END
</button>
</li>
<li>
<button
class="btn btn-back"
href="#"
id="btnFiltrarLivrosBack"
value="back-end"
data-btn-filter="back-end"
>
LIVROS DE BACK-END
</button>
</li>
Javascript
1. Selecionando os botões
const buttonsFilter = document.querySelectorAll('[data-btn-filter]');
Neste código acima, usei document.querySelectorAll
para selecionar todos os elementos que possuem o atributo data-btn-filter
. Esses elementos são os botões que serão usados para filtrar os livros.
2. Adicionando o evento de clique aos botões:
buttonsFilter.forEach((buttonFilter) => {
buttonFilter.addEventListener('click', (event) => {
const categoria = event.target.dataset.btnFilter;
filtrarLivros(categoria);
});
});
Aqui, utilizei forEach para iterar sobre cada botão selecionado anteriormente. Para cada botão, adicionei um evento de clique usando addEventListener
. Quando um botão é clicado, a função de retorno de chamada é executada. Dentro dessa função, estamos capturando o valor do atributo data-btn-filter
do botão clicado usando event.target.dataset.btnFilter
. Esse valor é armazenado na variável categoria e, em seguida, passado como argumento para a função filtrarLivros.
3. Filtrando os livros:
function filtrarLivros(categoria) {
let livrosFiltrados = livros.filter((livro) => livro.categoria === categoria);
console.table(livrosFiltrados);
}
A função filtrarLivros recebe a categoria como argumento. Dentro da função, usamos o método filter do array livros para filtrar os livros com base na categoria selecionada. A função de callback passada para o filter verifica se a propriedade categoria de cada livro é igual à categoria fornecida. Os livros filtrados são armazenados na variável livrosFiltrados. Por fim, utilizei console.table para exibir os livros filtrados no console em formato de tabela.