Segue linha de código proposta pelo professor para fazer com que o btn funcione:
let livrosFiltrados = categoria == 'disponivel' ? livros.filter(livro => livro.quantidade > 0) : livros.filter(livro => livro.categoria == filtro)
Todavia o btn não estava realizando o filtro conforme o esperado, dos livros com quantidade maior que 0.
No forum, encontrei pessoas dizendo que eu precisava inserir o value na linha de código do btn dentro do arquivo index.html, pois o mesmo veio sem.
<li><button class="btn btn-disponiveis" href="#" id="btnLivrosDisponiveis" value="disponivel">LIVROS DISPONÍVEIS</button></li>
Executei esta ação e mesmo assim o btn não estava realizando o filtro conforme o esperado. Entao verifiquei que na API, no campo categoria nao tinha a opcao [disponivel], apenas [front-end, back-end, dados].
Entao precisei criar uma solucao semelhante a do professor porem focada no botao de Disponibilidade. Dentro do documento metodoFilter.js inseri o seguinte codigo:
const botaoLivrosDisponiveis = document.getElementById('btnLivrosDisponiveis')
botaoLivrosDisponiveis.addEventListener('click', selecionarLivrosDisponiveis)
function selecionarLivrosDisponiveis () {
let livrosDisponiveis = livros.filter(livro => livro.quantidade > 0)
exibirOsLivrosNaTela(livrosDisponiveis)
}
Mesmo chegando ao mesmo resultado, fazer com que o btn funcione, continuo com a duvida se realmente a forma como o professor passou na aula deveria funcionar.