1 2 <a href="https://www.treeweb.es/ShareCode/preview/cf5b5dbd732b46892722be6eb8a2bbf7" target="blank"><h1>Buscador Pokemon</h1></a>3 4 <div style="text-align: center">5 Nombre: <input id="search">6 </div>7 8 <div id="result" style="text-align: center;">9 <img id="pokemon_picture" style="height: 200px;">10 <div id="pokemon_num" style="font-weight: bold; font-size: 120%;"></div>11 <div id="pokemon_name"></div>12 </div>13 14 <style>15 16 html, body {17 font-family: sans-serif;18 margin: 0;19 padding: 0;20 }21 22 23 </style>24 25 26 <script>27 28 let pokemons = [];29 const result = document.getElementById('result');30 const search = document.getElementById('search');31 32 search.addEventListener('keyup', function(event) {33 let p = findByName(this.value);34 paintPokemon(p);35 }, true);36 37 function findByName(name) {38 for (id in pokemons) {39 let p = pokemons[id];40 if (p.name.english.toLowerCase() == name.toLowerCase()) return p;41 }42 return null;43 };44 45 function paintPokemon(pokemon) {46 result.style.display = 'none';47 if (pokemon === null) return;48 document.getElementById('pokemon_num').textContent = pokemon.id;49 document.getElementById('pokemon_name').textContent = pokemon.name.english;50 document.getElementById('pokemon_picture').src = 'https://raw.githubusercontent.com/fanzeyi/pokemon.json/master/images/'+pokemon.picture;51 //result.textContent = JSON.stringify(pokemon);52 result.style.display = 'block';53 };54 55 function pad(n) {56 num = '' + n;57 num = '0'.repeat(3-num.length)+num;58 return num;59 }60 61 62 fetch('https://raw.githubusercontent.com/fanzeyi/pokemon.json/master/pokedex.json')63 .then(response => response.json())64 .then(data => {65 66 67 68 data.forEach(pokemon => {69 70 pokemon.picture = pad(pokemon.id) + '.png';71 if (pokemon.id == 662) pokemon.picture = '662r.png';72 if (pokemon.id == 740) pokemon.picture = '740le.png';73 74 pokemons.push(pokemon); 75 });76 });77 78 </script>Enlace
El enlace para compartir es: