1 2 <a href="https://www.treeweb.es/ShareCode/preview/112ed9a85b5550c60ff0f44fdc48ea03" 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 console.log(pokemon); 57 58 let item = document.createElement('div');59 60 let img = document.createElement('img');61 img.src = 'https://raw.githubusercontent.com/fanzeyi/pokemon.json/master/images/'+pad(pokemon.id)+'.png';62 item.appendChild(img);63 64 let num = document.createElement('div');65 num.classList.add('num');66 num.textContent = '#'+pokemon.id;67 item.appendChild(num);68 69 let name = document.createElement('div');70 name.classList.add('name');71 name.textContent = pokemon.name.english;72 item.appendChild(name);73 74 list.appendChild(item); 75 });76 });77 78 79 /*80 81 for (let i=1; i<10; i++) {82 83 let item = document.createElement('div');84 85 let img = document.createElement('img');86 img.src = 'https://raw.githubusercontent.com/fanzeyi/pokemon.json/master/images/00'+i+'.png';87 item.appendChild(img);88 89 90 91 list.appendChild(item);92 93 }94 */95 96 97 </script>Enlace
El enlace para compartir es: