<div id="loading">loading...</div>
<ul id="list">

</ul>
async function loadPokemons() {
  const res = await fetch('https://pokeapi.co/api/v2/pokemon?limit=10');
  const data = await res.json();
  return data.results;
}

function removeLoading() {
  const elem = document.querySelector('#loading');
  if (elem) {
    elem.parentNode.removeChild(elem); 
  }
}

function appendPokemon(pokemon) {
  const node = document.createElement('li');
  const textnode = document.createTextNode(pokemon.name);
  node.appendChild(textnode);
  document.querySelector('#list').appendChild(node);
}

function clearList() {
  const list = document.querySelector('#list');
  while (list.firstChild) {
    list.removeChild(list.lastChild);
  }
}

function saveToCache(pokemons) {
  localStorage.setItem('pokemons', JSON.stringify(pokemons));
}

function loadFromCache() {
  const res = localStorage.getItem('pokemons');
  if (res) {
    return JSON.parse(res);
  }
  return null;
}

const cachedPokemons = loadFromCache();
if (cachedPokemons) {
  removeLoading();
  cachedPokemons.forEach(appendPokemon);
  console.log('loaded from cache!');
}

loadPokemons()
  .then((pokemons) => {
    removeLoading();
    saveToCache(pokemons);
    clearList();
    pokemons.forEach(appendPokemon);
    console.log('loaded from network!');
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.