1 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">2 3 4 <h1>Buscador Pokemon</h1>5 6 <div style="text-align: center; padding: 8px;">7 Nombre: <input id="search"> <br><br>8 <button id="button-random">Aleatorio</button>9 </div>10 11 <div id="result" style="text-align: center;">12 <img id="pokemon_picture" style="height: 200px;">13 <div id="pokemon_num" style="font-weight: bold; font-size: 120%;"></div>14 <div id="pokemon_name"></div>15 <div id="pokemon_types">16 <div id="pokemon_type_left" style="display: none;"></div>17 <div id="pokemon_type_right" style="display: none;"></div>18 </div>19 </div>20 21 <style>22 23 html, body {24 font-family: sans-serif;25 margin: 0;26 padding: 0;27 }28 29 #pokemon_types {30 text-align: center;31 }32 33 #pokemon_types div {34 display: inline-block;35 padding: 8px 16px;36 border-radius: 4px;37 margin: 4px;38 background-color: orange;39 min-width: 90px;40 font-weight: bold;41 color: white;42 }43 44 45 </style>46 47 48 <script>49 50 const types = {51 Bug: {color: '#A6B91A', es: 'Bicho'},52 Dark: {color: '#705746', es: 'Siniestro'},53 Dragon: {color: '#6F35FC', es: 'Dragón'},54 Electric: {color: '#F7D02C', es: 'Eléctrico'},55 Fairy: {color: '#D685AD', es: 'Hada'},56 Fighting: {color: '#C22E28', es: 'Lucha'},57 Fire: {color: '#EE8130', es: 'Fuego'},58 Flying: {color: '#A98FF3', es: 'Volador'},59 Ghost: {color: '#735797', es: 'Fantasma'},60 Grass: {color: '#7AC74C', es: 'Planta'},61 Ground: {color: '#E2BF65', es: 'Tierra'},62 Ice: {color: '#96D9D6', es: 'Hielo'},63 Normal: {color: '#A8A77A', es: 'Normal'},64 Poison: {color: '#A33EA1', es: 'Veneno'},65 Psychic: {color: '#F95587', es: 'Psíquico'},66 Rock: {color: '#B6A136', es: 'Roca'},67 Steel: {color: '#B7B7CE', es: 'Acero'},68 Water: {color: '#6390F0', es: 'Agua'},69 };70 71 let pokemons = [];72 const result = document.getElementById('result');73 const search = document.getElementById('search');74 const buttonRandom = document.getElementById('button-random');75 76 search.addEventListener('keyup', function(event) {77 let p = findByName(this.value);78 paintPokemon(p);79 }, true);80 81 buttonRandom.addEventListener('click', function(event) {82 const randomId = Math.floor(Math.random() * pokemons.length);83 paintPokemon(pokemons[randomId]);84 }, true);85 86 function findByName(name) {87 for (id in pokemons) {88 let p = pokemons[id];89 if (p.name.english.toLowerCase() == name.toLowerCase()) return p;90 }91 return null;92 };93 94 function paintPokemon(pokemon) {95 result.style.display = 'none';96 if (pokemon === null) return;97 document.getElementById('pokemon_num').textContent = pokemon.id;98 document.getElementById('pokemon_name').textContent = pokemon.name.english;99 document.getElementById('pokemon_picture').src = '';100 document.getElementById('pokemon_picture').src = 'https://raw.githubusercontent.com/fanzeyi/pokemon.json/master/images/'+pokemon.picture;101 102 document.getElementById('pokemon_type_left').style.display = 'none';103 document.getElementById('pokemon_type_right').style.display = 'none';104 105 if (pokemon.type[0]) {106 let pokemonType = types[pokemon.type[0]];107 document.getElementById('pokemon_type_left').style.display = '';108 document.getElementById('pokemon_type_left').textContent = pokemonType.es ;109 document.getElementById('pokemon_type_left').setAttribute('class', pokemon.type[0]);110 document.getElementById('pokemon_type_left').style.backgroundColor = pokemonType.color;111 }112 if (pokemon.type[1]) {113 let pokemonType = types[pokemon.type[1]];114 document.getElementById('pokemon_type_right').style.display = '';115 document.getElementById('pokemon_type_right').textContent = pokemonType.es;116 document.getElementById('pokemon_type_right').setAttribute('class', pokemon.type[1]);117 document.getElementById('pokemon_type_right').style.backgroundColor = pokemonType.color;118 }119 //result.textContent = JSON.stringify(pokemon);120 result.style.display = 'block';121 };122 123 function pad(n) {124 num = '' + n;125 num = '0'.repeat(3-num.length)+num;126 return num;127 }128 129 130 fetch('https://raw.githubusercontent.com/fanzeyi/pokemon.json/master/pokedex.json')131 .then(response => response.json())132 .then(data => {133 data.forEach(pokemon => {134 135 pokemon.picture = pad(pokemon.id) + '.png';136 if (pokemon.id == 662) pokemon.picture = '662r.png';137 if (pokemon.id == 740) pokemon.picture = '740le.png';138 139 pokemons.push(pokemon); 140 });141 });142 143 </script>Enlace
El enlace para compartir es: