From ce199637c7f772573137976b019912c2ebbac06a Mon Sep 17 00:00:00 2001 From: Lara Marinho Cordeiro Date: Sun, 22 Dec 2024 18:41:38 -0300 Subject: [PATCH] =?UTF-8?q?Adi=C3=A7=C3=A3o=20das=20Abilities=20e=20Stats?= =?UTF-8?q?=20ao=20Pokemon=20Card?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/global.css | 18 ++++++++++ assets/css/pokedex.css | 70 ++++++++++++++++++++++++++++++++++++++ assets/js/main.js | 32 +++++++++++++++-- assets/js/poke-api.js | 25 ++++++++++++-- assets/js/pokemon-model.js | 8 ++++- index.html | 26 ++++++++------ 6 files changed, 162 insertions(+), 17 deletions(-) diff --git a/assets/css/global.css b/assets/css/global.css index 980e87861..588f1b5bd 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -14,6 +14,24 @@ body { background-color: #fff; } +.container { + background: #fff; + margin: 0; + padding: 0; +} + + .titulo { + text-align: center; + position: relative; + margin: 0; + padding: 0; + } + + .pokemonsList { + position: relative; + padding: 1rem; + } + @media screen and (min-width: 992px) { .content { max-width: 992px; diff --git a/assets/css/pokedex.css b/assets/css/pokedex.css index 59eef2bde..26d622103 100644 --- a/assets/css/pokedex.css +++ b/assets/css/pokedex.css @@ -106,6 +106,38 @@ justify-content: space-between; } +.pokemon .abilityList .ability { + padding: 0; + margin: 0; + list-style: none; +} + +.pokemon .abilityList .ability .abilitie { + color: #fff; + padding: .25rem .5rem; + margin: .25rem 0; + font-size: .625rem; + border-radius: 1rem; + filter: brightness(1.1); + text-align: center; +} + +.pokemon .statList .stats { + padding: 0; + margin: 0; + list-style: none; +} + +.pokemon .statList .stats .stat { + color: #fff; + padding: .25rem .5rem; + margin: .25rem 0; + font-size: .625rem; + border-radius: 1rem; + filter: brightness(1.1); + text-align: center; +} + .pokemon .detail .types { padding: 0; margin: 0; @@ -146,6 +178,44 @@ border-radius: 1rem; } +.abilitiesList { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 100%; + padding: 1rem; +} + +.abilitiesList button { + padding: .25rem .5rem; + margin: .25rem 0; + font-size: .625rem; + color: #fff; + background-color: #6c79db; + border: none; + border-radius: 1rem; +} + +.statsList { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 100%; + padding: 1rem; +} + +.statsList button { + padding: .25rem .5rem; + margin: .25rem 0; + font-size: .625rem; + color: #fff; + background-color: #6c79db; + border: none; + border-radius: 1rem; +} + @media screen and (min-width: 380px) { .pokemons { grid-template-columns: 1fr 1fr; diff --git a/assets/js/main.js b/assets/js/main.js index bcaa24508..00d3d2851 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -19,15 +19,39 @@ function convertPokemonToLi(pokemon) { ${pokemon.name} - + +
+ +
+ +
+
    + ${pokemon.abilities.map((ability)=> `
  1. ${ability}
    2. `).join('')} +
+
+ +
+ +
+ +
+
    +
  1. XP: ${pokemon.baseExperience}
    2. +
  2. Height: ${pokemon.height}
    3. +
  3. Weight: ${pokemon.weight}
    4. + ${pokemon.stats.map((stats) => `
  4. ${stats.stat.name}: ${stats.base_stat}
    5. `).join('')} +
+
` } +/* ${pokemon.stats.map((stats) => `
  • ${stats.stat.name}: ${stats.base_stat}`).join('')} */ + function loadPokemonItens(offset, limit) { pokeApi.getPokemons(offset, limit).then((pokemons = []) => { const newHtml = pokemons.map(convertPokemonToLi).join('') pokemonList.innerHTML += newHtml - }) + }) } loadPokemonItens(offset, limit) @@ -44,4 +68,6 @@ loadMoreButton.addEventListener('click', () => { } else { loadPokemonItens(offset, limit) } -}) \ No newline at end of file +}) + + diff --git a/assets/js/poke-api.js b/assets/js/poke-api.js index 38fbfd465..cda0e0327 100644 --- a/assets/js/poke-api.js +++ b/assets/js/poke-api.js @@ -9,11 +9,30 @@ function convertPokeApiDetailToPokemon(pokeDetail) { 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 + const abilities = pokeDetail.abilities.map((abilitieSlot) => abilitieSlot.ability.name) + const [abilitie] = abilities + + pokemon.abilities = abilities + pokemon.abilitie = abilitie + + pokemon.baseExperience = pokeDetail.base_experience; + + pokemon.height = pokeDetail.height; + + pokemon.weight = pokeDetail.weight; + + const stats = pokeDetail.stats; + const [stat] = stats + + pokemon.stats = stats + pokemon.stat = stat + return pokemon } @@ -24,12 +43,12 @@ pokeApi.getPokemonDetail = (pokemon) => { } pokeApi.getPokemons = (offset = 0, limit = 5) => { - const url = `https://pokeapi.co/api/v2/pokemon?offset=${offset}&limit=${limit}` + 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((pokemonsDetails) => pokemonsDetails); +} \ No newline at end of file diff --git a/assets/js/pokemon-model.js b/assets/js/pokemon-model.js index b0d17bb90..8ecd5891e 100644 --- a/assets/js/pokemon-model.js +++ b/assets/js/pokemon-model.js @@ -1,8 +1,14 @@ - class Pokemon { number; name; type; types = []; photo; + abilitie; + abilities = []; + baseExperience; + height; + weight; + stats = []; + stat; } diff --git a/index.html b/index.html index 1a017821d..c3d613093 100644 --- a/index.html +++ b/index.html @@ -24,17 +24,23 @@
    -

    Pokedex

    - -
      - -
    - -