From 069e2c3c3b9200622b3ca63581e566f72106e87c Mon Sep 17 00:00:00 2001 From: Tiago Santos Date: Wed, 18 Sep 2024 19:47:04 -0300 Subject: [PATCH] =?UTF-8?q?Cria=C3=A7=C3=A3o=20do=20projeto=20Pokedex?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 15 +++++++++- assets/css/global.css | 22 +++++++++----- assets/css/pokedex.css | 53 ++++++++++++++++----------------- assets/ico/pikachu_favicon.ico | Bin 0 -> 822 bytes assets/js/main.js | 16 +++++----- assets/js/poke-api.js | 28 ++++++++--------- index.html | 41 ++++++++++--------------- 7 files changed, 88 insertions(+), 87 deletions(-) create mode 100644 assets/ico/pikachu_favicon.ico diff --git a/README.md b/README.md index 0c237c1c3..5c7965b78 100644 --- a/README.md +++ b/README.md @@ -1 +1,14 @@ -# Trilha JS Developer - Pokedex +# dio-js-developer-pokedex +Projeto didático de construção de uma Pokedex com Javascript + +## Leiaute +![image](https://user-images.githubusercontent.com/2284408/197915630-d514391b-3b48-47ee-a52b-b10f9b0dc7df.png) + + +## PokeAPI +https://pokeapi.co/ + + +## Linkedin + +https://www.linkedin.com/in/tiagoribeirosantos/ \ No newline at end of file diff --git a/assets/css/global.css b/assets/css/global.css index 980e87861..b69a5a7b0 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500;700&display=swap'); + * { font-family: 'Roboto', sans-serif; box-sizing: border-box; @@ -7,18 +9,22 @@ body { background-color: #f6f8fc; } -.content { - width: 100vw; - height: 100vh; - padding: 1rem; - background-color: #fff; -} - -@media screen and (min-width: 992px) { +@media screen and (min-width: 992px){ .content { max-width: 992px; height: auto; margin: 1rem auto; border-radius: 1rem; } +} + +.content { + padding: 1rem; + background-color: #fff; + height: 100vh; + width: 100vw; +} + +.content h1 { + margin: 0; } \ No newline at end of file diff --git a/assets/css/pokedex.css b/assets/css/pokedex.css index 59eef2bde..9ddab9fc1 100644 --- a/assets/css/pokedex.css +++ b/assets/css/pokedex.css @@ -1,10 +1,3 @@ -.pokemons { - display: grid; - grid-template-columns: 1fr; - margin: 0; - padding: 0; - list-style: none; -} .normal { background-color: #a6a877; @@ -78,8 +71,16 @@ background-color: #f9aec7; } -.pokemon { - display: flex; +.pokemons { + display: grid; + grid-template-columns: 1fr; + margin: 0%; + padding: 0%; + list-style: none; +} + +.pokemon{ + display:flex; flex-direction: column; margin: .5rem; padding: 1rem; @@ -88,43 +89,42 @@ .pokemon .number { color: #000; - opacity: .3; + opacity: 0.3; text-align: right; font-size: .625rem; } .pokemon .name { - text-transform: capitalize; color: #fff; - margin-bottom: .25rem; + margin-bottom: .25rem ; + text-transform: capitalize; } -.pokemon .detail { +.pokemon .details { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } - -.pokemon .detail .types { - padding: 0; - margin: 0; +.pokemon .details .types { + padding: 0%; + margin: 0%; list-style: none; } -.pokemon .detail .types .type { +.pokemon .details .types .type { color: #fff; padding: .25rem .5rem; - margin: .25rem 0; - font-size: .625rem; + margin: .35rem 0; + font: .825rem; border-radius: 1rem; - filter: brightness(1.1); + filter: brightness(1.15); text-align: center; } -.pokemon .detail img { +.pokemon .details img { max-width: 100%; - height: 70px; + height: 100px; } .pagination { @@ -137,12 +137,9 @@ } .pagination button { + background-color: #6c79db; padding: .25rem .5rem; - margin: .25rem 0; - font-size: .625rem; color: #fff; - background-color: #6c79db; - border: none; border-radius: 1rem; } @@ -158,7 +155,7 @@ } } -@media screen and (min-width: 992px) { +@media screen and (min-width: 992px){ .pokemons { grid-template-columns: 1fr 1fr 1fr 1fr; } diff --git a/assets/ico/pikachu_favicon.ico b/assets/ico/pikachu_favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..c8289a39008ea6512b0da3c614ac60acdbb47582 GIT binary patch literal 822 zcmZ?wbhEHb6krfw_{0DL|JCw81or%SYz5{)3B{i*oGA<}42u7`{aizWogD*Qjr0td z8G+I|ASEE}49u@M99&#l1e`d4;tm{&ERF(4fO3pH%#H#;_F)4C7DJxH4gxGpi3Sop zY*4ECU;>cGfy@)&U^xU5WP`~;c+3#M!omV#0PTZN5H5nx43uVMWQ529Nk%vyp)yK9tnd621X_pAqECmhzykXVa{V7nck;D>@zSiF+oxTG%Uep I5*Pc{0M~O+2mk;8 literal 0 HcmV?d00001 diff --git a/assets/js/main.js b/assets/js/main.js index bcaa24508..92adf39bb 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -24,23 +24,21 @@ function convertPokemonToLi(pokemon) { } function loadPokemonItens(offset, limit) { - pokeApi.getPokemons(offset, limit).then((pokemons = []) => { - const newHtml = pokemons.map(convertPokemonToLi).join('') - pokemonList.innerHTML += newHtml - }) + pokeApi.getPokemons(offset, limit) + .then((pokemons = []) => { + pokemonList.innerHTML += pokemons.map(convertPokemonToLi).join('') + }) } loadPokemonItens(offset, limit) loadMoreButton.addEventListener('click', () => { offset += limit - const qtdRecordsWithNexPage = offset + limit - - if (qtdRecordsWithNexPage >= maxRecords) { + let qtdRecordNextPage = offset + limit + if(qtdRecordNextPage >= maxRecords) { const newLimit = maxRecords - offset loadPokemonItens(offset, newLimit) - - loadMoreButton.parentElement.removeChild(loadMoreButton) + loadMoreButton.parentElement.removeChild(loadMoreButton) //remove o botão } else { loadPokemonItens(offset, limit) } diff --git a/assets/js/poke-api.js b/assets/js/poke-api.js index 38fbfd465..f09d50feb 100644 --- a/assets/js/poke-api.js +++ b/assets/js/poke-api.js @@ -1,17 +1,14 @@ const pokeApi = {} -function convertPokeApiDetailToPokemon(pokeDetail) { +function convertPokeApiDetailToPokemonModel(pokeDetail) { const pokemon = new Pokemon() pokemon.number = pokeDetail.id pokemon.name = pokeDetail.name - - const types = pokeDetail.types.map((typeSlot) => typeSlot.type.name) + const types = pokeDetail.types.map(typeSlot => typeSlot.type.name) const [type] = types - pokemon.types = types pokemon.type = type - pokemon.photo = pokeDetail.sprites.other.dream_world.front_default return pokemon @@ -19,17 +16,18 @@ function convertPokeApiDetailToPokemon(pokeDetail) { pokeApi.getPokemonDetail = (pokemon) => { return fetch(pokemon.url) - .then((response) => response.json()) - .then(convertPokeApiDetailToPokemon) + .then(response => response.json()) + .then(convertPokeApiDetailToPokemonModel) } -pokeApi.getPokemons = (offset = 0, limit = 5) => { - const url = `https://pokeapi.co/api/v2/pokemon?offset=${offset}&limit=${limit}` +pokeApi.getPokemons = function(offset = 0, limit = 5) { + const url = `https://pokeapi.co/api/v2/pokemon/?offset=${offset}&limit=${limit}` return fetch(url) - .then((response) => response.json()) - .then((jsonBody) => jsonBody.results) - .then((pokemons) => pokemons.map(pokeApi.getPokemonDetail)) - .then((detailRequests) => Promise.all(detailRequests)) - .then((pokemonsDetails) => pokemonsDetails) -} + .then(response => response.json()) + .then(jsonBody => jsonBody.results) + .then(pokemons => pokemons.map(pokeApi.getPokemonDetail)) + .then(detailRequests => Promise.all(detailRequests)) + .then(pokemonsDetails => pokemonsDetails) + .catch(error => console.error(error)) +} \ No newline at end of file diff --git a/index.html b/index.html index 1a017821d..8531cf458 100644 --- a/index.html +++ b/index.html @@ -1,46 +1,35 @@ - - + - Pokedex + - - + + - - - - + + - - - + Pokedex do Tiago -
-

Pokedex

+

Pokedex do Tiago

-
    - -
+
    +
    - - - - + + + - \ No newline at end of file