diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/FETCH_HEAD b/FETCH_HEAD new file mode 100644 index 00000000..e69de29b diff --git a/README.md b/README.md index ba300bc4..c662133f 100644 --- a/README.md +++ b/README.md @@ -1,623 +1,150 @@ -# Data Lovers +# Magical Hogwarts Adventures ## Índice -* [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) +* [i. Acerca de "Magical Hogwarts Adventures"](#1-acerca-de-Magical_Hogwarts-Adventures) +* [ii. Historias de Usuario](#2-historias-de-usuario) +* [iii. Prototipos](#3-prototipos) +* [iv. Consideraciones generales](#4-consideraciones-generales) -*** - -## 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. - -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 el usuario -al lado derecho. - -![json-interfaz](https://lh4.googleusercontent.com/Tn-RPXS26pVvOTdUzRT1KVaJ-_QbFs9SpcGLxSPE43fgbHaXtFgMUInuDt7kV41DkT1j8Tt29V0LxQW7SMtC6digOIhfTXSBKdwI08wUwhD3RAqlwy0hjfmhZ2BFe91mtmCSEqysfgk) - -## 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) - -* [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) - -* [Harry Potter](src/data/harrypotter/harry.json). - En este set encontrarás una lista de los personajes,libros pociones - y hechizos de toda la saga de - [Harry Potter](https://harrypotter.fandom.com). - - [Investigación con seguidoras de Harry Potter](src/data/harrypotter/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** - -
Links

- - * [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) -

- -### CSS -- [ ] **Uso de selectores de CSS** - -
Links

- - * [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** - -
Links

- - * [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/) -

- -- [ ] **Uso de flexbox en CSS** - -
Links

- - * [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) -

- -### Web APIs - -- [ ] **Uso de selectores del DOM** - -
Links

- - * [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) -

- -- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)** - -
Links

- - * [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) -

- -- [ ] **Manipulación dinámica del DOM** - -
Links

- - * [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) -

- -### JavaScript - -- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos** - -- [ ] **Arrays (arreglos)** - -
Links

- - * [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) -

- -- [ ] **Objetos (key, value)** - -
Links

+*** - * [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/05-objects/01-objects) -

+## i. Acerca de Magical Hogwarts Adventures -- [ ] **Variables (declaración, asignación, ámbito)** +El proyecto _"Magical Hogwarts Adventures"_ surge con la finalidad de brindar a las usuarias –fans de Harry Potter– un espacio virtual e interactivo en donde podrán explorar de forma eficiente y organizada, las diferentes escuelas que conforman el Colegio de Magia y Hechicería Howgarts y podrán conocer a todos los personajes que aparecen en la saga de libros de Harry Potter. -
Links

- * [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) -

+## ii. Historias de Usuario -- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)** +Las historias de usuario las realizamos en función de los hallazgos de la investigación con seguidoras de Harry Potter que se nos brindó para este proyecto. -
Links

+Nuestras Historias de Usuario fueron 3: - * [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) -

+1. **HU Casas.** Como seguidora de Harry Potter quiero ver las diferentes escuelas que conforman el Colegio Hogwarts de Magia y Hechicería con sus respectivos escudos para conocerlos a detalle. -- [ ] **Uso de bucles/ciclos (while, for, for..of)** +**Criterios de aceptación:** -
Links

+ *La página es responsive (desktop & mobile). - * [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) -

+ *La página muestra con imágenes/logos las 4 escuelas del Colegio Hogwarts de Magia y Hechicería. -- [ ] **Funciones (params, args, return)** + *Fiel a prototipo. -
Links

+ *Los logos/escudos están dentro de un contenedor main y funcionan como links. - * [Funciones (control de flujo)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/03-functions) - * [Funciones clásicas](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/01-classic) - * [Arrow Functions](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/02-arrow) - * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions) -

-- [ ] **Pruebas unitarias (unit tests)** +**Definición de terminado:** -
Links

+ *La página se puede abrir con las mismas funcionalidades en celulares, tablets y pc. - * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started) -

+ *La página muestra dentro de un contenedor main los escudos de las 4 escuelas. -- [ ] **Módulos de ECMAScript (ES Modules)** + *La interfaz de la página es igual (con pequeñas modificaciones) al prototipo de alta fidelidad. -
Links

+ *Pasa los tests necesarios. - * [import - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import) - * [export - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export) -

-- [ ] **Uso de linter (ESLINT)** +2. **HU Personajes:** Como seguidora de Harry Potter, quiero visualizar a todos los personajes de las diferentes casas del Colegio Hogwarts de Magia y Hechicería para conocerlos. -- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)** +**Criterios de aceptación:** -- [ ] **Diferenciar entre expresiones (expressions) y sentencias (statements)** + *La página es responsive (desktop & mobile). -### Control de Versiones (Git y GitHub) + *La página muestra un botón que permite a la usuaria acceder a la base de datos organizada en contenedores con todos los personajes de la saga, con nombre completo y especie. -- [ ] **Git: Instalación y configuración** + *Fiel a prototipo. -- [ ] **Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)** +**Definición de terminado:** -- [ ] **Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)** + *La página se puede abrir con las mismas funcionalidades en celulares, tablets y pc. -- [ ] **GitHub: Creación de cuenta y repos, configuración de llaves SSH** + *La página muestra un botón que dirige a una sección con todos los personajes contenidos, cada uno, en una tarjeta. -- [ ] **GitHub: Despliegue con GitHub Pages** + *Pasa los tests necesarios. -
Links

+ *Visualmente es fiel a prototipo. - * [Sitio oficial de GitHub Pages](https://pages.github.com/) -

+3. **HU Personajes filtrados:** Como seguidora de Harry Potter, quiero visualizar a los personajes casas del Colegio Hogwarts de Magia y Hechicería en función de la escuela a la que pertenecen para conocer a qué escuela asiste cada uno de ellos. -- [ ] **GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)** +**Criterios de aceptación:** -### user-centricity + *La página es responsive (desktop & mobile). -- [ ] **Diseñar un producto o servicio poniendo a la usuaria en el centro** + *La página le permite a la usuaria acceder a la base de datos a través del escudo de cada escuela. Esta muestra a los personajes de cada una de las escuelas con nombre completo, escuela a la que pertenece y especie. -### product-design + *Fiel a prototipo. -- [ ] **Crear prototipos de alta fidelidad que incluyan interacciones** +**Definición de terminado:** -- [ ] **Seguir los principios básicos de diseño visual** + *La página se puede abrir con las mismas funcionalidades en celulares, tablets y pc. -### research + **La página muestra con imágenes/logos las 4 escuelas del Colegio Hogwarts de Magia y Hechicería en un contenedor y al momento de dar click a cada escudo dirige a los personajes que pertenecen a esa escuela. -- [ ] **Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad** + *Pasa los tests necesarios. -
Links

+ *Visualmente es fiel a prototipo. - * [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 +4. **HU Personajes ordenados alfabeticamente:** Como seguidora de Harry Potter, quiero visualizar a todos los personajes de las diferentes casas del Colegio Hogwarts de Magia y Hechicería ordenados alfabeticamente en orden ascendente (A-Z) para que la data sea más amigable de explorar. -* 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: Toma como referencia 4 semanas. +**Criterios de aceptación:** -## 5. Criterios de aceptación mínimos del proyecto + *La página es responsive (desktop & mobile). -Los criterios para considerar que has completado este proyecto son: + *La página le permite a la usuaria ordenar de forma alfabetica (A-Z) los nombres de los personajes. -### Definición del producto + *Fiel a prototipo. -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. +**Definición de terminado:** -### Historias de usuario + *La página se puede abrir con las mismas funcionalidades en celulares, tablets y pc. -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. + **La página muestra un ícono que que al darle click ordena automáticamente a todos los personajes alfabeticamente (A-Z). -Asegúrate de incluir la definición de terminado (_definition of done_) y los -Criterios de Aceptación para cada una. + *Pasa los tests necesarios. -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). + *Visualmente es fiel a prototipo. -### Diseño de la Interfaz de Usuario -#### Prototipo de baja fidelidad +5. **HU Porcentaje de mujeres y hombres:** Como seguidora de Harry Potter, quiero visualizar el porcentaje de mujeres y de hombres del total de los personajes de la saga de HP. -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`. +**Criterios de aceptación:** -#### Prototipo de alta fidelidad + *La página es responsive (desktop & mobile). -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. + *La página le permite a la usuaria obtener el porcentaje de mujeres y de hombres del total de personajes de la saga de Harry Potter. -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_. + *Fiel a prototipo. -#### Testeos de usabilidad +**Definición de terminado:** -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. + *La página se puede abrir con las mismas funcionalidades en celulares, tablets y pc. -### Implementación de la Interfaz de Usuario (HTML/CSS/JS) + **La página muestra un botón que que al darle click muestra el porcentaje de mujeres y de hombres de los personajes de la saga de Harry Potter. -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 + *Pasa los tests necesarios. -Como mínimo, tu implementación debe: + *Visualmente es fiel a prototipo. -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_. +## iii. Prototipos -### Pruebas unitarias +* Prototipo de baja fidelidad -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. +![img](./src/images/Prototipos/HU%20Casas%20.png) +![img](./src/images/Prototipos/HU%20Personajes.png) +![img](./src/images/Prototipos/HU%20Personajes%20Filtrados.png) +![img](./src/images/Prototipos/HU%20Orden%20A-Z%20y%20HU%20Porcentajes.png) -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). +* Prototipo de alta fidelidad -## 6. Hacker edition +![img](./src/images/tinified/Prototipo%20alta%20fidelidad%20mobile.png) +![img](./src/images/tinified/Prototipo%20alta%20fidelidad%20desktop.png) -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. +## iv. Proyectos desplegados -Features/características extra sugeridas: +https://laugardc.github.io/DEV002-data-lovers/ -* 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 ` - + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 71c59f2d..a596c127 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,159 @@ -import { example } from './data.js'; -// import data from './data/lol/lol.js'; -import data from './data/pokemon/pokemon.js'; -// import data from './data/rickandmorty/rickandmorty.js'; - -console.log(example, data); +import { filtro, obtenerDatos, orderAZ, orderZA, calcularPorcentaje} from './data.js'; + +// Guarda el universo (todos los personajes) +let datos = []; +// Guarda datos por casa en caso de estar filtrado (esta variable es la que se va a mostrar en pantalla) +let datosFiltrados = []; +// Guarda el status del ordenamiento (estados posibles '', 'asc', 'des') +let order = ''; + +let sectionOne = document.getElementById("indexOne") +const iconoOrderAZ = document.getElementById('orderAZ'); +const spanPorcentajeMujeres = document.getElementById('spanPorcentajeMujeres'); +const spanPorcentajeHombres = document.getElementById('spanPorcentajeHombres'); +const divPorcentaje = document.getElementById('percentageBox') +const btnSly = document.getElementById('slytherin'); +const btnRav = document.getElementById('ravenclaw'); +const btnHuf = document.getElementById('hufflepuff'); +const btnGrif = document.getElementById('gryfindor'); +const refreshPage = document.getElementById('btn-refresh'); +const cargarAPIhp = document.querySelector('#cargarAPI'); + +// Esta funcion se ejecuta al iniciar la pagina +window.onload = () => { + obtenerDatos().then(resultado => { + datos = resultado; + }) +}; + +cargarAPIhp.addEventListener('click', () => { + datosFiltrados = datos; // hace que los datos a mostrar sean igual que el universo + mostrarHTML(); + iconoOrderAZ.style.display = "block";//cuando das click aparece el iconoAZ + sectionOne.style.display = "none";// oculta la seccion 1(titulo y subtitulo) al dar click + +}); + +refreshPage.addEventListener("click", () => { + window.location.reload(true); +}) + +// Al dar click en ordenamiento, va a cambiar el estado. +// En caso de no estar ordenado (''), lo convertirá en estado ascendente ('asc') +// En caso de estar ordenado ascendente ('asc'), lo convertirá en estado descendente ('des') +// En caso de estar ordenado descendente ('des'), lo convertirá en estado ascendente ('asc') +iconoOrderAZ.addEventListener("click", () => { + switch (order) { + case '': + order = 'asc'; + break; + case 'asc': + order = 'des'; + break; + case 'des': + order = 'asc'; + } + mostrarHTML(); +}) + +btnGrif.addEventListener('click', () => { + datosFiltrados = filtro(datos, 'Gryffindor'); // hace que los datos a mostrar sean solo los de la casa + mostrarHTML(); + sectionOne.style.display = "none"; + iconoOrderAZ.style.display = "block"; +}); + +btnHuf.addEventListener('click', () => { + datosFiltrados = filtro(datos, 'Hufflepuff'); // hace que los datos a mostrar sean solo los de la casa + mostrarHTML(); + sectionOne.style.display = "none"; + iconoOrderAZ.style.display = "block"; +}); + +btnRav.addEventListener('click', () => { + datosFiltrados = filtro(datos, 'Ravenclaw'); // hace que los datos a mostrar sean solo los de la casa + mostrarHTML(); + sectionOne.style.display = "none"; + iconoOrderAZ.style.display = "block"; +}); + +btnSly.addEventListener('click', () => { + datosFiltrados = filtro(datos, 'Slytherin'); // hace que los datos a mostrar sean solo los de la casa + mostrarHTML(); + sectionOne.style.display = "none"; + iconoOrderAZ.style.display = "block"; +}); + +function mostrarHTML() { + divPorcentaje.style.display = "block"; + + const { porcentajeMujeres, porcentajeHombres } = calcularPorcentaje(datosFiltrados); + console.log(calcularPorcentaje(datosFiltrados)); + spanPorcentajeHombres.innerHTML = porcentajeHombres + "%"; + spanPorcentajeMujeres.innerHTML = porcentajeMujeres + "%"; + + const contenido = document.getElementById('cards'); + contenido.innerHTML = '';//para que quede vacio antes de mostrar la funcion a realizar, si no se iba hasta abajo + + if (order === 'asc') { + datosFiltrados = orderAZ(datosFiltrados); + } + else if (order === 'des') { + datosFiltrados = orderZA(datosFiltrados); + } + + datosFiltrados.forEach((personaje) => { + let divCard = document.createElement("div"); + let divContent = document.createElement("div"); + let hName = document.createElement("h2"); + let hHouse = document.createElement("h1"); + let hSpecie = document.createElement("h2"); + let hatIcon = document.createElement("img"); + + divCard.className = "card"; + divContent.className = "infoCard"; + hName.innerHTML = personaje.name; + hHouse.innerHTML = personaje.house; + hSpecie.innerHTML = personaje.species; + hatIcon.src = "./images/tinified/castleHoghwarts.png"; + hatIcon.className = "hat-icon"; + + switch (personaje.house) { + case "Gryffindor": + hHouse.style.color = "#740001"; + break; + case "Gryffindor (possibly)": + hHouse.style.color = "#740001"; + break; + case "Slytherin": + hHouse.style.color = "#2A623D"; + break; + case "Slytherin (possibly)": + hHouse.style.color = "#2A623D"; + break; + case "Hufflepuff": + hHouse.style.color = "#EEBE44"; + break; + case "Hufflepuff (likely)": + hHouse.style.color = "#EEBE44"; + break; + case "Ravenclaw": + hHouse.style.color = "#5E7DD4" + break; + case "Ravenclaw (possibly)": + hHouse.style.color = "#5E7DD4" + break; + + } + + + contenido.appendChild(divCard); + divCard.appendChild(divContent); + divContent.appendChild(hatIcon); + divContent.appendChild(hName); + divContent.appendChild(hHouse); + divContent.appendChild(hSpecie); + + +})} + diff --git a/src/style.css b/src/style.css index e69de29b..e2d22072 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,165 @@ +@import url('https://fonts.cdnfonts.com/css/harry-potter'); + +*{ + box-sizing: border-box; + padding: 0%; + margin: 0%; +} + +html { + font-size: 62.5%; +} + +body{ + background-color: #6a2727; + text-align: center; + background-repeat: no-repeat; + background-size: cover; + +} + + +h1 { + font-size: 2em; + font-weight: bold; +} +header { + height: 1rem; +} + +.home-icon { + width: 2.7rem; + height: 2.7rem; + margin: .8rem; +} + +.home-icon-div { + width: 4rem; + height: 4rem; + text-align: right; +} + +nav { + position: fixed; + height: 4rem; + top: 0; + left: 0; + right: 0; + z-index: 10; + background-color: #D4D9D8; + } +nav img { + position: absolute; + top: 0; + left: 0; + padding: 10px; + } +.title { + width: 41rem; + height: 13.5rem; + padding: 2rem; + text-align: center; + margin-top: 3rem; +} +h4 { + color: #D4D9D8; + font-family: 'Indie Flower', sans-serif; + font-size: 2rem; + padding: 1.2rem; +} + .logos-escuelas { + width: 36%; + margin: 1rem; + position: relative; + cursor: pointer; +} + +.subtitle { + width: 32rem; + height: 8.5rem; + padding: 2rem; +} + +.container { + width: 80%; + margin: 9% auto; + display: inline-block; +} + +button[type=button] { + font-family: 'Indie Flower'; + color: #22184E; + font-size: 14px; + cursor:pointer; + width: 48%; + margin-bottom: 2rem; + border-width: 2px; + border-color: rgb(212, 132, 82); + border-radius: 1.3rem; + margin: 3rem 2% 1rem + } + + button[type=button]:hover { + background-color: rgb(33, 114, 124); + color: #ffffff; + } + +#cargarAPI:hover { + background-color: #133d4857; + color: #fafafa; + +} + +.orderAZ { + width: 3rem; + cursor: pointer; + display: none; + margin: 2% 0 1% 50%; +} + +#percentageBox { + margin: 1% 42% 1% 42%; + padding: .4%; + width: auto; + font-size: 1.5rem; + display: none; + color: #D4D9D8; + font-family: 'Raleway', sans-serif; + box-shadow: 0 2px 15px 0 rgba(232, 175, 43, 0.915); + border-radius: 15px; + +} +.cardsContainer { + display: grid; + grid-template-columns: 170px 170px; + padding: 1rem; + place-content: center; + color: black; + font-size: .8rem; + margin: 5px; +} + +.card { + background-color: #fffffe; + margin: 10px; + box-shadow: 0 4px 8px 0 #b3891fec; + transition: 0.3s; + border-radius: 25px; + display:inline-table; + font-family: 'Indie Flower'; + font-size: .9rem; + + } + +.card:hover { + box-shadow: 0 8px 16px 0 rgba(215, 168, 30, 0.915); +} + +.infoCard { + padding: 2px; +} +.hat-icon { + width: 6rem; + height: 7rem; +} + diff --git a/test/data.spec.js b/test/data.spec.js index 09b1f23f..35a87f0a 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,23 +1,112 @@ -import { example, anotherExample } from '../src/data.js'; +import { obtenerDatos, filtro, orderAZ, orderZA, calcularPorcentaje } from '../src/data.js'; +describe('obtenerDatos', () => { + it('es una función', () => { + expect(typeof obtenerDatos).toBe('function'); + }); -describe('example', () => { - it('is a function', () => { - expect(typeof example).toBe('function'); + +describe('filtro', () => { + it('es una función', () => { + expect(typeof filtro).toBe('function'); }); - it('returns `example`', () => { - expect(example()).toBe('example'); + it('filtra los elementos del array según la casa especificada', () => { + const arr = [ + { name: 'Hermione', house: 'Gryffindor' }, + { name: 'Abraxas', house: 'Slytherin' }, + { name: 'Cedric', house: 'Hufflepuff' }, + { name: 'Fawcett', house: 'Ravenclaw' }, + ]; + + let result = filtro(arr, 'Gryffindor'); + expect(result).toEqual([{ name: 'Hermione', house: 'Gryffindor' }]); + + result = filtro(arr, 'Slytherin'); + expect(result).toEqual([{ name: 'Abraxas', house: 'Slytherin' }]); + + result = filtro(arr, 'Hufflepuff'); + expect(result).toEqual([{ name: 'Cedric', house: 'Hufflepuff' }]); + + result = filtro(arr, 'Ravenclaw'); + expect(result).toEqual([{name: 'Fawcett', house: 'Ravenclaw'}]); }); }); -describe('anotherExample', () => { - it('is a function', () => { - expect(typeof anotherExample).toBe('function'); +describe('orderAZ', () => { + it('es una función', () => { + expect(typeof orderAZ).toBe('function'); }); - it('returns `anotherExample`', () => { - expect(anotherExample()).toBe('OMG'); + it('ordena el array de manera ascendente según el nombre de cada elemento', () => { + const arr = [ + { name: "Cadwallader", gender: "Male", house: "Hufflepuff" }, + { name: "Euan Abercrombie", gender: "Male", house: "Gryffindor" }, + { name: "Hetty Bayliss", gender: "Female", house: "null" }, + { name: "Katie Bell", gender: "Female", house: "Gryffindor}" }, + { name: "Zoo director", gender: "Male", house: "null"}, + { name: "Mandy Brocklehurst", gender: "Female", house: "Ravenclaw}" }, + ]; + + let result = orderAZ(arr); + expect(result).toEqual([ + { name: "Cadwallader", gender: "Male", house: "Hufflepuff" }, + { name: "Euan Abercrombie", gender: "Male", house: "Gryffindor" }, + { name: "Hetty Bayliss", gender: "Female", house: "null" }, + { name: "Katie Bell", gender: "Female", house: "Gryffindor}" }, + { name: "Mandy Brocklehurst", gender: "Female", house: "Ravenclaw}" }, + { name: "Zoo director", gender: "Male", house: "null"} + + ]); }); }); + +describe('orderZA', () => { + it('es una función', () => { + expect(typeof orderZA).toBe('function'); + }); + + it('ordena el array de manera ascendente según el nombre de cada elemento', () => { + const arr = [ + { name: "Cadwallader", gender: "Male", house: "Hufflepuff" }, + { name: "Euan Abercrombie", gender: "Male", house: "Gryffindor" }, + { name: "Hetty Bayliss", gender: "Female", house: "null" }, + { name: "Katie Bell", gender: "Female", house: "Gryffindor}" }, + { name: "Katie Bell", gender: "Female", house: "Gryffindor}" }, + { name: "Zoo director", gender: "Male", house: "null"}, + { name: "Mandy Brocklehurst", gender: "Female", house: "Ravenclaw}" }, + ]; + + let result = orderZA(arr); + expect(result).toEqual([ + { name: "Zoo director", gender: "Male", house: "null"}, + { name: "Mandy Brocklehurst", gender: "Female", house: "Ravenclaw}" }, + { name: "Katie Bell", gender: "Female", house: "Gryffindor}" }, + { name: "Katie Bell", gender: "Female", house: "Gryffindor}" }, + { name: "Hetty Bayliss", gender: "Female", house: "null" }, + { name: "Euan Abercrombie", gender: "Male", house: "Gryffindor" }, + { name: "Cadwallader", gender: "Male", house: "Hufflepuff" } + ]); + }); +}); + +describe('calcularPorcentaje', () => { + it('es una función', () => { + expect(typeof calcularPorcentaje).toBe('function'); + }) + + it('Calcular el porcentaje de mujeres y hombres', () => { + const arr = [ + { name: "Cadwallader", gender: "Male", house: "Hufflepuff" }, + { name: "Euan Abercrombie", gender: "Male", house: "Gryffindor" }, + { name: "Hetty Bayliss", gender: "Female", house: "null" }, + { name: "Katie Bell", gender: "Female", house: "Gryffindor}" }, + { name: "Zoo director", gender: "Male", house: "null"}, + { name: "Mandy Brocklehurst", gender: "Female", house: "Ravenclaw}" }, + ]; + + expect (calcularPorcentaje(arr)).toEqual({porcentajeMujeres: '50.0', porcentajeHombres: '50.0'}); + }) + +})});