No al cierre de webs
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

1 2 <a href="https://www.treeweb.es/ShareCode/preview/0bcb345a0992fa08912196cad1362062" target="blank"><h1>Pokemon</h1></a>3 4 <div id="list"></div>5 6 <style>7 8 html, body {9  font-family: sans-serif;10  margin: 0;11  padding: 0;12 }13 14 #list {15 }16 17 #list > div {18  width: 2rem;19  display: inline-block;20  padding: 8px;21 }22 23 #list > div .num {24  font-weight: bold;25  text-align: center;26 }27 28 #list > div .name {29  text-align: center;30  font-size: 50%;31 }32 33 #list > div > img {34  max-width: 100%;35 }36 37 </style>38 39 40 <script>41 42 const list = document.getElementById('list');43 44 function pad(n) {45  num = '' + n;46  num = '0'.repeat(3-num.length)+num;47  return num;48 }49 50 51 fetch('https://raw.githubusercontent.com/fanzeyi/pokemon.json/master/pokedex.json')52  .then(response => response.json())53  .then(data => {54  data.forEach(pokemon => {55 56  pokemon.picture = pad(pokemon.id) + '.png';57  if (pokemon.id == 662) pokemon.picture = '662r.png';58  if (pokemon.id == 740) pokemon.picture = '740le.png';59 60  console.log(pokemon); 61 62  let item = document.createElement('div');63 64  let img = document.createElement('img');65  img.src = 'https://raw.githubusercontent.com/fanzeyi/pokemon.json/master/images/'+pokemon.picture;66  item.appendChild(img);67 68  let num = document.createElement('div');69  num.classList.add('num');70  num.textContent = '#'+pokemon.id;71  item.appendChild(num);72 73  let name = document.createElement('div');74  name.classList.add('name');75  name.textContent = pokemon.name.english;76  item.appendChild(name);77 78  list.appendChild(item); 79  });80  });81 82 83 /*84 85 for (let i=1; i<10; i++) {86 87  let item = document.createElement('div');88  89  let img = document.createElement('img');90  img.src = 'https://raw.githubusercontent.com/fanzeyi/pokemon.json/master/images/00'+i+'.png';91  item.appendChild(img);92  93  94  95  list.appendChild(item);96  97 }98 */99 100 101 </script>
Enlace
El enlace para compartir es: