feat: Pokedex @lahmarinhoh

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;

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;

assets/js/main.js

@@ -19,15 +19,39 @@ function convertPokemonToLi(pokemon) {
                 <img src="${pokemon.photo}"
                      alt="${pokemon.name}">
             </div>
-        </li>
+
+            <div class="abilitiesList">
+                <button type="button">Abilities</button>
+            </div>
+
+            <div class="abilityList">
+                <ol class="ability">
+                    ${pokemon.abilities.map((ability)=> `<li class="abilitie ${ability}">${ability}</li>`).join('')}                    
+                </ol>
+            </div>
+
+            <div class="statsList">
+                <button type="button">Stats</button>
+            </div>
+
+            <div class="statList">
+                <ol class="stats">
+                    <li class="stat">XP: ${pokemon.baseExperience}</li>
+                    <li class="stat">Height: ${pokemon.height}</li>
+                    <li class="stat">Weight: ${pokemon.weight}</li>
+                    ${pokemon.stats.map((stats) => `<li class="stat">${stats.stat.name}: ${stats.base_stat}</li>`).join('')}
+                </ol>
+            </div>
     `
 }
 
+/* ${pokemon.stats.map((stats) => `<li class="abilitie">${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)
     }
-})
+})
+
+

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);
+}

assets/js/pokemon-model.js

@@ -1,8 +1,14 @@
-
 class Pokemon {
     number;
     name;
     type;
     types = [];
     photo;
+    abilitie;
+    abilities = [];
+    baseExperience;
+    height;
+    weight;
+    stats = [];
+    stat;
 }

index.html

@@ -24,17 +24,23 @@
 
 <body>
     <section class="content">
-        <h1>Pokedex</h1>
-
-        <ol id="pokemonList" class="pokemons">
-            <!-- ..... Pokemons here ..... -->
-        </ol>
-
-        <div class="pagination">
-            <button id="loadMoreButton" type="button">
-                Load More
-            </button>
+        <div class="container">
+            <div class="titulo">
+                <h1>Pokedex</h1>
+            </div>
+            <div class="pokemonsList">
+                <ol id="pokemonList" class="pokemons">
+                    <!-- ..... Pokemons here ..... -->
+                </ol>
+
+                <div class="pagination">
+                    <button id="loadMoreButton" type="button">
+                        Load More
+                    </button>
+                </div>
+            </div>
         </div>
+
     </section>
 
     <!-- Nosso JS -->