Pokemon Names

Fetch a list with the names of the Pokemons using the PokeAPI.

HTML

<!doctype html>

<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <title>Lista de Pokémons em HTML e JavaScript</title>
  <meta name="author" content="Marcio Frayze David">
</head>

<body>
  <p id="loading-message">
    Carregando lista de nomes dos Pokémons, aguarde...
  </p>

  <ul id="pokemon-names-list">
  </ul>

<script>
    
  (async function() {

	  await fetch("https://pokeapi.co/api/v2/pokemon?limit=5")
	    .then(data => data.json())
	    .then(dataJson => dataJson.results)
	    .then(results => results.map(pokemon => pokemon.name))
	    .then(names => addNamesToDOM(names))

	  hideLoadingMessage()
    
  })();

  function addNamesToDOM(names) {
    let pokemonNamesListElement = document.getElementById('pokemon-names-list')
    names.forEach(name => addNameToDOM(pokemonNamesListElement, name))
  }

  function addNameToDOM(pokemonNamesListElement, name) {
    let newListElement = document.createElement('li')
    newListElement.innerHTML = name
    pokemonNamesListElement.append(newListElement)
  }

  function hideLoadingMessage() {
    document.getElementById('loading-message').style.visibility = 'hidden'
  }

</script>

</body>
</html>