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 id="pokemon_types">13 <div id="pokemon_type_left" style="display: none;"></div>14 <div id="pokemon_type_right" style="display: none;"></div>15 </div>16 </div>17 18 <style>19 20 html, body {21 font-family: sans-serif;22 margin: 0;23 padding: 0;24 }25 26 #pokemon_types {27 text-align: center;28 }29 30 #pokemon_types div {31 display: inline-block;32 padding: 8px;33 border-radius: 4px;34 margin: 4px;35 background-color: orange;36 }37 38 39 </style>40 41 42 <script>43 44 const types = {45 46 };47 48 let pokemons = [];49 const result = document.getElementById('result');50 const search = document.getElementById('search');51 52 search.addEventListener('keyup', function(event) {53 let p = findByName(this.value);54 paintPokemon(p);55 }, true);56 57 function findByName(name) {58 for (id in pokemons) {59 let p = pokemons[id];60 if (p.name.english.toLowerCase() == name.toLowerCase()) return p;61 }62 return null;63 };64 65 function paintPokemon(pokemon) {66 result.style.display = 'none';67 if (pokemon === null) return;68 document.getElementById('pokemon_num').textContent = pokemon.id;69 document.getElementById('pokemon_name').textContent = pokemon.name.english;70 document.getElementById('pokemon_picture').src = '';71 document.getElementById('pokemon_picture').src = 'https://raw.githubusercontent.com/fanzeyi/pokemon.json/master/images/'+pokemon.picture;72 73 document.getElementById('pokemon_type_left').style.display = 'none';74 document.getElementById('pokemon_type_right').style.display = 'none';75 76 if (pokemon.type[0]) {77 document.getElementById('pokemon_type_left').style.display = '';78 document.getElementById('pokemon_type_left').textContent = pokemon.type[0];79 document.getElementById('pokemon_type_left').setAttribute('class', pokemon.type[0]);80 }81 if (pokemon.type[1]) {82 document.getElementById('pokemon_type_right').style.display = '';83 document.getElementById('pokemon_type_right').textContent = pokemon.type[1];84 document.getElementById('pokemon_type_right').setAttribute('class', pokemon.type[1]);85 }86 //result.textContent = JSON.stringify(pokemon);87 result.style.display = 'block';88 };89 90 function pad(n) {91 num = '' + n;92 num = '0'.repeat(3-num.length)+num;93 return num;94 }95 96 97 fetch('https://raw.githubusercontent.com/fanzeyi/pokemon.json/master/pokedex.json')98 .then(response => response.json())99 .then(data => {100 data.forEach(pokemon => {101 102 pokemon.picture = pad(pokemon.id) + '.png';103 if (pokemon.id == 662) pokemon.picture = '662r.png';104 if (pokemon.id == 740) pokemon.picture = '740le.png';105 106 pokemons.push(pokemon); 107 });108 });109 110 </script>Enlace
El enlace para compartir es: