Concluí o curso agora e gostaria de compartilhar como ficou esse projeto. Fiz algumas mudanças em relação ao que foi feito ao longo do curso: uma delas foi criar um botão para remover todos os filtros de uma vez só, e a outra foi fazer com que os filtros de disponibilidade e de ordenação crescente dos preços não se anulassem, além de que, ao filtrar por categoria, esses filtros de disponibilidade e de ordenação não fossem esquecidos.
Segue o link do github com o projeto concluído: https://github.com/alberto-palmeira/alura-books-adicionar-livros
Segue abaixo os códigos, menos o css, já que não mudei nada.
HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta metacharset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AluraBooks</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css" />
</head>
<header class="header">
<h1><img src="imagens/Logo-1.png" /></h1>
</header>
<body>
<section class="banner" data-filtro=""></section>
<nav class="wrap">
<ul class="nav">
<li><button class="btn btn-front" href="#" id="btnFiltrarLivrosFront" value="front-end">LIVROS DE
FRONT-END</button>
</li>
<li><button class="btn btn-back" href="#" id="btnFiltrarLivrosBack" value="back-end">LIVROS DE BACK-END</button>
</li>
<li><button class="btn btn-dados" href="#" id="btnFiltrarLivrosDados" value="dados">LIVROS DE DADOS</button></li>
<li><button class="btn btn-disponiveis" href="#" id="btnLivrosDisponiveis" value="quantidade">LIVROS DISPONÍVEIS</button></li>
<li><button class="btn btn-ordenacao" href="#" id="btnOrdenarPorPreco" value="ordenacao">ORDENAR POR PREÇO</button></li>
<li><button class="btn btn-remove-fitro" href="#" id="btnRemoverFiltro" value="remover">REMOVER FILTRO</button></li>
</ul>
</nav>
<section class="livros wrap" id="livros">
</section>
<section id="valor_total_livros_disponiveis">
<!-- <div class="livros__disponiveis">
<p>Todos os livros disponíveis por R$ <span id="valor">299,00</span></p>
</div> -->
</section>
<footer class="rodape">
<p>Alura - Mergulhe em tecnologia</p>
</footer>
<script src="js/main.js"></script>
<script src="js/adiciona-livros.js"></script>
<script src="js/aplica-desconto.js"></script>
<script src="js/filtra-livros.js"></script>
<script src="js/ordena-precos.js"></script>
</body>
</html>main.js
// ---------- Funções ----------
async function getBuscarLivrosEndPoint () {
const resposta = await fetch(endPointApi);
livros = await resposta.json();
livros = aplicaDesconto(livros);
adicionaElementos(livros);
};
// ---------- Lógica ----------
let livros = [];
const endPointApi = 'https://guilhermeonrails.github.io/casadocodigo/livros.json';
getBuscarLivrosEndPoint();adiciona-livros.js
// ---------- Funções ----------
function adicionaElementos(livros) {
secaoLivros.innerHTML = '';
livros.forEach(livro => {
const disponibilidade = verificaDisponibilidade(livro);
secaoLivros.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">${livro.preco.toFixed(2)}</p>
<div class="tags">
<span class="tag">${livro.categoria}</span>
</div>
</div>`
});
};
function verificaDisponibilidade(livro) {
if (livro.quantidade > 0 ) {
return 'livro__imagens';
};
return 'livro__imagens indisponivel';
};
// ---------- Lógica ----------
const secaoLivros = document.querySelector('#livros');aplica-desconto.js
// ---------- Funções ----------
function aplicaDesconto(livros) {
const desconto = 0.3;
const livrosComDesconto = livros.map(elemento => {
return {...elemento, preco: elemento.preco - (elemento.preco * desconto)}
});
return livrosComDesconto;
};