AluraBooks

├── app └── main.js ├── imagens ├── A-Web-Mobile.png ├── Acessibilidade-na-Web.png ├── Angular-11-e-Firebase.png ├── Banner-1.png ├── Bootstrap4.png ├── CSS-Eficiente.png ├── Cangaceiro-Javascript.png ├── Coletânea-Front-end.png ├── Foto-banner-1.png ├── Foto-banner.png ├── Front-end-com-Vue.js.png ├── Guia-front-end.png ├── Guia-prático-de-Typescript.png ├── HTML-e-CSS3.png ├── Logo-1.png ├── Logo-2.svg ├── O-Retorno-do-cangaceiro-JavaScript.png ├── O-Retorno-do-cangaceiro-JavaScript2.png ├── Sass.png ├── Turbine-seu-CSS.png └── Vue.js.png ├── index.html ├── requisicao.txt └── style.css /app/main.js: -------------------------------------------------------------------------------- 1 | let livros = [] 2 | const endpointDaAPI = 'https://guilhermeonrails.github.io/casadocodigo/livros.json' 3 | getBuscarLivrosDaAPI() 4 | const elementoParaInserirLivros = document.getElementById('livros') 5 | 6 | async function getBuscarLivrosDaAPI() { 7 | const res = await fetch(endpointDaAPI) 8 | livros = await res.json() 9 | console.table(livros) 10 | exibirOsLivrosNaTela(livros) 11 | } 12 | 13 | function exibirOsLivrosNaTela(listaDeLivros) { 14 | listaDeLivros.forEach(livro => { 15 | elementoParaInserirLivros.innerHTML += ` 16 |

17 |

19 |

20 | ${livro.titulo} 21 |

22 |

${livro.autor}

23 |

R$${livro.preco}

24 |

25 | ${livro.categoria} 26 |

27 |

28 | ` 29 | }) 30 | } -------------------------------------------------------------------------------- /imagens/A-Web-Mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/js-metodos-array/ea266ce050cca46a55fc0d27ba79f012af0cc04a/imagens/A-Web-Mobile.png -------------------------------------------------------------------------------- /imagens/Acessibilidade-na-Web.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/js-metodos-array/ea266ce050cca46a55fc0d27ba79f012af0cc04a/imagens/Acessibilidade-na-Web.png -------------------------------------------------------------------------------- /imagens/Angular-11-e-Firebase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/js-metodos-array/ea266ce050cca46a55fc0d27ba79f012af0cc04a/imagens/Angular-11-e-Firebase.png -------------------------------------------------------------------------------- /imagens/Banner-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/js-metodos-array/ea266ce050cca46a55fc0d27ba79f012af0cc04a/imagens/Banner-1.png -------------------------------------------------------------------------------- /imagens/Bootstrap4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/js-metodos-array/ea266ce050cca46a55fc0d27ba79f012af0cc04a/imagens/Bootstrap4.png -------------------------------------------------------------------------------- /imagens/CSS-Eficiente.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/js-metodos-array/ea266ce050cca46a55fc0d27ba79f012af0cc04a/imagens/CSS-Eficiente.png -------------------------------------------------------------------------------- /imagens/Cangaceiro-Javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/js-metodos-array/ea266ce050cca46a55fc0d27ba79f012af0cc04a/imagens/Cangaceiro-Javascript.png -------------------------------------------------------------------------------- /imagens/Coletânea-Front-end.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/js-metodos-array/ea266ce050cca46a55fc0d27ba79f012af0cc04a/imagens/Coletânea-Front-end.png -------------------------------------------------------------------------------- /imagens/Foto-banner-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/js-metodos-array/ea266ce050cca46a55fc0d27ba79f012af0cc04a/imagens/Foto-banner-1.png -------------------------------------------------------------------------------- /imagens/Foto-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/js-metodos-array/ea266ce050cca46a55fc0d27ba79f012af0cc04a/imagens/Foto-banner.png -------------------------------------------------------------------------------- /imagens/Front-end-com-Vue.js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/js-metodos-array/ea266ce050cca46a55fc0d27ba79f012af0cc04a/imagens/Front-end-com-Vue.js.png -------------------------------------------------------------------------------- /imagens/Guia-front-end.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/js-metodos-array/ea266ce050cca46a55fc0d27ba79f012af0cc04a/imagens/Guia-front-end.png -------------------------------------------------------------------------------- /imagens/Guia-prático-de-Typescript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/js-metodos-array/ea266ce050cca46a55fc0d27ba79f012af0cc04a/imagens/Guia-prático-de-Typescript.png -------------------------------------------------------------------------------- /imagens/HTML-e-CSS3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/js-metodos-array/ea266ce050cca46a55fc0d27ba79f012af0cc04a/imagens/HTML-e-CSS3.png -------------------------------------------------------------------------------- /imagens/Logo-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/js-metodos-array/ea266ce050cca46a55fc0d27ba79f012af0cc04a/imagens/Logo-1.png -------------------------------------------------------------------------------- /imagens/Logo-2.svg: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /imagens/O-Retorno-do-cangaceiro-JavaScript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/js-metodos-array/ea266ce050cca46a55fc0d27ba79f012af0cc04a/imagens/O-Retorno-do-cangaceiro-JavaScript.png -------------------------------------------------------------------------------- /imagens/O-Retorno-do-cangaceiro-JavaScript2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/js-metodos-array/ea266ce050cca46a55fc0d27ba79f012af0cc04a/imagens/O-Retorno-do-cangaceiro-JavaScript2.png -------------------------------------------------------------------------------- /imagens/Sass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/js-metodos-array/ea266ce050cca46a55fc0d27ba79f012af0cc04a/imagens/Sass.png -------------------------------------------------------------------------------- /imagens/Turbine-seu-CSS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/js-metodos-array/ea266ce050cca46a55fc0d27ba79f012af0cc04a/imagens/Turbine-seu-CSS.png -------------------------------------------------------------------------------- /imagens/Vue.js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/js-metodos-array/ea266ce050cca46a55fc0d27ba79f012af0cc04a/imagens/Vue.js.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | AluraBooks 9 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 32 |

33 | 265 | 266 |

267 |

268 |

269 |

Todos os livros disponíveis por R$ 299,00

270 |

271 |

272 | 273 | 276 | 277 | 278 | 279 | 280 | -------------------------------------------------------------------------------- /requisicao.txt: -------------------------------------------------------------------------------- 1 | https://guilhermeonrails.github.io/casadocodigo/livros.json 2 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;0,700;1,400&display=swap'); 2 | 3 | :root { 4 | --bg-color: #ffffff; 5 | --button-color: #326589; 6 | --text-title-color: #fc6621; 7 | --text-description-color: #fc6621; 8 | --text-price-color: #002f52; 9 | --text-author-color: #858585; 10 | --text-tag-color: #9c9c9c; 11 | } 12 | 13 | body { 14 | font-family: 'Poppins'; 15 | } 16 | 17 | .wrap { 18 | width: 1280px; 19 | margin: 0 auto; 20 | } 21 | 22 | .header { 23 | text-align: center; 24 | width: 100%; 25 | background-color: var(--bg-color); 26 | margin: 15px 15px; 27 | } 28 | 29 | .banner { 30 | background-image: url('/imagens/Banner-1.png'); 31 | background-repeat: no-repeat; 32 | background-size: cover; 33 | height: 278px; 34 | } 35 | 36 | .nav { 37 | display: flex; 38 | justify-content: space-between; 39 | align-items: center; 40 | height: 30px; 41 | margin: 4rem 0; 42 | } 43 | 44 | .btn { 45 | background-color: var(--button-color); 46 | border: none; 47 | cursor: pointer; 48 | height: 44px; 49 | text-decoration: none; 50 | color: #fff; 51 | padding: 10px 16px; 52 | border-radius: 8px; 53 | font-size: 0.9rem; 54 | font-family: 'Poppins'; 55 | font-style: normal; 56 | font-weight: 400; 57 | } 58 | 59 | .btn:hover { 60 | color: #cecdcd; 61 | border-radius: 10px; 62 | border-bottom: 2px solid var(--text-description-color); 63 | } 64 | 65 | .livros { 66 | display: flex; 67 | justify-content: space-between; 68 | flex-wrap: wrap; 69 | } 70 | 71 | .livro { 72 | width: 302px; 73 | display: flex; 74 | flex-direction: column; 75 | justify-content: space-between; 76 | height: 644px; 77 | margin-bottom: 1rem; 78 | } 79 | 80 | .indisponivel { 81 | opacity: 0.3; 82 | } 83 | 84 | .livro__titulo { 85 | color: var(--text-title-color); 86 | font-weight: 700; 87 | font-size: 18px; 88 | text-align: center; 89 | line-height: 24px; 90 | } 91 | 92 | .livro__descricao { 93 | text-align: center; 94 | font-size: 18px; 95 | color: var(--text-author-color); 96 | margin: 1rem 0; 97 | } 98 | 99 | .livro__preco { 100 | text-align: center; 101 | font-size: 24px; 102 | font-weight: 700; 103 | color: var(--text-price-color); 104 | } 105 | 106 | .tags { 107 | display: flex; 108 | flex-wrap: wrap; 109 | justify-content: start; 110 | margin-top: 1rem; 111 | margin-left: 0.5rem; 112 | } 113 | 114 | .tag { 115 | text-align: left; 116 | font-size: 14px; 117 | font-weight: 500; 118 | color: var(--text-tag-color); 119 | padding: 5px 4px; 120 | background: rgba(197, 197, 197, 0.25); 121 | border-radius: 4px; 122 | margin-right: 1rem; 123 | } 124 | 125 | .livros__disponiveis { 126 | width: 100%; 127 | height: 80px; 128 | background-color: var(--text-description-color); 129 | margin-top: 1rem; 130 | text-align: center; 131 | 132 | display: flex; 133 | justify-content: center; 134 | align-items: center; 135 | } 136 | 137 | .livros__disponiveis p { 138 | color: #fff; 139 | font-weight: 500; 140 | line-height: 24px; 141 | font-size: 2.5em; 142 | } 143 | 144 | .rodape { 145 | width: 100%; 146 | height: 104px; 147 | background: linear-gradient(96.48deg, #002f52 36.3%, #326589 99.56%); 148 | margin-top: 1rem; 149 | text-align: center; 150 | 151 | display: flex; 152 | justify-content: center; 153 | align-items: center; 154 | } 155 | 156 | .rodape p { 157 | color: #fff; 158 | font-weight: 500; 159 | line-height: 24px; 160 | } 161 | --------------------------------------------------------------------------------