O DevTools me retorna sempre avisando que não tem função para a const "livrosFiltrados", por conta disso não consigo finalizar o menu de livros disponíveis, e nem consigo visualizar, como na aula 3, sobre os livros que somente de front-end, back-end e de dados.
Teria como me ajudar, por favor?
let livros = []
const endpointDaAPI = 'https://guilhermeonrails.github.io/casadocodigo/livros.json'
getBuscarLivrosDaAPI()
async function getBuscarLivrosDaAPI() {
const res = await fetch(endpointDaAPI)
livros = await res.json()
livros = aplicarDesconto(livros)
exibirOsLivrosNaTela(livrosComDesconto)
}
function aplicarDesconto(livros) {
const desconto = 0.3
livrosComDesconto = livros.map(livro => {
return {...livro, preco: livro.preco - (livro.preco * desconto)}
})
return livrosComDesconto
}
const botoes = document.querySelectorAll('.btn')
botoes.forEach(btn => btn.addEventListener('click', filtrarLivros))
function filtrarLivros() {
const elementoBtn = document.getElementById(this.id)
//houve um evento de click, chame essa função
const categoria = elementoBtn.value
let livrosFiltrados = categoria == 'disponivel' ? livros.filter(livro => quantidade > 0) : livros.filter(livro => livro.categoria == categoria)
exibirOsLivrosNaTela(livrosFiltrados)
}
const elementoParaInserirLivros = document.getElementById('livros')
function exibirOsLivrosNaTela(listaDeLivros) {
elementoParaInserirLivros.innerHTML = ''
listaDeLivros.forEach(livro => {
// let disponibilidade = verificarDisponibilidadeDoLivro(livro)
let disponibilidade = livro.quantidade > 0 ? 'livro__imagens' : 'livro__imagens indisponivel'
elementoParaInserirLivros.innerHTML += `
<div class="livro">
<img class="${disponibilidade}" src="${livro.imagem}"
alt="${livro.alt}" />
<h2 class="livro__titulo">
${livro.titulo}
</h2>
<p class="livro__descricao">${livro.autor}</p>
<p class="livro__preco" id="preco">R$${livro.preco.toFixed(2)}</p>
<div class="tags">
<span class="tag">${livro.categoria}</span>
</div>
</div>
`
})
}
// function verificarDisponibilidadeDoLivro(livro) {
// if (livro.quantidade > 0 ){
// return 'livro__imagens'
// } else {
// return 'livros__imagens indisponivel'
// }
// }
let = btnOrdenarPorPreco = document.getElementById ('btnOrdenarPorPreco')
btnOrdenarPorPreco.addEventListener('click', ordenarLivrosPorPrecos)
function ordenarLivrosPorPrecos() {
let livrosOrdenados = livros.sort((a,b) => a.preco - b.preco)
exibirOsLivrosNaTela(livrosOrdenados)
}
Eu coloquei tudo em um arquivo só para ficar mais fácil de compartilhar por aqui, mas além disso, eu tentei fazer mas não obtive sucesso.