diff --git a/README.md b/README.md
index f9975c76..18dfb8fc 100644
--- a/README.md
+++ b/README.md
@@ -1,615 +1,151 @@
# Data Lovers
-## Índice
+## Resumen del proyecto
-* [1. Preámbulo](#1-preámbulo)
-* [2. Resumen del proyecto](#2-resumen-del-proyecto)
-* [3. Objetivos de aprendizaje](#3-objetivos-de-aprendizaje)
-* [4. Consideraciones generales](#4-consideraciones-generales)
-* [5. Criterios de aceptación mínimos del proyecto](#5-criterios-de-aceptación-mínimos-del-proyecto)
-* [6. Hacker edition](#6-hacker-edition)
-* [7. Consideraciones técnicas](#7-consideraciones-técnicas)
-* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias)
-* [9. Checklist](#9-checklist)
+Este proyecto tiene como finalidad construir una página web responsive, en la que se interactua con una data ya proporcionada que cuenta con la información de los `251 Pokémon` de la región de Kanto y Johto. La intención es que cualquier usuario interactue en la página tal como lo haría usando una pokedex, en la que se logra visualizar la información deseada de manera precisa y clara, pudiendo interactuar `filtrando, ordenando y obteniendo un cálculo agregado` de la data, para una mejor comprensión de la misma.
-***
+## Diseño de la Interfaz de Usuario
-## 1. Preámbulo
+### Prototipo de baja fidelidad
-Según [Forbes](https://www.forbes.com/sites/bernardmarr/2018/05/21/how-much-data-do-we-create-every-day-the-mind-blowing-stats-everyone-should-read),
-el 90% de la data que existe hoy ha sido creada durante los últimos dos años.
-Cada día generamos 2.5 millones de terabytes de datos, una cifra sin
-precedentes.
+Desde el prototipo de baja fidelidad buscamos establecer cómo queríamos mostrar la data de los pokemones en la interfaz, quisimos colocarlos dentro de unas columnas y mostrarlos con imágenes en forma de cards.
-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_.
+Determinamos la posición de la barra de búsqueda y la de los filtrados.
+Enlace a nuestro [Excalidraw] https://excalidraw.com/#room=0132c394d322d65e4a26,EZ8riSLZmoiszmN165SZdg
-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 las
-usuarias, al lado derecho.
+
-
+### Prototipo de alta fidelidad
-## 2. Resumen del proyecto
+Para el prototipo de alta fidelidad nos propusimos un estilo minimalista en escala de grises y una paleta de color pastel, ya que nuestro objetivo era transmitir la información de forma clara y precisa, aprovechamos los colores que corresponden a los tipos Pokémon para darle un acento colorido que lo hiciera atractivo al usuario.
-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.
+Investigamos diferentes referencias visuales de diversas pokedex en línea y así llegamos a nuestro prototipo de alta fidelidad.
-Como entregable final tendrás una página web que permita **visualizar la data,
-filtrarla, ordenarla y hacer algún cálculo agregado**. Con cálculo agregado
-nos referimos a distintos cálculos que puedes hacer con la data para mostrar
-información aún más relevante para los usuarios (promedio, el valor máximo
-o mínimo, etc).
+Para bocetarlo consideramos lo siguiente:
-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.
+- Que permita al usuario interactuar para obtener la información que necesita.
+- Que fuera **responsive**, es decir, debía visualizarse sin problemas desde distintos
+tamaños de pantallas: móviles, tablets y desktops.
-Una vez que definas tu área de interés, buscar entender 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.
+Enlace a nuestro [Figma] https://www.figma.com/file/DtCbPHLUku2wz9R54Xzo3x/dataLovers%2Fcolaborativo?type=design&node-id=0-1&t=R5TqmXOQ5YcmRd3H-0
-Estos son datos que te proponemos:
+
-* [Pokémon](src/data/pokemon/pokemon.json):
- En este set encontrarás una lista con los 251 Pokémon de la región de Kanto
- y Johto, junto con sus respectivas estadísticas usadas en el juego
- [Pokémon GO](http://pokemongolive.com).
- - [Investigación con jugadores de Pokémon Go](src/data/pokemon/README.md)
+
-* [League of Legends - Challenger leaderboard](src/data/lol/lol.json):
- Este set de datos muestra la lista de campeones en una liga del
- juego League of Legends (LoL).
- - [Investigación con jugadores de LoL](src/data/lol/README.md)
+### Testeos de usabilidad
-* [Rick and Morty](src/data/rickandmorty/rickandmorty.json).
- Este set nos proporciona la lista de los personajes de la serie Rick and
- Morty. [API Rick and Morty](https://rickandmortyapi.com).
- - [Investigación con seguidores de Rick and Morty](src/data/rickandmorty/README.md)
+La mayoría de nuestros testeos ocurrieron durante las demos que tuvimos a lo largo de los sprints, en los cuales las compañeras nos señalaron una serie de características a mejorar.
-* [Juegos Olímpicos de Río de Janeiro](src/data/athletes/athletes.json).
- Este set nos proporciona la lista de los atletas que ganaron medallas en las
- olímpiadas de Río de Janeiro.
- - [Investigación con interesados en juegos olímpicos de Río de Janeiro](src/data/athletes/README.md)
+- El tamaño de la barra de búsqueda era muy pequeño.
+- El texto de nuestros botones en las listas desplegables no era suficientemente legible.
+- Inicialmente colocamos el botón de reset al costado derecho de la barra de búsqueda entonces era confuso para el usuario porque parecía que era el botón que enviaba la búsqueda del pokémon por nombre o por número. Lo movimos al extremo derecho y mejoró la legibilidad de la interfaz.
+- El padding del tipo de cada pokémon no permitía que fuera legible el tipo, entonces hacía falta agregar más padding para permitir mejor lectura al usuario.
+- Que el diseño responsivo se modificara para el celular, ya que nuestro modal pokémon consiste en dos columnas (imagen de pokémon y descripción al costado). Sin embargo, para la versión móvil modificamos un media query que permitiera que la información quedara en una sola columna.
+- Al mostrar la gráfica de los porcentajes, las etiquetas de cada tipo eran de un color obscuro y dificultaba su legibilidad, después lo modificamos para que fuera blanco y contrastara con el fondo.
-* [Studio Ghibli](src/data/ghibli/ghibli.json).
- En este set encontrarás una lista de las animaciones y sus personajes del
- [Studio Ghibli](https://ghiblicollection.com/).
- - [Investigación con seguidores de las animaciones del Studio Ghibli](src/data/ghibli/README.md)
+Gracias al feedback anterior de los usuarios mejoramos la propuesta final.
-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.
+## Historias de Usuario
-## 3. Objetivos de aprendizaje
+### HU 1. Visualizar todos los pokémon
-Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo.
+Yo, COMO USUARIO pokemón, QUIERO que al ingresar a mi pokédex pueda visualizar todos los pokémon PARA saber cuáles son los que contiene la pokédex.
-### HTML
+Criterios de Aceptación:
-- [ ] **Uso de HTML semántico**
+- [✔️] El usuario debe poder visualizar en la pantalla la imagen del pokemon, el nombre, el número de identificación y el tipo, de los 251 pokémones de la BD.
+- [✔️] El usuario podrá ver a los 251 pokémones ordenados por su número y en forma de grilla.
+- [✔️] La visualización de los pokémones debe poder hacerse fácilmente desde cualquier dispositivo.
- Links
+Definición de Terminado:
- * [HTML semántico](https://curriculum.laboratoria.la/es/topics/html/02-html5/02-semantic-html)
- * [Semantics - MDN Web Docs Glossary](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)
-
+- [✔️] El codigo no tiene correcciones de ESLINT.
+- [✔️] La función creada para mostrar a los pokemones funciona correctamente.
+- [✔️] La HU debe estar desplegada en GitPages para que el usuario pueda iteractuar y aprobarlo.
-### CSS
+### HU 2. Búsqueda personalizada
-- [ ] **Uso de selectores de CSS**
+Yo, COMO USUARIO pokémon, QUIERO que exista una barra de búsqueda por nombre o por número de pokémon PARA hacer una búsqueda específica.
- Links
+Criterios de Aceptación:
- * [Intro a CSS](https://curriculum.laboratoria.la/es/topics/css/01-css/01-intro-css)
- * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors)
-
+- [✔️] El usuario debe identificar el buscador al entrar a la página
+- [✔️] El usuario debe poder buscar a los pokemones a través de su nombre o número.
+- [✔️] La visualización de los pokemones buscados debe poder hacerse fácilmente desde cualquier dispositivo.
+- [✔️] El usuario podrá ver el modal de los pokemon que tengan coincidencia con el inicio de su nombre.
-- [ ] **Modelo de caja (box model): borde, margen, padding**
+Definición de Terminado:
- Links
+- [✔️] Todos los criterios de aceptación son cumplidos.
+- [✔️] El codigo tiene y pasa los test respectivos (como minimo el 70 %).
+- [✔️] La HU debe estar desplegado en GitPages para que el usuario pueda interactuar.
+- [✔️] El codigo no tiene errores en Eslint.
- * [Box Model & Display](https://curriculum.laboratoria.la/es/topics/css/01-css/02-boxmodel-and-display)
- * [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
- * [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
- * [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display)
- * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/)
-
+### HU 3. Visualización de pokémon por tipo
-- [ ] **Uso de flexbox en CSS**
+Yo, COMO USUARIO pokémon, QUIERO que del total de los pokémon pueda filtrar a los pokémon por tipo (eléctrico, agua, fuego, etc) PARA saber cuales pokémon comparten esa característica.
- Links
+- [✔️] El usuario puede identificar una lista desplegable de nombre "Tipo".
+- [✔️] El usuario puede visualizar en la lista desplegable todos los tipos de pokémon que hay en la base de datos.
+- [✔️] La lista desplegable debe permitir seleccionar solo un tipo de pokémon.
+- [✔️] Al seleccionar el tipo de pokémon el usuario puede visualizar aquellos pokémon que coinciden al menos con ese tipo.
-### Web APIs
+Definición de Terminado:
-- [ ] **Uso de selectores del DOM**
+- [✔️] Todos los criterios de aceptación son cumplidos.
+- [✔️] El código tiene y pasa los test respectivos.
+- [✔️] La HU debe estar desplegado en GitPages para que el usuario pueda iteractuar.
+- [✔️] El código no tiene errores en ESLINT.
- Links
+### HU 4. Visualización ordenada ascendente-descendente
- * [Manipulación del DOM](https://curriculum.laboratoria.la/es/topics/browser/02-dom/03-1-dom-methods-selection)
- * [Introducción al DOM - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction)
- * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
-
+Yo, COMO USUARIO pokémon, QUIERO visualizar por orden ascendente y descendente el nombre y número PARA explorar otras formas el contenido de la pokédex.
-- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)**
+Criterios de Aceptación:
- Links
+- [✔️] El usuario puede identificar una lista desplegable de nombre "Ordenar".
+- [✔️] El usuario puede visualizar en la lista desplegable el ordenamiento ascendente y descendente por nombre y por número de pokémon.
+- [✔️] La lista desplegable debe permitir seleccionar solo un ordenamiento a la vez.
+- [✔️] Al seleccionar el ordenamiento correspondiente el usuario puede visualizar la organización de la pokédex de la forma que mejor prefiera.
- * [Introducción a eventos - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Events)
- * [EventTarget.addEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener)
- * [EventTarget.removeEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/removeEventListener)
- * [El objeto Event](https://developer.mozilla.org/es/docs/Web/API/Event)
-
+Definición de Terminado:
-- [ ] **Manipulación dinámica del DOM**
+- [✔️] Todos los criterios de aceptación son cumplidos.
+- [✔️] El codigo tiene y pasa los test respectivos
+- [✔️] La HU debe estar desplegado en GitPages para que el usuario pueda interactuar.
+- [✔️] El codigo no tiene errores en Eslint.
- Links
+### HU 5. Visualizar la ficha técnica de cada pokémon.
- * [Introducción al DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction)
- * [Node.appendChild() - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/appendChild)
- * [Document.createElement() - MDN](https://developer.mozilla.org/es/docs/Web/API/Document/createElement)
- * [Document.createTextNode()](https://developer.mozilla.org/es/docs/Web/API/Document/createTextNode)
- * [Element.innerHTML - MDN](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML)
- * [Node.textContent - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/textContent)
-
+Yo, COMO USUARIO pokémon, QUIERO visualizar información más detallada de cada pokémon (peso, altura, resistencia y debilidad) al hacer click sobre cada uno de ellos, PARA tener una mejor estrategia en los combates pokémon.
-### JavaScript
+Criterios de Aceptación:
-- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos**
+- [✔️] El usuario puede ver la información detallada del pokemon al hacer *clic* en el área que ocupa este.
+- [✔️] El usuario podrá ver la información detallada en una caja emergente (*modal o popup*)
+- [✔️] El usuario puede volver a visualizar todos los pokemones al cerrar la caja emergente.
+- [✔️] La visualización debe poder hacerse en cualquier dispositivo.
-- [ ] **Arrays (arreglos)**
+Definición de Terminado:
- Links
+- [✔️] Todos los criterios de aceptación son cumplidos.
+- [✔️] La HU debe estar desplegado en GitHub.
+- [✔️] El usuario puede volver a visualizar todos los pokemones al cerrar la caja emergente.
- * [Arreglos](https://curriculum.laboratoria.la/es/topics/javascript/04-arrays)
- * [Array - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/)
- * [Array.prototype.sort() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
- * [Array.prototype.forEach() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
- * [Array.prototype.map() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
- * [Array.prototype.filter() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
- * [Array.prototype.reduce() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)
-
+- 📍 Este proyecto se realizó en dupla
+- 📍 La interfaz del proyecto esta desplegada usando GitHub Pages.
- * [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/05-objects/01-objects)
-
+## Pruebas Unitarias
-- [ ] **Variables (declaración, asignación, ámbito)**
+Para las pruebas Unitarias `(tests)`, creamos nuestras propias funciones, estudiamos la documentación de jest, así como la configuración necesaria para ejecutar los tests usando el comando `npm test`. Se cumplió la cobertura minima del **70%** de statements, functions y lines.
- Links
+## Interfaz de Usuario del Proyecto
+
- * [Valores, tipos de datos y operadores](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/01-values-variables-and-types)
- * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/02-variables)
-
-
-- [ ] **Uso de linter (ESLINT)**
-
-- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)**
-
-- [ ] **Diferenciar entre expresiones (expressions) y sentencias (statements)**
-
-### Control de Versiones (Git y GitHub)
-
-- [ ] **Git: Instalación y configuración**
-
-- [ ] **Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)**
-
-- [ ] **Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)**
-
-- [ ] **GitHub: Creación de cuenta y repos, configuración de llaves SSH**
-
-- [ ] **GitHub: Despliegue con GitHub Pages**
-
- Links
-
- * [Sitio oficial de GitHub Pages](https://pages.github.com/)
-
-
-- [ ] **GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)**
-
-### Centrado en el usuario
-
-- [ ] **Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro**
-
-### Diseño de producto
-
-- [ ] **Crear prototipos de alta fidelidad que incluyan interacciones**
-
-- [ ] **Seguir los principios básicos de diseño visual**
-
-### Investigación
-
-- [ ] **Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad**
-
- Links
-
- * [Intro a testeos usabilidad](https://coda.io/@bootcamp-laboratoria/contenido-ux/test-de-usabilidad-15)
- * [Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?](https://eugeniacasabona.medium.com/pruebas-con-usuarios-1-qu%C3%A9-cu%C3%A1ndo-y-para-qu%C3%A9-testeamos-7c3a89b4b5e7)
-
-
-## 4. Consideraciones generales
-
-* Este proyecto se debe resolver en duplas.
-* El rango de tiempo estimado para completar el proyecto es de 3 a 4 Sprints.
-* El proyecto será entregado subiendo tu código a GitHub (commit/push) y la
- interfaz será desplegada usando [GitHub Pages](https://pages.github.com/).
-
-## 5. Criterios de aceptación mínimos del proyecto
-
-Los criterios para considerar que has completado este proyecto son:
-
-### Definición del producto
-
-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.
-
-### Historias de usuario
-
-Una vez que entiendas las necesidades de tus usuarios, escribe las [Historias
-de Usuario](https://es.wikipedia.org/wiki/Historias_de_usuario) que representen
-todo lo que el usuario necesita hacer/ver. Las **Historias de Usuario** deben
-ser el resultado de tu proceso de investigación o _research_ de tus usuarios.
-
-Asegúrate de incluir la definición de terminado (_definition of done_) y los
-Criterios de Aceptación para cada una.
-
-En la medida de lo posible, termina una historia de usuario antes de pasar
-a la siguiente (Cumple con Definición de Terminado + Criterios de Aceptación).
-
-### Diseño de la Interfaz de Usuario
-
-#### Prototipo de baja fidelidad
-
-Durante tu trabajo deberás haber hecho e iterado bocetos (_sketches_) de tu
-solución usando papel y lápiz. Te recomendamos tomar fotos de todas las
-iteraciones que hagas, que las subas a tu repositorio y las menciones en tu
-`README.md`.
-
-#### 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.
-
-El diseño debe representar el _ideal_ de tu solución. Digamos que es lo que
-desearías implementar si tuvieras tiempo ilimitado para trabajar. Además, tu
-diseño debe seguir los fundamentos de _visual design_.
-
-#### Testeos de usabilidad
-
-Durante el reto deberás hacer _tests_ de usabilidad con distintos usuarios, y
-en base a los resultados, 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.
-**No** es necesario que construyas la interfaz exactamente como la diseñaste.
-Tu tiempo de hacking es escaso, así 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 interactuar para obtener la infomación que necesita.
-3. Ser _responsive_, es decir, debe visualizarse sin problemas desde distintos
- tamaños de pantallas: móviles, tablets y desktops.
-4. Que la interfaz siga los fundamentos de _visual design_.
-
-### Pruebas unitarias
-
-El _boilerplate_ de este proyecto no incluye Pruebas Unitarias (_tests_), así es
-que tendrás que escribirlas tú para las funciones encargadas de _procesar_,
-_filtrar_ y _ordenar_ la data, así como _calcular_ estadísticas.
-
-Tus _pruebas unitarias_ deben dar una cobertura del 70% de _statements_
-(_sentencias_), _functions_ (_funciones_), _lines_ (_líneas_), y _branches_
-(_ramas_) del archivo `src/data.js` que contenga tus funciones y está detallado
-en la sección de [Consideraciones técnicas](#srcdatajs).
-
-## 6. Hacker edition
-
-Las secciones llamadas _Hacker Edition_ son **opcionales**. Si **terminaste**
-con todo lo anterior y te queda tiempo, intenta completarlas. Así podrás
-profundizar y/o ejercitar más sobre los objetivos de aprendizaje del proyecto.
-
-Features/características extra sugeridas:
-
-* 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
- 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/).
-* 100% Coverage
-
-## 7. 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
-[_Parte opcional_](#6-hacker-edition) más arriba.
-
-El _boilerplate_ contiene una estructura de archivos como punto de partida así
-como toda la configuración de dependencias:
-
-```text
-.
-├── EXTRA.md
-├── README.md
-├── package.json
-├── src
-| ├── data (según con qué data trabajes)
-| | ├── lol
-| | | ├── lol.js
-| | | ├── lol.json
-| | | └── README.md
-| | ├── pokemon
-| | | ├── pokemon.js
-| | | ├── pokemon.json
-| | | └── README.md
-| | └── rickandmorty
-| | | ├── rickandmorty.js
-| | | ├── rickandmorty.json
-| | | └── README.md
-| | └── athletes
-| | | ├── athletes.js
-| | | ├── athletes.json
-| | | └── README.md
-| | └── ghibli
-| | | ├── ghibli.js
-| | | ├── ghibli.json
-| | | └── README.md
-| ├── data.js
-| ├── index.html
-| ├── main.js
-| └── style.css
-└── test
- └── data.spec.js
-
-directory: 7 file: 20
-```
-
-### `src/index.html`
-
-Como en el proyecto anterior, existe un archivo `index.html`. Como ya sabes,
-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.
-
-### `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.
-
-En este archivo encontrarás una serie de _imports_ _comentados_. Para _cargar_
-las diferentes fuentes de datos tendrás que _descomentar_ la línea
-correspondiente.
-
-Por ejemplo, si "descomentamos" la siguiente línea:
-
-```js
-// import data from './data/lol/lol.js';
-```
-
-La línea quedaría así:
-
-```js
-import data from './data/lol/lol.js';
-```
-
-Y ahora tendríamos la variable `data` disponible en el script `src/main.js`.
-
-### `src/data.js`
-
-El corazón de este proyecto es la manipulación de datos a través de arreglos
-y objetos.
-
-Te recomendamos que este archivo contenga toda la funcionalidad que corresponda
-a obtener, procesar y manipular datos (tus funciones). Por ejemplo:
-
-* `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.
-
-Estos nombres de funciones y de parámetros son solamente referenciales, lo que
-decidas depende de tu propia implementació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, ...).
-
-### `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 `
+
+
+