Pokedex

API pra puxar os dados JSON

API para buscar imagens dos pokemons com mais qualidade

Detalhes sobre o código javascript

1. Pegando dentro da API todos os IDs

const getPokemonUrl = id => `https://pokeapi.co/api/v2/pokemon/${id}`

2. Vamos encadear a invocação do método nesse array, onde recebe as 150 promises dos pokemons que é gerado no fetch

const generatePokemoPromises = () => Array(150).fill().map((_, index) =>
    fetch(getPokemonUrl(index + 1)).then(response => response.json()))

3. Aqui vamos gerar os li da minha página HTML dinamicamente puxando as props da API, onde o reduce vai reduzir a minha lista de arrays em JSON

const generateHTML = pokemons => pokemons.reduce((accumulator, { name, id, types }) => {
    const elementTypes = types.map(typeInfo => typeInfo.type.name)

    accumulator += `
        <li class="card ${elementTypes[0]}">
        <img class="card-image" alt="${name}" src="https://pokeres.bastionbot.org/images/pokemon/${id}.png" />
            <h2 class="card-title">${id}. ${name}</h2>
            <p class="card-subtitle">${elementTypes.join(' | ')}</p>
        </li>
    `
    return accumulator;
}, '')

4. Aqui será alterado dentro do meu html nas tags li as informações guardadas pela variável generatePokemonPromises, onde a requisição será chamada no array

const insertPokemonsIntoPage = pokemons => {
    const ul = document.querySelector('[data-js="pokedex"]')
    ul.innerHTML = pokemons
}

const pokemonPromises = generatePokemoPromises()

Promise.all(pokemonPromises)
    .then(generateHTML)
    .then(insertPokemonsIntoPage)