feat- add details page

assets/css/pokedexDetails.css

@@ -0,0 +1,111 @@
+.pokemonDatails {
+  display: grid;
+  grid-template-columns: 1fr;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.pokemonDatails img {
+    width: 10rem;
+    height: 10rem;
+}
+
+.normal {
+  background-color: #a6a877;
+}
+
+.grass {
+  background-color: #77c850;
+}
+
+.fire {
+  background-color: #ee7f30;
+}
+
+.water {
+  background-color: #678fee;
+}
+
+.electric {
+  background-color: #f7cf2e;
+}
+
+.ice {
+  background-color: #98d5d7;
+}
+
+.ground {
+  background-color: #dfbf69;
+}
+
+.flying {
+  background-color: #a98ff0;
+}
+
+.poison {
+  background-color: #a040a0;
+}
+
+.fighting {
+  background-color: #bf3029;
+}
+
+.psychic {
+  background-color: #f65687;
+}
+
+.dark {
+  background-color: #725847;
+}
+
+.rock {
+  background-color: #b8a137;
+}
+
+.bug {
+  background-color: #a8b720;
+}
+
+.ghost {
+  background-color: #6e5896;
+}
+
+.steel {
+  background-color: #b9b7cf;
+}
+
+.dragon {
+  background-color: #6f38f6;
+}
+
+.fairy {
+  background-color: #f9aec7;
+}
+
+.info {
+  display: flex;
+    flex-direction: column;
+    margin: .5rem;
+    padding: 1rem;
+    border-radius: 1rem;
+}
+
+.info .number {
+  color: #000;
+    opacity: .3;
+    text-align: right;
+    font-size: .625rem;
+}
+
+.info h2 {
+  text-transform: capitalize;
+  color: white;
+}
+
+.stats {
+  background-color: white;
+  width: 100%;
+  border-top-right-radius: 1rem;
+  border-top-left-radius: 1rem;
+}

assets/js/main.js

@@ -1,47 +1,89 @@
-const pokemonList = document.getElementById('pokemonList')
-const loadMoreButton = document.getElementById('loadMoreButton')
+const pokemonList = document.getElementById('pokemonList');
+const loadMoreButton = document.getElementById('loadMoreButton');
+const content = document.getElementsByClassName('content')[0];
 
-const maxRecords = 151
-const limit = 10
+const maxRecords = 151;
+const limit = 10;
 let offset = 0;
 
 function convertPokemonToLi(pokemon) {
-    return `
+  return `
         <li class="pokemon ${pokemon.type}">
             <span class="number">#${pokemon.number}</span>
             <span class="name">${pokemon.name}</span>
 
             <div class="detail">
                 <ol class="types">
-                    ${pokemon.types.map((type) => `<li class="type ${type}">${type}</li>`).join('')}
+                    ${pokemon.types
+                      .map((type) => `<li class="type ${type}">${type}</li>`)
+                      .join('')}
                 </ol>
 
                 <img src="${pokemon.photo}"
                      alt="${pokemon.name}">
             </div>
         </li>
-    `
+    `;
+}
+
+function convertPokemonDetailToHtml(pokemon) {
+  return `
+    <div class="pokemonDatails ${pokemon.type}">
+    <div class="info">
+    <h2>${pokemon.name}</h2>
+    <span class"number">#${pokemon.number}</span>
+    <p>${pokemon.type}</p>
+    </div>
+      <img src="${pokemon.frontDetailPhoto}" alt="${pokemon.name}">
+      <div class="stats">
+      <p>Height: ${pokemon.height}</p>
+      <p>Weight: ${pokemon.weight}</p>
+      <p>Abilities: ${pokemon.abilities.join(', ')}</p>
+      </div>
+    </div>
+  `
 }
 
 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 = []) => {
+    const newHtml = pokemons.map(convertPokemonToLi).join('');
+    pokemonList.innerHTML += newHtml;
+  });
 }
 
-loadPokemonItens(offset, limit)
+loadPokemonItens(offset, limit);
 
 loadMoreButton.addEventListener('click', () => {
-    offset += limit
-    const qtdRecordsWithNexPage = offset + limit
-
-    if (qtdRecordsWithNexPage >= maxRecords) {
-        const newLimit = maxRecords - offset
-        loadPokemonItens(offset, newLimit)
-
-        loadMoreButton.parentElement.removeChild(loadMoreButton)
-    } else {
-        loadPokemonItens(offset, limit)
-    }
-})
+  offset += limit;
+  const qtdRecordsWithNexPage = offset + limit;
+
+  if (qtdRecordsWithNexPage >= maxRecords) {
+    const newLimit = maxRecords - offset;
+    loadPokemonItens(offset, newLimit);
+
+    loadMoreButton.parentElement.removeChild(loadMoreButton);
+  } else {
+    loadPokemonItens(offset, limit);
+  }
+});
+
+async function getPokemonById(pokemonId) {
+  const url = `https://pokeapi.co/api/v2/pokemon/${pokemonId}`;
+  const response = await fetch(url);
+  const pokeDetail = await response.json();
+  const pokemon =  convertPokeApiDetailToPokemon(pokeDetail);
+  return convertPokemonDetailToHtml(pokemon);
+}
+
+pokemonList.addEventListener('click', (event) => {
+  event.preventDefault();
+  pokemonId = event.target
+    .closest('.pokemon')
+    .querySelector('.number')
+    .textContent.split('#')[1];
+
+    getPokemonById(pokemonId).then((html) => {
+      content.innerHTML = html;
+    });
+
+});

assets/js/poke-api.js

@@ -14,6 +14,15 @@ function convertPokeApiDetailToPokemon(pokeDetail) {
 
     pokemon.photo = pokeDetail.sprites.other.dream_world.front_default
 
+    pokemon.abilities = pokeDetail.abilities.map((abilitySlot) => abilitySlot.ability.name)
+
+    pokemon.weight = pokeDetail.weight
+
+    pokemon.height = pokeDetail.height
+
+    pokemon.frontDetailPhoto = pokeDetail.sprites.other['official-artwork'].front_default
+
+
     return pokemon
 }
 

assets/js/pokemon-model.js

@@ -5,4 +5,8 @@ class Pokemon {
     type;
     types = [];
     photo;
+    abilities = [];
+    weight;
+    height;
+    frontDetailPhoto;
 }

index.html

@@ -20,6 +20,7 @@
     <!-- Nosso CSS -->
     <link rel="stylesheet" href="/assets/css/global.css">
     <link rel="stylesheet" href="/assets/css/pokedex.css">
+    <link rel="stylesheet" href="assets/css/pokedexDetails.css">
 </head>
 
 <body>