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: