diff --git a/pokedex/script.js b/pokedex/script.js index a11e9e1..05d6d94 100644 --- a/pokedex/script.js +++ b/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) => {
#${id}

${name}

- Type: ${type} + Type: ${poke_types} +

Abilities: ${poke_abilities}

+
` + // console.log(pokemon.name); pokemonEl.innerHTML = pokemonInnerHTML poke_container.appendChild(pokemonEl) + } -fetchPokemons() \ No newline at end of file +fetchPokemons() + diff --git a/pokedex/style.css b/pokedex/style.css index fc5ca34..fa60773 100644 --- a/pokedex/style.css +++ b/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; +}