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