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
-
+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_) ` -->
-```
-
-La línea quedaría así:
-
-```html
-
-```
-
-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 `
+
+
+
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
+¿Cual es el Pokemon mas pesado?
+¿Cual es el Pokemon mas alto?
¿En promedio cuantos dulces necesita un Pokemon para poder Evolucionar?