projeto front end pokedex com api

README.md

@@ -1 +1,8 @@
 # Trilha JS Developer - Pokedex
+ola meu nome e Aluisio sou estudante de front end da dio 
+
+nessa minha contriduicao de codigo eu acresentei uma janela aonde ficam a mostra alguns dados dos pokemos e estilizei a prorpia 
+
+sou iniciante entao tive muita dificuldade nesse projeto
+
+ mais com calma e paciencia consegui entreperta o padrao e com mais algumas horas ultilizando as "IA" eu puder enteder e aplicar oque foi requerido no projeto

assets/css/pokedex.css

@@ -127,6 +127,37 @@
     height: 70px;
 }
 
+.detalhes{
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 9999;
+    align-items: center;
+    justify-content: center;
+}
+
+.statusPokemos {
+
+    padding: 1rem;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+
+}
+.detailImg{
+    max-width: 100%;
+    height: 250px;
+    display: flex;
+} 
+
+.alturaEpeso{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    list-style: none;
+}
 .pagination {
     display: flex;
     flex-direction: row;

assets/js/detail.js

@@ -0,0 +1,51 @@
+const pokeDetail = document.getElementById("pokeDetail");
+const statusPokemos = document.querySelector(".statusPokemos");
+
+
+
+function showPokemonDetails(pokemon) {
+    statusPokemos.innerHTML = `
+    <div class="${pokemon.type}"
+    <header><h1>Pokemon</h1></header>
+        <img src="${pokemon.photo}" alt="${pokemon.name}" class="detailImg">
+        <h3> ${pokemon.name}</h3>
+        <ul class="alturaEpeso">
+        <li><strong>Altura:</strong> ${pokemon.altura}</li>
+        <li><strong>Peso:</strong> ${pokemon.peso}</li>
+        </ul>
+        <ul class="alturaEpeso">
+        <li><strong>HP:</strong> ${pokemon.hp}</li>
+
+        <li><strong>Ataque:</strong> ${pokemon.attack}</li>
+
+        <li><strong>Defesa:</strong> ${pokemon.defense}</li>
+
+        <li><strong>speed:</strong> ${pokemon.speed}</li>
+        </ul>
+        <br>
+    </div> 
+    `;
+
+    pokeDetail.style.display = 'flex';
+}
+
+pokeDetail.addEventListener('click', (event) => {
+    if (event.target === pokeDetail) {
+        pokeDetail.style.display = 'none';
+    }
+});
+
+
+pokemonList.addEventListener('click', async (event) => {
+    const clickPokemon = event.target.closest('.pokemon');
+    if (clickPokemon) {
+        const pokemonId = parseInt(clickPokemon.getAttribute('data-pokemon-id'));
+
+        try {
+            const pokemonDetails = await pokeApi.getPokemonDetailById(pokemonId); 
+            showPokemonDetails(pokemonDetails);
+        } catch (error) {
+            console.error("Erro ao obter detalhes do Pokémon:", error);
+        }
+    }
+});

assets/js/main.js

@@ -1,13 +1,13 @@
 const pokemonList = document.getElementById('pokemonList')
 const loadMoreButton = document.getElementById('loadMoreButton')
 
-const maxRecords = 151
-const limit = 10
+const maxRecords = 151;
+const limit = 10;
 let offset = 0;
 
 function convertPokemonToLi(pokemon) {
     return `
-        <li class="pokemon ${pokemon.type}">
+        <li class="pokemon ${pokemon.type}" data-pokemon-id="${pokemon.number}">
             <span class="number">#${pokemon.number}</span>
             <span class="name">${pokemon.name}</span>
 

assets/js/poke-api.js

@@ -5,16 +5,27 @@ function convertPokeApiDetailToPokemon(pokeDetail) {
     const pokemon = new Pokemon()
     pokemon.number = pokeDetail.id
     pokemon.name = pokeDetail.name
+    pokemon.peso = pokeDetail.weight
+    pokemon.altura = pokeDetail.height
 
     const types = pokeDetail.types.map((typeSlot) => typeSlot.type.name)
     const [type] = types
 
     pokemon.types = types
     pokemon.type = type
 
+    pokemon.attack = pokeDetail.stats.find((stat)=> stat.stat.name === 'attack').base_stat
+    pokemon.hp = pokeDetail.stats.find((stat)=> stat.stat.name === 'hp').base_stat
+    pokemon.defense = pokeDetail.stats.find((stat)=> stat.stat.name === 'defense').base_stat
+    pokemon.speed = pokeDetail.stats.find((stat)=> stat.stat.name === 'speed').base_stat
+
     pokemon.photo = pokeDetail.sprites.other.dream_world.front_default
 
+
+
     return pokemon
+
+
 }
 
 pokeApi.getPokemonDetail = (pokemon) => {
@@ -33,3 +44,11 @@ pokeApi.getPokemons = (offset = 0, limit = 5) => {
         .then((detailRequests) => Promise.all(detailRequests))
         .then((pokemonsDetails) => pokemonsDetails)
 }
+
+pokeApi.getPokemonDetailById = (idPokemon) => {
+    const url = `https://pokeapi.co/api/v2/pokemon/${idPokemon}/`;
+
+    return fetch(url)
+        .then((response) => response.json())
+        .then(convertPokeApiDetailToPokemon);
+};

assets/js/pokemon-model.js

@@ -2,7 +2,13 @@
 class Pokemon {
     number;
     name;
+    peso;
+    altura;
     type;
     types = [];
+    hp;
+    attack;
+    defense;
+    speed;
     photo;
 }

index.html

@@ -30,6 +30,12 @@ <h1>Pokedex</h1>
             <!-- ..... Pokemons here ..... -->
         </ol>
 
+        <div id="pokeDetail" class="detalhes" >
+            <div class="statusPokemos"> 
+
+            </div>
+        </div>
+
         <div class="pagination">
             <button id="loadMoreButton" type="button">
                 Load More
@@ -41,6 +47,7 @@ <h1>Pokedex</h1>
     <script src="/assets/js/pokemon-model.js"></script>
     <script src="/assets/js/poke-api.js"></script>
     <script src="/assets/js/main.js"></script>
+    <script src="/assets/js/detail.js"></script>
 </body>
 
 </html>