text: // fetch - requisições ajax: requisição assincronas para que dados sejam obtidos sem que a pagina precise ser recarregada.
  
  // o metodo fetch retorna uma promise: objeto que representa o sucesso ou a falha de uma operação assincrona.
  
  // fetch(url) - passando como argumento os dados de outro lugar: a url.
  
  const getPokemonUrl = id => `https://pokeapi.co/api/v2/pokemon/${id}`;
  const generatePokemonPromises = () => Array(150).fill().map((_, index) =>
    fetch(getPokemonUrl(index + 1)).then(response => response.json()));
  
  const generateHtml = pokemons => pokemons.reduce((accumulator, { name, id, types }) => {
    const elementTypes = types.map((typesInfo) => typesInfo.type.name);
    accumulator += `
    <li class="card ${elementTypes[0]}">
      <img class="card-image" alt="${name}" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png"/>
      <h2 class="card-title">${id}. ${name}</h2>
      <p class="card-subtitle">${elementTypes.join(' | ')}</p>
    </li>
    `
    return accumulator;
  }, '');
  
  const insertPokemonsIntoPage = pokemons => {
    const ul = document.querySelector('[data-js="pokedex"]');
    ul.innerHTML = pokemons;
  }
  
  const pokemonPromises = generatePokemonPromises();
  Promise.all(pokemonPromises)
    .then(generateHtml)
    .then(insertPokemonsIntoPage);
  