diff --git a/.eslintrc b/.eslintrc
index 3d062a23..72fc4b42 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -13,6 +13,7 @@
"no-var": "error",
"prefer-const": "error",
"eqeqeq": "error",
- "indent": ["error", 2]
+ "indent": ["error", 2],
+ "no-undef":"off"
}
}
diff --git a/README.md b/README.md
index f9975c76..404cf813 100644
--- a/README.md
+++ b/README.md
@@ -4,612 +4,217 @@
* [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)
+* [3. Prototipos de Baja fidelidad](#3-prototipos-de-baja-fidelidad)
+* [4. Prototipos de Alta fidelidad](#4-prototipos-de-alta-fidelidad)
+* [5. Requerimientos](#5-requerimientos)
+* [6. Pruebas Unitarias](#6-pruebas-unitarias)
***
## 1. Preámbulo
-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.
+El deporte desempeña un papel fundamental en la sociedad moderna, representando una manifestación cultural en donde se involucran diversos factores. Sus repercusiones, no han dejado de crecer en los últimos años, acreditando con ello su importancia (Joo, 2012; Lombardo, 2012; Jarvie, 2013).
-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_.
-
-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.
-
-
+Asimismo, el estudio del deporte y especialmente del rendimiento físico humano ha permitido acumular conocimientos cada vez más fundamentados científicamente, y esto ha hecho necesario sistematizarlos y organizarlos (Harre, Harre & Barsch, 2012; Hoffman, 2014; Bompa & Buzzichelli, 2015; Calero, 2015). Es por ello, que los entrenadores de alto nivel necesitan contar con una base de datos para validar el rendimiento y los record, como obtención de medallas sean la guia principal para preparar a sus atletas independientmente de la disciplina a la que pertencezcan. Motivo por el cual, la realización de este proyecto de tener un registro de las medallas por disciplina y deportista.
## 2. Resumen del proyecto
-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.
-
-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).
-
-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.
-
-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.
-
-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)
-
-* [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)
+En este proyecto se construyo una página web, en base da reportes e investigación deportiva de las Olimpiadas de Río de Janeiro. La orientación de esta página es para entrenadores deportivos. Como entregable final esta página web permita **visualizar la data, filtrarla, ordenarla y hacer algún cálculo agregado**. Con cálculo agregado nos referimos a distintos cálculos que se puede hacer con la data para mostrar información aún más relevante para los usuarios (el valor máximo y/o mínimo, etc).
* [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)
-
-* [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)
-
-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.
-
-## 3. Objetivos de aprendizaje
-
-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.
-
-### HTML
-
-- [ ] **Uso de HTML semántico**
+ Este set nos proporciona la lista de los atletas que ganaron medallas en las olímpiadas de Río de Janeiro.
- Links
+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 final necesita.
- * [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)
-
+## 3. Prototipos de Baja fidelidad
-### CSS
+A continuación, serán mostradas los prototipos de Baja fidelidad bajo de las pantallas principales de acuerdo el siguiente orden: Index, Búsqueda, Contacto, Testimonio y la versión responsiva.
-- [ ] **Uso de selectores de CSS**
+### Index
- Links
+* Prototipo del Index
- * [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)
-
+
-- [ ] **Modelo de caja (box model): borde, margen, padding**
+* Descripción:La pantalla de Index realizada en B.F con la sección de noticias. Además, cumple con el footer y header.
- Links
+### Búsqueda
- * [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/)
-
+* Prototipo de la Búsqueda
-- [ ] **Uso de flexbox en CSS**
+
- Links
+* Descripción: La pantalla de búsqueda realizada en B.F con los tipos de busqueda nombre, peso, altura y medalla. Además, cumple con el footer y header.
- * [A Complete Guide to Flexbox - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- * [Flexbox Froggy](https://flexboxfroggy.com/#es)
- * [Flexbox - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
-
+### Estadísticas
-### Web APIs
+* Prototipo de las Estadísticas
-- [ ] **Uso de selectores del DOM**
+
- Links
+* Descripción: La pantalla de Estadisticas realizada en B.F indicando el lugar donde irian los gráficos. Además, cumple con el footer y header.
- * [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)
-
+### Testimonios
-- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)**
+* Prototipo de los Testimonios
- Links
+* Descripción: La pantalla de Testimonios realizada en B.F indicando el lugar donde irian los testimonios. Además, cumple con el footer y header.
-- [ ] **Manipulación dinámica del DOM**
+### Contacto
- Links
+
-### JavaScript
+* Descripción: La pantalla de Contacto realizada en B.F indicando el lugar donde iria el formulario de contacto. Además, cumple con el footer y header.
-- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos**
+### Versión responsiva
-- [ ] **Arrays (arreglos)**
+
- Links
+* Descripción: La pantallas de Index, Búsqueda, Estadísticas, Testimonios y Contacto realizada en B.F bajo la versión responsiva.
- * [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)
-
+## 4. Prototipos de Alta fidelidad
-- [ ] **Objetos (key, value)**
+A continuación, serán mostradas los prototipos de Alta fidelidad bajo de las pantallas principales de acuerdo el siguiente orden: Index, Búsqueda, Contacto, Testimonio y la versión responsiva.
- Links
+### Index
- * [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/05-objects/01-objects)
-
+* Prototipo del Index
-- [ ] **Variables (declaración, asignación, ámbito)**
+
- Links
+* Descripción: La pantalla de Index realizada en A.F con la sección de noticias. Además, cumple con el footer y header con el color a aplicar en el modelo final.
- * [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)
-
+### Búsqueda
-- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)**
+* Prototipo de la Búsqueda
- Links
+
- * [Estructuras condicionales y repetitivas](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/01-conditionals-and-loops)
- * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals)
-
+* Descripción: La pantalla de Búsqueda realizada en A.F con los filtros de genero, evento, medalla, deporte y país. Además, cumple con el footer y header con el color a aplicar en el modelo final.
-- [ ] **Uso de bucles/ciclos (while, for, for..of)**
+### Estadísticas
- Links
+* Prototipo de las Estadísticas
- * [Bucles (Loops)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/02-loops)
- * [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration)
-
+
-- [ ] **Funciones (params, args, return)**
+* Descripción: La pantalla de Estadísticas realizada en A.F con los gráficos. Además, cumple con el footer y header con el color a aplicar en el modelo final.
- Links
+* Prototipo de los Testimonios
-- [ ] **Pruebas unitarias (unit tests)**
+
- Links
+* Descripción: La pantalla de Testimonios realizada en A.F con la foto, el nombre y testimonio. Además, cumple con el footer y header con el color a aplicar en el modelo final.
- * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started)
-
+### Contacto
-- [ ] **Módulos de ECMAScript (ES Modules)**
+* Prototipo de Contacto
- Links
+* Descripción: La pantalla de Contacto realizada en A.F con el nombre, apellido, correo y mensaje a enviar. Además, cumple con el footer y header con el color a aplicar en el modelo final.
-- [ ] **Uso de linter (ESLINT)**
+## 5. Requerimientos
-- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)**
+Los requerimientos son las caracteristicas propias que el producto digital debe de tener. En este caso, existen dos tipos: Los funcionales y no funcionales. En relación al primero son las acciones especificas de funcionalidad que debe tener y los no funcionales son las caracteristicas especificas que debe de tener, las cuales que se dividen en tres categorías: rendimiento, seguridad y calidad.
-- [ ] **Diferenciar entre expresiones (expressions) y sentencias (statements)**
+### Requerimientos funcionales
+* El aplicativo Web debe ser responsivo;
+* El aplicativo Web tiene todos los enlaces conectados a las páginas correspondientes.
-### Control de Versiones (Git y GitHub)
+### Requerimientos no funcionales
+* El aplicativo Web debe ser fácil de usar;
+* Las interfaces debe ser intuitivas;
+* El aplicativo debe tener respuesta inmediata ante el uso;
+* El aplicativo tiene el logo y el icono en el header con la frase "Comite Olimpico";
+* El aplicativo mantiene la paleta de color uniforme;
+* El aplicativo mantiene la tipografía.
-- [ ] **Git: Instalación y configuración**
+### H.U Index
-- [ ] **Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)**
+* Pantalla final de index:
-- [ ] **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**
+* Historia de Usuario: 001
+ *Como: Usuario
+ *Quiero: Poder ver mis noticias actualizadas
+ *Para poder: Estar al día con las noticias más relevantes de los deportistas de alto nivel
-- [ ] **GitHub: Despliegue con GitHub Pages**
+### H.U Búsqueda
- Links
+* Pantalla final de la Búsqueda:
- * [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
+* Historia de Usuario:
-- [ ] **Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro**
+ *Como: Usuario
+ *Quiero: Realizar mis búsquedas de acuerdo a los filtros por genero(M,F o todos), por nombre de deportista, medalla(Oro,Bronce y/o Plata), deporte, equipo (país), evento o por rango de edad expresado en años. Este proceso de filtrado puede realizarse por un tipo de filtro o a mi elección
+ *Para poder: Visualizar a los deportistas de alto nivel y conocer sus caracteristicas físicas a detalle como peso o talla.
-### Diseño de producto
+### H.U Estadística
-- [ ] **Crear prototipos de alta fidelidad que incluyan interacciones**
+* Pantalla final de Estadística
-- [ ] **Seguir los principios básicos de diseño visual**
+
+
+
-### Investigación
-- [ ] **Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad**
+* Historia de Usuario:
+ *Como: Usuario
+ *Quiero: Visualizar la información por de la siguiente forma:
+ -Gráfico por medallas obtenidas;
+ -Gráfico por genero;
+ -Gráfico por rango de edad;
+ -Gráfico por cantidad de atletas por país;
+ -Gráfico por cantidad de atletas por deporte;
+ -Gráfico de ranking de paises por medallas;
+ *Para poder: Visualizar a los deportistas de alto nivel con sus datos especificos de forma interactiva.
- Links
+### H.U Testimonio
- * [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)
-
+* Pantalla final de Testimonio:
-## 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/).
+* Historia de Usuario:
+ *Como: Usuario
+ *Quiero: Visualizar los testimonios de los entrenadores que interactuaron con la página
+ *Para poder: Comprobar la utilidad de la página
-## 5. Criterios de aceptación mínimos del proyecto
+### H.U Contacto
-Los criterios para considerar que has completado este proyecto son:
+* Pantalla final de Contacto:
-### 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
+* Historia de Usuario:
+ *Como: Usuario
+ *Quiero: Enviar un mensaje para entrar en contacto
+ *Para poder: Entrar en contacto con el administrador
-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
+## 6. 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.
+Las pruebas unitarias se realizaron con éxito.
-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 `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+