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