Skip to content

Commit

Permalink
Livros pela API
Browse files Browse the repository at this point in the history 
Adição dos livros á página de categorias por chamada de API
  • Loading branch information
@wellingtonfernandesbarbosa
wellingtonfernandesbarbosa committed Jun 30, 2023
1 parent 0dd6ebb commit fa218b6
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 234 deletions.
30 changes: 30 additions & 0 deletions app/main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
let livros = [];
const endpointDaApi = 'https://guilhermeonrails.github.io/casadocodigo/livros.json';
getBuscarLivrosDaApi();

const elementoParaInserirLivros = document.getElementById('livros');

async function getBuscarLivrosDaApi() {
const res = await fetch(endpointDaApi);
livros = await res.json();
console.table(livros);
exibirOsLivrosNaTela(livros);
}

function exibirOsLivrosNaTela(listaDeLivros){
listaDeLivros.forEach(livro => {
elementoParaInserirLivros.innerHTML += `
<div class="livro">
<img class="livro__imagens" 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}</p>
<div class="tags">
<span class="tag">${livro.categoria}</span>
</div>
</div>
`;
})
};
235 changes: 2 additions & 233 deletions categorias.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,239 +101,7 @@ <h1 class="container__titulo"><b class="container__titulo--negrito">Alura</b>Boo
</nav>
<div class="book">
<section class="livros wrap" id="livros">
<div class="livro">
<img class="livro__imagens" src="imagens/Cangaceiro-Javascript.png" alt="Capa do livro Cangaceiro JavaScript" />
<h2 class="livro__titulo">
Cangaceiro JavaScript:
Uma aventura no sertão da programação
</h2>
<p class="livro__descricao">Flávio Almeida</p>
<p class="livro__preco" id="preco">R$29,90</p>
<div class="tags">
<span class="tag">Front-end</span>
</div>
</div>

<div class="livro">
<img class="livro__imagens indisponivel" src="imagens/O-Retorno-do-cangaceiro-JavaScript.png"
alt="Capa do livro O Retorno do Cangaceiro JavaScript+" />
<h2 class="livro__titulo">
Cangaceiro JavaScript +:
O Retorno do cangaceiro JavaScript
</h2>
<p class="livro__descricao">Flávio Almeida</p>
<p class="livro__preco" id="preco">R$29,90</p>
<div class="tags">
<span class="tag">Front-end</span>
</div>
</div>

<div class="livro">
<img class="livro__imagens" src="imagens/O-Retorno-do-cangaceiro-JavaScript2.png"
alt="Capa do livro o Retorno do Cangaceiro JavaScript: De padrões a uma abordagem funcional" />
<h2 class="livro__titulo">
O Retorno do cangaceiro JavaScript:
De padrões a uma abordagem funcional
</h2>
<p class="livro__descricao">Flávio Almeida</p>
<p class="livro__preco" id="preco">R$29,90</p>
<div class="tags">
<span class="tag">Front-end</span>
<span class="tag">Front-end</span>
</div>
</div>

<div class="livro">
<img class="livro__imagens indisponivel" src="imagens/Acessibilidade-na-Web.png"
alt="Capa do livro Acessibilidade na Web" />
<h2 class="livro__titulo">
Acessibilidade na Web:
Boas práticas para construir sites e aplicações acessíveis
</h2>
<p class="livro__descricao">Renaldo Ferraz</p>
<p class="livro__preco" id="preco">R$29,90</p>
<div class="tags">
<span class="tag">Front-end</span>
<span class="tag">Back-end</span>
</div>
</div>

<div class="livro">
<img class="livro__imagens" src="imagens/A-Web-Mobile.png"
alt="Capa do livro A Web Mobile: Design Responsivo e além para Web adaptada ao mundo mobile" />
<h2 class="livro__titulo">
A Web Mobile: Design Responsivo e além para Web adaptada ao mundo mobile
</h2>
<p class="livro__descricao">Sérgio Lopes</p>
<p class="livro__preco" id="preco">R$29,90</p>
<div class="tags">
<span class="tag">Front-end</span>
<span class="tag">Back-end</span>
</div>
</div>

<div class="livro">
<img class="livro__imagens" src="imagens/Coletânea-Front-end.png" alt="Capa do livro Coletânea Front-end:
Uma antologia da comunidade front-end brasileira" />
<h2 class="livro__titulo">
Coletânea Front-end:
Uma antologia da comunidade front-end brasileira
</h2>
<p class="livro__descricao">Múltiplos autores</p>
<p class="livro__preco" id="preco">R$29,90</p>
<div class="tags">
<span class="tag">Front-end</span>
<span class="tag">Back-end</span>
</div>
</div>

<div class="livro">
<img class="livro__imagens" src="imagens/Guia-front-end.png" alt="Capa do livro Guia Front-End:
O caminho das pedras para ser um dev Front-End" />
<h2 class="livro__titulo">
Guia Front-End:
O caminho das pedras para ser um dev Front-End
</h2>
<p class="livro__descricao">Diego Eis</p>
<p class="livro__preco" id="preco">R$29,90</p>
<div class="tags">
<span class="tag">Front-end</span>
<span class="tag">Back-end</span>
</div>
</div>

<div class="livro">
<img class="livro__imagens" src="imagens/HTML-e-CSS3.png"
alt="Capa do livro HTML5 e CSS3: Domine a web do futuro" />
<h2 class="livro__titulo">
HTML5 e CSS3: Domine a web do futuro
</h2>
<p class="livro__descricao">Lucas Mazza</p>
<p class="livro__preco" id="preco">R$29,90</p>
<div class="tags">
<span class="tag">Front-end</span>
<span class="tag">Back-end</span>
</div>
</div>

<div class="livro">
<img class="livro__imagens" src="imagens/Bootstrap4.png" alt="Capa do livro Bootstrap 4
Conheça a biblioteca front-end mais utilizada no mundo" />
<h2 class="livro__titulo">
Bootstrap 4
Conheça a biblioteca front-end mais utilizada no mundo
</h2>
<p class="livro__descricao">Natan Souza</p>
<p class="livro__preco" id="preco">R$29,90</p>
<div class="tags">
<span class="tag">Front-end</span>
<span class="tag">Back-end</span>
</div>
</div>

<div class="livro">
<img class="livro__imagens indisponivel" src="imagens/Sass.png" alt="Capa do livro Sass
Aprendendo pré-processadores CSS" />
<h2 class="livro__titulo">
Sass
Aprendendo pré-processadores CSS
</h2>
<p class="livro__descricao">Natan Souza</p>
<p class="livro__preco" id="preco">R$29,90</p>
<div class="tags">
<span class="tag">Front-end</span>
<span class="tag">Back-end</span>
</div>
</div>

<div class="livro">
<img class="livro__imagens" src="imagens/Turbine-seu-CSS.png" alt="Capa do livro Turbine seu CSS
Folhas de destilo inteligentes com Sass" />
<h2 class="livro__titulo">
Turbine seu CSS
Folhas de destilo inteligentes com Sass
</h2>
<p class="livro__descricao">Rosicléia Frasson</p>
<p class="livro__preco" id="preco">R$29,90</p>
<div class="tags">
<span class="tag">Front-end</span>
<span class="tag">Back-end</span>
</div>
</div>

<div class="livro">
<img class="livro__imagens" src="imagens/CSS-Eficiente.png" alt="Capa do livro CSS Eficiente:
Técnicas e ferramentas que fazem a diferença nos seus estilos" />
<h2 class="livro__titulo">
CSS Eficiente: Técnicas e ferramentas que fazem a diferença nos seus estilos
</h2>
<p class="livro__descricao">Rosicléia Frasson</p>
<p class="livro__preco" id="preco">R$29,90</p>
<div class="tags">
<span class="tag">Front-end</span>
<span class="tag">Back-end</span>
</div>
</div>

<div class="livro">
<img class="livro__imagens" src="imagens/Angular-11-e-Firebase.png"
alt="Capa do livro Angular 11 e Firebase: Construindo uma aplicação integrada com a plataforma Google" />
<h2 class="livro__titulo">
Angular 11 e Firebase: Construindo uma aplicação integrada com a plataforma Google
</h2>
<p class="livro__descricao">Kheronn Khennedy Machado</p>
<p class="livro__preco" id="preco">R$29,90</p>
<div class="tags">
<span class="tag">Front-end</span>
<span class="tag">Back-end</span>
</div>
</div>

<div class="livro">
<img class="livro__imagens" src="imagens/Guia-prático-de-Typescript.png" alt="Capa do livro Guia prático de TypeScript
Melhore suas aplicações JavaScript" />
<h2 class="livro__titulo">
Guia prático de TypeScript
Melhore suas aplicações JavaScript
</h2>
<p class="livro__descricao">Thiago da Silva Adriano</p>
<p class="livro__preco" id="preco">R$29,90</p>
<div class="tags">
<span class="tag">Front-end</span>
<span class="tag">Back-end</span>
</div>
</div>

<div class="livro">
<img class="livro__imagens" src="imagens/Front-end-com-Vue.js.png" alt="Capa do livro Front-end com Vue.js -
Da teoria à prática sem complicações" />
<h2 class="livro__titulo">
Front-end com Vue.js -
Da teoria à prática sem complicações
</h2>
<p class="livro__descricao">Leonardo Vilarinho</p>
<p class="livro__preco" id="preco">R$29,90</p>
<div class="tags">
<span class="tag">Front-end</span>
<span class="tag">Back-end</span>
</div>
</div>

<div class="livro">
<img class="livro__imagens" src="imagens/Vue.js.png" alt="Capa do livro Vue.js
Construa aplicações incríveis" />
<h2 class="livro__titulo">
Vue.js
Construa aplicações incríveis
</h2>
<p class="livro__descricao">Caio Incau</p>
<p class="livro__preco" id="preco">R$29,90</p>
<div class="tags">
<span class="tag">Front-end</span>
<span class="tag">Back-end</span>
</div>
</div>


</section>
</div>
<section id="valor_total_livros_disponiveis">
Expand Down Expand Up @@ -421,5 +189,6 @@ <h2 class="rodape__titulo">Grupo Alura</h2>
</li>
</ul>
</footer>
<script src="app/main.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ <h1 class="container__titulo"><b class="container__titulo--negrito">Alura</b>Boo
<input type="checkbox" id="coracao">
<!-- <a href="#"><img src="img/Favoritos.svg" alt="Meus favoritos" class="container__imagem coracao"></a> -->
<label class="coracao" for="coracao">
<svg width="34.88" height="3z2" viewBox="0 0 24 22" fill="none" class="container__imagem container__imagem-transparente" xmlns="http://www.w3.org/2000/svg">
<svg width="34.88" height="34.88" viewBox="0 0 24 22" fill="none" class="container__imagem container__imagem-transparente" xmlns="http://www.w3.org/2000/svg">
<path d="M20.8397 3.49592C20.329 2.98492 19.7226 2.57957 19.0551 2.303C18.3876 2.02644 17.6722 1.88409 16.9497 1.88409C16.2273 1.88409 15.5118 2.02644 14.8444 2.303C14.1769 2.57957 13.5705 2.98492 13.0597 3.49592L11.9997 4.55592L10.9397 3.49592C9.90805 2.46423 8.50877 1.88463 7.04974 1.88463C5.5907 1.88463 4.19143 2.46423 3.15974 3.49592C2.12805 4.52761 1.54845 5.92689 1.54845 7.38592C1.54845 8.84495 2.12805 10.2442 3.15974 11.2759L4.21974 12.3359L11.9997 20.1159L19.7797 12.3359L20.8397 11.2759C21.3507 10.7652 21.7561 10.1587 22.0327 9.49127C22.3092 8.82382 22.4516 8.10841 22.4516 7.38592C22.4516 6.66343 22.3092 5.94802 22.0327 5.28056C21.7561 4.61311 21.3507 4.00668 20.8397 3.49592V3.49592Z" stroke="#002F52" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</label>
Expand Down

1 comment on commit fa218b6

@vercel
Copy link

@vercel vercel bot commented on fa218b6 Jun 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

alurabooks – ./

alurabooks-wells.vercel.app
alurabooks-git-main-wellingtonfernandes.vercel.app
alurabooks-wellingtonfernandes.vercel.app

Please sign in to comment.