modified .js for added types of pokemon, abilities of pokemon and modified css to align the pokemon center of the container

pokedex/script.js

@@ -1,5 +1,6 @@
 const poke_container = document.getElementById('poke-container')
-const pokemon_count = 150
+const searchBar = document.getElementById('searchBar')
+const pokemon_count = 898
 const colors = {
     fire: '#FDDFDF',
     grass: '#DEFDE0',
@@ -23,6 +24,7 @@ const fetchPokemons = async () => {
     for(let i = 1; i <= pokemon_count; i++) {
         await getPokemon(i)
     }
+    
 }
 
 const getPokemon = async (id) => {
@@ -32,6 +34,8 @@ const getPokemon = async (id) => {
     createPokemonCard(data)
 }
 
+
+
 const createPokemonCard = (pokemon) => {
     const pokemonEl = document.createElement('div')
     pokemonEl.classList.add('pokemon')
@@ -41,6 +45,7 @@ const createPokemonCard = (pokemon) => {
 
     const poke_types = pokemon.types.map(type => type.type.name)
     const type = main_types.find(type => poke_types.indexOf(type) > -1)
+    const poke_abilities = pokemon.abilities.map(ability => ability.ability.name)
     const color = colors[type]
 
     pokemonEl.style.backgroundColor = color
@@ -52,13 +57,18 @@ const createPokemonCard = (pokemon) => {
     <div class="info">
         <span class="number">#${id}</span>
         <h3 class="name">${name}</h3>
-        <small class="type">Type: <span>${type}</span> </small>
+        <small class="type">Type: <span>${poke_types}</span> </small>
+        <h3 class="abilities">Abilities: <span>${poke_abilities}</span> </h3>
+
     </div>
     `
+    // console.log(pokemon.name);
 
     pokemonEl.innerHTML = pokemonInnerHTML
 
     poke_container.appendChild(pokemonEl)
+
 }
 
-fetchPokemons()
+fetchPokemons()
+

pokedex/style.css

@@ -43,11 +43,17 @@ h1 {
   width: 120px;
   height: 120px;
   text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
 }
 
 .pokemon .img-container img {
   max-width: 90%;
   margin-top: 20px;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
 }
 
 .pokemon .info {
@@ -65,3 +71,10 @@ h1 {
   margin: 15px 0 7px;
   letter-spacing: 1px;
 }
+
+.pokemon .info .abilities {
+  margin: 15px 0 7px;
+  font-weight: 400;
+  font-size:10px;
+  letter-spacing: 1px;
+}