diff --git a/.eslintrc b/.eslintrc index b0df207..c942a78 100644 --- a/.eslintrc +++ b/.eslintrc @@ -7,7 +7,7 @@ }, "extends": "eslint:recommended", "globals": { - "example": false + "POKEMON": false }, "rules": { "no-console": 0, diff --git a/README.md b/README.md index dc2de51..bb6b8a1 100644 --- a/README.md +++ b/README.md @@ -1,416 +1,131 @@ -# Data Lovers - -## Índice - -- [Preámbulo](#preámbulo) -- [Descripción](#resumen-del-proyecto) -- [Consideraciones generales](#consideraciones-generales) -- [Objetivos de aprendizaje](#objetivos-de-aprendizaje) -- [Parte obligatoria](#parte-obligatoria) -- [Parte opcional](#parte-opcional-hacker-edition) -- [Consideraciones técnicas](#consideraciones-técnicas) -- [Contenido de referencia](#contenido-de-referencia) -- [Checklist](#checklist) - ---- - -## Preámbulo - -Según un [estudio de IBM](https://www-01.ibm.com/common/ssi/cgi-bin/ssialias?htmlfid=WRL12345USEN), -el 90% de la data que existe hoy ha sido creada durante los últimos dos años. -Cada día generamos 2.5 trillones de bytes de datos, una cifra sin precedentes. +# Pokéxpert -No obstante, los datos por sí mismos son de poca utilidad. Para que esas -grandes cantidades de datos se conviertan en **información** fácil de leer para -los usuarios, necesitamos entender y procesar estos datos. Una manera simple de -hacerlo es creando _interfaces_ y _visualizaciones_. +## Planeación del diseño -En la siguiente imagen, podrás ver cómo con la data que que se ve en la parte -izquierda se puede construir una interfaz amigable y entendible por el usuario. +### Research -![json-interfaz](https://lh4.googleusercontent.com/Tn-RPXS26pVvOTdUzRT1KVaJ-_QbFs9SpcGLxSPE43fgbHaXtFgMUInuDt7kV41DkT1j8Tt29V0LxQW7SMtC6digOIhfTXSBKdwI08wUwhD3RAqlwy0hjfmhZ2BFe91mtmCSEqysfgk) +En la etapa de descubrimiento e investigación se realizó una pequeña [encuesta](https://docs.google.com/forms/d/1tJGnAgtlCqnqvrWzWuQZs6nvSESzQ6HWGSOJAOwO7CY/edit#responses) con la herramienta **Google Forms**, donde se plantearon preguntas básicas para definir al usuario, conocer sus necesidades y, posteriormente,definir de qué manera podríamos solucionar esas necesidades con nuestro producto. -\* Puedes ver el detalle de la data [aquí](https://gist.github.com/lalogf/dd4aa3017a9f8aa8f90dfbca382c4dc9#file-student-json) -y la interfaz construida [aquí](https://app.talento.laboratoria.la/profile/HFOoMpOreBU2psCcjjLg5O2EWEv2). +Las preguntas incluidas en la encuesta fueron: -## Resumen del proyecto +1. ¿Cuál es tu edad? +2. ¿Cuál es tu género? +3. ¿Sabes qué es un Pokémon? +4. ¿Qué páginas o aplicaciones utilizas para consultar información sobre un Pókemon? +5. ¿Qué tan probable es que quieras saber más de ellos a través de un app? +6. ¿Qué características de ellos serían mas importantes para ti? -En este proyecto **construirás una _página web_ para visualizar un -_conjunto (set) de datos_** que se adecúe a lo que descubras que tu usuario -necesita. +#### Conclusiones -Esta vez te proponemos una serie de datos de diferentes _temáticas_ para que -explores y decidas con qué temática te interesa trabajar. Hemos elegido -específicamente estos sets de datos porque creemos que se adecúan bien a esta -etapa de tu aprendizaje. +Los datos que obtuvimos fueron de 52 encuestas contestadas, de las cuales obtuvimos los siguientes datos: -Una vez que definas tu área de interés, entiende quién es tu usuario y qué -necesita saber o ver exactamente; luego podrás construir la interfaz que le -ayude a interactuar y entender mejor esos datos. +La mayor cantidad de personas que respondieron la encuesta tienen mas de 26 años. -Estos son datos que te proponemos: +-El 50% de los encuestados son mujeres, el 48% son hombres y el resto no se identifican con ninguno de estos dos géneros. +-La mayoría de los encuestados saben lo que es un Pokémon. -- [Pokémon](src/data/pokemon/pokemon.json): - En este set encontrarás una lista con los 151 Pokémon de la región de Kanto, - junto con sus respectivas estadísticas usadas en el juego [Pokémon GO](pokemongolive.com). -- [Steam noticias](src/data/steam/steam.json): - Lista noticias relacionadas a los videojuegos presentes en la - plataforma de [Steam](https://store.steampowered.com/). -- [League of Legends - Challenger leaderboard](src/data/lol/lol.json): - Este set de datos muestra la lista de jugadores en una liga del - juego League of Legends (LoL), puedes revisar la documentación de su API en - este [link](https://developer.riotgames.com/api-methods/). -- [Rick and Morty](src/data/rickandmorty/rickandmorty.json). - Este set nos proporciona la lista de los personajes de la serie Rick and - Morty. Puedes revisar la documentación de su API en este [link](https://rickandmortyapi.com). +-Aquellos encuestados que contestaron saber lo suficiente para considerarse maestros Pókemon utilizan alguna página web o herramienta para consultar información sobre los Pokémon. +-Únicamente el 29% de los encuestados no están interesados en saber más sobre el tema a través de una app. -Como entregable final tendrás una página web que permita **visualizar la data, -filtrarla, ordenarla y hacer algún cálculo agregado**. Como aclaración, -con cálculo agregado nos referimos a distintos cálculos que puedes hacer con -la data que tienes para mostrar información aún más relevante a los usuarios. -Una opción serían cálculos estadísticos como el promedio, el máximo o el mínimo, -por ejemplo, si tenemos una colección que representa a un grupo de personas, -y cada persona está representada como un _objeto_ con una _propiedad_ `altura`, -podríamos elegir calcular la altura promedio en el grupo entre otras cosas. +-Las características más importantes para la mayoría de los usuarios son: -## Consideraciones generales +1. Tipo (87%). +2. Siguiente Evolución (79%). +3. Nombre (76%). +4. Debilidades (76%). +5. Foto (74%). -- Este proyecto se debe resolver en duplas. -- El proyecto será entregado subiendo tu código a GitHub (commit/push) y la - interfaz será desplegada usando [GitHub Pages](https://pages.github.com/). -- Tiempo para completarlo: 3 semana divididas en 3 sprints (una entrega del producto funcional al término de cada sprint). +## Definición del Usuario -## Objetivos de aprendizaje +Con los datos obtenidos de las encuestas, pudimos definir nuestro arquetipo de usuario contestando las siguientes preguntas: -El objetivo principal de este proyecto es que aprendas a diseñar y construir una -interfaz web donde se pueda visualizar y manipular data, entendiendo lo que el -usuario necesita. +-¿Quién es el usuario? -Dicho en palabras sencillas, aprenderás a: +-¿Qué necesita el usuario? -- Aplicar y profundizar todo lo que aprendiste en el proyecto anterior. -- Pensar en las **necesidades de los usuarios** para crear historias de usuario. -- Escribir y trabajar con **historias de usuario**, sus definiciones de - terminado (_definition of done_) en la organización y planificación de tu - trabajo. -- Definir qué data y de qué forma mostrarla en el producto, basándote en - tu **entendimiento del usuario**. -- Crear productos que sigan los **principios básicos de diseño visual** y - las **heurísticas de usabilidad**. -- Iterar el diseño del producto, basándote en los resultados de los - **tests de usabilidad**. -- Manipular **_arreglos_ (_arrays_) y _objetos_ (_objects_)**. -- **Manipular el DOM** (agregar elementos dinámicamente basados en la data). -- **Manejar eventos del DOM** para permitir interacción con el usuario - (filtrado, ordenado, ...). -- Entender los beneficios y complejidades de **trabajar en equipo** en un - ambiente de incertidumbre. +-¿Cómo podemos satisfacer esa necesidad? -## Alcances esperados +**Usuario:** Luis Vázquez es un hombre de 30 años, con interés en el tema de Pokémon. -Los criterios para considerar que has completado este proyecto son: +**Necesidad:** Tener acceso a la información básica y escencial de los Pókemon sin tener que acceder a un buscador en la web. -### Definición del producto +**Solución:** Luis podrá consultar las características básicas de los Pokémon desde una plataforma exclusiva para eso. -Documenta brevemente tu trabajo en el archivo `README.md` de tu repositorio, -contándonos cómo fue tu proceso de diseño y cómo crees que el producto resuelve -el problema (o problemas) que tiene tu usuario. +### Storytelling -### Historias de usuario +Luis es un joven que hace poco conoció el juego PokémonGo, porque vio que la mayoría de sus amigos lo jugaban y quiso saber qué es lo que tanto disfrutan de este juego. Luis se decidió a descarga el juego en su celular y de inmediato pudo capturar a su primer Pokémon, un Bulbasaur, y ahora empezaba a entender la emoción del juego, no podía esperar más para capturar al siguiente. -Una vez que entiendas las necesidades de tu usuario, escribe las [Historias -de Usuario](https://es.wikipedia.org/wiki/Historias_de_usuario) que representen -todo lo que el usuario necesita hacer/ver. Asegúrate de incluir una definición -de terminado (_definition of done_) para cada una. + Un día durante una reunión escuchó a sus amigos presumir todos los Pokémon que ya poseían, pero el no tenía ni idea de lo que era un Vulpix o un Snorlax y seguía escuchando nombres que ni siquiera podía pronunciar; se fue de esa reunión decidido a saber lo más que pudiera sobre los Pokémon. Le preguntó a sus amigos dónde podía buscar información y casi todos le responden que puede buscar en google, en reddit, en calcy y otras páginas que el ni siquiera conoce, pero lo intenta; no dura mucho su búsqueda, después de tantos clicks, ventanas abiertas y mucha publicidad, se pregunta si no existe una app o una página sencilla donde sólo pueda consultar la información escencial para empezar a sumergirse en el mundo Pokémon. -### Diseño de la Interfaz de Usuario + Finalmente, uno de sus amigos le enseña la app que él usa, se llama "Pokéxpert", Luis se decide a utilizarla y empieza a conocer a todos los Pokémon del universo aunque aún no se siente un maestro Pokémon. Después de estar horas inmerso investigando en el Pokéxpert ya tiene su Pokémon favorito, sabe sus debilidades y fortalezas y está más que decidido a capturar a cada Pokémon que se le cruce en el camino. Un par de semanas despúes Luis se vuelve a reunir con sus amigos para salir a capturar nuevos Pokémon, uno de ellos grita de emoción porque acaba de encontrar un Serperior y Luis no sabe qué es eso, pero no se preocupa porque, abre su Pokéxpert de inmediato e introduce el nombre que acaba de escuchar y en cuestión de segundos puede ver la foto y la información de este Pokémon. + + Ahora, Luis ya está listo para enfrentarse a ese nuevo Pokémon que acaba de conocer! -#### Prototipo de baja fidelidad + ###Historias de Usuario -Durante tu trabajo deberás haber hecho e iterado sketches (boceto) de tu -solución usando papel y lápiz. Te recomendamos tomar fotos de todas las -iteraciones que realices y las subas a tu repositorio, y las menciones en tu -`README.md`. +1. Entrar a la aplicación y poder explorar la información desde el principio. + * DOD: que la pantalla muestre las imágenes de todos los pokemon. +2. Saber cómo funciona la aplicación. + * DOD: tener un botón que despliegue una pantalla con información sobre la aplicación y su funcionamiento. +3. Tener diferentes opciones de búsqueda. + * DOD: tener un botón de buscar (lupita) que despliegue una pantalla donde se muestren las diferentes opciones de búsqueda. +4. Poder buscar a un Pokémon en específico por su nombre. + * DOD: tener un espacio para teclear el nombre el Pókemon y al dar click en el botón buscar, que se muestre la información de ese Pokémon. +5. Poder filtar los Pokémon según su tipo. + * DOD: tener un botón para ver todos los tipos de Pokémon y poder seleccionar un tipo en particular para que muestre todos los Pokémon que pertenecen a ese tipo. +6. Poder filtrar los Pokémon según su debilidad. + * DOD: tener un botón para ver todos los tipos de Pokémon y poder seleccionar uno de ellos para que muestre todos los Pokémon que son débiles ante ese tipo. -#### Prototipo de alta fidelidad - -Lo siguiente es diseñar tu Interfaz de Usuario (UI por sus siglas en inglés - -_User Interface_). Para eso debes aprender a utilizar alguna herramienta de -diseño visual. Nosotros te recomendamos [Figma](https://www.figma.com/) que es -una herramienta que funciona en el navegador y, además, puedes crear una cuenta -gratis. Sin embargo, eres libre de utilizar otros editores gráficos como -Illustrator, Photoshop, PowerPoint, Keynote, etc. - - -#### Testeos de usabilidad - -Durante el reto deberás realizar tests de usabilidad con distintos usuarios, y -en base a los resultados de esos tests, deberás iterar tus diseños. Cuéntanos -qué problemas de usabilidad detectaste a través de los tests y cómo los -mejoraste en tu propuesta final. - -### Implementación de la Interfaz de Usuario (HTML/CSS/JS) - -Luego de diseñar tu interfaz de usuario deberás trabajar en su implementación. -Como mencionamos, **no** es necesario que construyas la interfaz tal como la -diseñaste. Tendrás un tiempo limitado para hackear, así es que deberás -priorizar. - -Como mínimo, tu implementación debe: - -1. Mostrar la data en una interfaz: puede ser un card, una tabla, una lista, etc. -2. Permitir al usuario filtrar y ordenar la data. -3. Calcular estadísticas de la colección (o subcolección) como media aritmética, - máximo y/o mínimo de algún atributo numérico, o contar cuántas veces aparece - un determinado valor, por ejemplo. -4. Visualizarse sin problemas desde distintos tamaños de pantallas: móviles, - tablets y desktops. - -Es importante que tu interfaz, a pesar de ser una versión mínima de tu ideal, -siga los fundamentos de _visual design_. - -### Pruebas unitarias - -El _boilerplate_ de este proyecto no incluye pruebas unitarias, pero esperamos -que escribas tus propias pruebas unitarias para las funciones encargadas de -_procesar_, _filtrar_ y _ordenar_ la data, así como _calcular_ estadísticas. -Para ello te recomendamos implementar las siguientes funciones en el archivo -`src/data.js`: - -- `filterData(data, condition)`: esta función `filter` o filtrar recibiría la - data, y nos retornaría aquellos datos que sí cumplan con la condición. - -- `sortData(data, sortBy, sortOrder)`: esta función `sort` u ordenar - recibe tres parámetros. - El primer parámetro, `data`, nos entrega los datos. - El segundo parámetro, `sortBy`, nos dice con respecto a cuál de los campos de - la data se quiere ordenar. - El tercer parámetro, `sortOrder`, indica si se quiere ordenar de manera - ascendente o descendente. - -- `computeStats(data)`: la función `compute` o calcular, nos permitirá hacer - cálculos estadísticos básicos para ser mostrados de acuerdo a la data - proporcionada. - -Estas son propuestas de funciones que podrías implementar. - -El archivo `src/data.js` debe tener una cobertura del 70% de _statements_ -(_sentencias_), _functions_ (_funciones_), _lines_ (_líneas_), y _branches_ -(_ramas_). +## Ideación -**Estas funciones deben ser [_puras_](https://medium.com/laboratoria-developers/introducci%C3%B3n-a-la-programaci%C3%B3n-funcional-en-javascript-parte-2-funciones-puras-b99e08c2895d) -e independientes del DOM**. Estas funciones serán después usadas desde el archivo -`src/main.js`, al cargar la página, y cada vez que el usuario interactúe (click, -filtrado, ordenado, ...). +Durante el proceso de ideación utilizamos diferentes herramientas para obtener información e inspiración para poder diseñar nuestro prototipo de baja fidelidad. -## Hacker edition +-Benchmarking: -Features/características extra sugeridas: + 1. Calcy IV + 2. Reddit + 3. www.pokemon.com.es -- En lugar de consumir la data estática brindada en este repositorio, puedes - consumir la data de forma dinámica, cargando un archivo JSON por medio de - `fetch`. La carpeta `src/data` contiene una versión `.js` y una `.json` - de cada set datos. -- Agregarle a tu interfaz de usuario implementada visualizaciones gráficas. Para - ello te recomendamos explorar librerías de gráficas como [Chart.js](https://www.chartjs.org/) - o [Google Charts](https://developers.google.com/chart/). +-Brainstorming: + -Imagenes de fondo + -Iconos para botones + -Interaccion en la intefaz + -Cuántas secciones + -Métodos de filtrado + -Cómo mostrar las características + -etc... -## Consideraciones técnicas -La lógica del proyecto debe estar implementada completamente en JavaScript -(ES6), HTML y CSS. En este proyecto NO está permitido usar librerías o -frameworks, solo [vanilla JavaScript](https://medium.com/laboratoria-how-to/vanillajs-vs-jquery-31e623bbd46e), -con la excepción de librerías para hacer gráficas (charts); ver -[_Hacker Edition_](#parte-opcional-hacker-edition) más arriba. -No se debe utilizar la _pseudo-variable_ `this`. +## Prototipado -El _boilerplate_ contiene una estructura de archivos como punto de partida así -como toda la configuración de dependencias: +El primer prototipo diseñado para este proyecto considera las caracteristicas establecidas anteriormente buscando tener una interaccion dinamica y sencilla. -```text -. -├── package.json -├── README.md -├── src -│   ├── data -│   │   ├── injuries -│   │   │   ├── injuries.js -│   │   │   └── injuries.json -│   │   ├── lol -│   │   │   ├── lol.js -│   │   │   └── lol.json -│   │   ├── pokemon -│   │   │   ├── pokemon.js -│   │   │   └── pokemon.json -│   │   ├── steam -│   │   │   ├── steam.js -│   │   │   └── steam.json -│   │   └── worldbank -│   │   ├── worldbank.js -│   │   └── worldbank.json -│   ├── data.js -│   ├── index.html -│   ├── main.js -│   └── style.css -└── test - └── data.spec.js - -8 directories, 17 files -``` - -### `src/index.html` +### Sketch -Al igual que en el proyecto anterior, existe un archivo `index.html`. Como ya -sabrás, acá va la página que se mostrará al usuario. También nos sirve para -indicar qué scripts se usarán y unir todo lo que hemos hecho. + + + + +Nuestro prototipo de baja fidelidad se realizó en Marvel para poder añadir interacciones y poder hacer el testing con usuarios. -En este archivo encontrarás una serie de _etiquetas_ (_tags_) ` -``` - -Y ahora tendríamos la variable global `WORLDBANK` disponible en nuestros otros -scripts (como `src/data.js` o `src/main.js`). - -### `src/main.js` - -Recomendamos usar `src/main.js` para todo tu código que tenga que ver con -mostrar los datos en la pantalla. Con esto nos referimos básicamente a la -interacción con el DOM. Operaciones como creación de nodos, registro de -manejadores de eventos (_event listeners_ o _event handlers_), .... - -Esta no es la única forma de dividir tu código, puedes usar más archivos y -carpetas, siempre y cuando la estructura sea clara para tus compañeras. - -### `src/data.js` - -El corazón de este proyecto es la manipulación de datos a través de arreglos y -objetos. La idea de este archivo es contener toda la funcionalidad -que corresponda a obtener, procesar y manipular datos. - -En este archivo esperamos que implementes las funciones detalladas en la sección -de [_Pruebas Unitarias_](#pruebas-unitarias). - -### `src/data` - -En esta carpeta están los datos de las diferentes fuentes. Encontrarás una -carpeta por cada fuente, y dentro de cada carpeta dos archivos: uno con la -extensión `.js` y otro `.json`. Ambos archivos contienen la misma data; la -diferencia es que el `.js` lo usaremos a través de una etiqueta ` + + + -
- - - - - +
+ Título Pokéxpert +
+
+
+ + +
+ + +
+
+ +
+
+ +
+
+ +
+ +
+ +
+ + + +
+ +
+ +
+ + +
+

BUSCAR

+ +
+ + + +
+ +
+ +

poxebola1

+
+ +
+ +

+
+
+ + +
+ +
+ +
+
+

Tipos

+
+
+
    +
  • Agua

  • +
  • Fuego

  • +
  • Planta

  • +
  • Tierra

  • +
  • Roca

  • +
  • Acero

  • +
  • Hielo

  • +
  • Eléctrico

  • +
  • Dragón

  • +
  • Fantasma

  • +
  • Psíquico

  • +
  • Normal

  • +
  • Pelea

  • +
  • Veneno

  • +
  • Insecto

  • +
  • Volador

  • +
+
+
+ +
+
+

Débil al:

+
+
+
    +
  • Agua

  • +
  • Fuego

  • +
  • Planta

  • +
  • Tierra

  • +
  • Roca

  • +
  • Acero

  • +
  • Hielo

  • +
  • Eléctrico

  • +
  • Dragón

  • +
  • Fantasma

  • +
  • Psíquico

  • +
  • Normal

  • +
  • Pelea

  • +
  • Veneno

  • +
  • Insecto

  • +
  • Volador

  • +
  • Siniestro

  • +
  • Hada

  • +
+
+
+ + +
+ +
+ + Estadística +
+ +
+ + +
+
+ + Estadistica +
+ +
+ +
+
+

¡Bienvenid@ a Pokéxpert!

+

Aquí podras consultar información básica de los Pokémon para empezar a formar parte de este grandioso Universo

+

Tú decides, si qiueres buscarlo por tipo, por nombre, o según sus debilidades

+

Si no buscas ninguno en específico, siempre puedes regresar a la página principal para ver el listado completo de Pokémon

+

No olvides visitar nuestra secciones de datos curiosos

+
+
+ +
+
+

Curiosidades de tus Pokemon, ¿Sabes la respuesta?


+

¿Cual es el Pokemon mas pesado?

+ +
    +

    ¿Cual es el Pokemon mas alto?


    + +
      +

      ¿En promedio cuantos dulces necesita un Pokemon para poder Evolucionar?


      + +

      + + + +
      +
      + + +
      + diff --git a/src/main.js b/src/main.js index e69de29..2af4f02 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,406 @@ + +let data = window.POKEMON.pokemon; +let google = window.google; +let labelOrdenar = document.getElementById("ordenar-por"); +let pantallaPrincipal = document.getElementById("pantalla-principal"); +let mostrar = document.getElementById('pantalla-principal'); +let ordenarPor = document.getElementById("ordenar"); +let imprimirOrden = document.getElementById("lista-ordenada"); +let pantallaOrdenada = document.getElementById("pantalla-ordenada"); +let botonCuriosidades = document.getElementById("boton-curiosidades"); +let botonBuscar = document.getElementById("boton-buscar"); +let botonRegresar = document.getElementById("boton-regresar"); +let botonInfo = document.getElementById("boton-info"); +let pantallaCuriosidades = document.getElementById("pantalla-curiosidades"); +let pantallaBuscar = document.getElementById("pantalla-buscar"); +let pantallaInfo = document.getElementById("pantalla-info"); +let botonBuscarTipos=document.getElementById("tipo-pokemon"); +let botonBuscarDebilidad=document.getElementById("debilidad-pokemon"); +let botonBuscarNombre = document.getElementById('buscar-nombre'); +let inputNombre = document.getElementById('nombre-pokemon'); +let pantallaResultNombre = document.getElementById("pantalla-result-busqueda-nombre"); +let imprimirBusqueda = document.getElementById('result-busqueda-nombre'); +let pantallaTipos=document.getElementById("pantalla-iconos-tipos"); +let pantallaPrintTipo = document.getElementById("pantalla-resultado-tipo"); +let resultadoBuscarTipo = document.getElementById("busqueda-por-tipo"); +let tipo = document.getElementsByClassName("iconos"); +let pantallaDebilidad = document.getElementById("pantalla-iconos-debilidad"); +let debilidad = document.getElementsByClassName("iconos-debilidad"); +let pantallaPrintDebilidad = document.getElementById("pantalla-resultado-debilidad"); +let resultadoBuscarDebilidad = document.getElementById("busqueda-por-debilidad"); + +let botonRespuestaUno = document.getElementById("weight"); +let botonRespuestaDos = document.getElementById("height"); +let botonRespuestaTres = document.getElementById("candy_count"); + +let botonSiguiente = document.getElementById("siguiente-mas-alto"); +let botonSiguientePromedio = document.getElementById("siguiente-promedio-candy"); + +let preguntaUno = document.getElementById("pregunta-uno"); +let preguntaDos = document.getElementById("pregunta-dos"); +let preguntaTres = document.getElementById("pregunta-tres"); + +let imprimirRespuestaUno = document.getElementById("respuesta-uno"); +let imprimirRespuestaDos = document.getElementById("respuesta-dos"); +let imprimirRespuestaTres = document.getElementById("respuesta-tres"); +let imgCandy = document.getElementById("img-candy"); + + +//Funcion especifica para Imprimir cualquier data +let imprimir= (data) => { + let template=''; + for(let pokemon of data){ + //mostrar.innerHTML += `