diff --git a/Images_readme/Diagrama1.png b/Images_readme/Diagrama1.png new file mode 100644 index 0000000..2e0286c Binary files /dev/null and b/Images_readme/Diagrama1.png differ diff --git a/Images_readme/Diagrama_Final.png b/Images_readme/Diagrama_Final.png new file mode 100644 index 0000000..a969c3e Binary files /dev/null and b/Images_readme/Diagrama_Final.png differ diff --git a/Images_readme/GUION.jpg b/Images_readme/GUION.jpg new file mode 100644 index 0000000..ad61044 Binary files /dev/null and b/Images_readme/GUION.jpg differ diff --git a/Images_readme/Screenshot 2020-05-04 at 00.26.15.png b/Images_readme/Screenshot 2020-05-04 at 00.26.15.png new file mode 100644 index 0000000..e21bd6d Binary files /dev/null and b/Images_readme/Screenshot 2020-05-04 at 00.26.15.png differ diff --git a/Images_readme/Sketchs/1.png b/Images_readme/Sketchs/1.png new file mode 100644 index 0000000..b0f7fdb Binary files /dev/null and b/Images_readme/Sketchs/1.png differ diff --git a/Images_readme/Sketchs/2.png b/Images_readme/Sketchs/2.png new file mode 100644 index 0000000..cfade1c Binary files /dev/null and b/Images_readme/Sketchs/2.png differ diff --git a/Images_readme/Sketchs/3.png b/Images_readme/Sketchs/3.png new file mode 100644 index 0000000..8c5d195 Binary files /dev/null and b/Images_readme/Sketchs/3.png differ diff --git a/Images_readme/Sketchs/4.png b/Images_readme/Sketchs/4.png new file mode 100644 index 0000000..844d4dc Binary files /dev/null and b/Images_readme/Sketchs/4.png differ diff --git a/Images_readme/Sketchs/5.png b/Images_readme/Sketchs/5.png new file mode 100644 index 0000000..3c8da3d Binary files /dev/null and b/Images_readme/Sketchs/5.png differ diff --git a/Images_readme/Sketchs/6.png b/Images_readme/Sketchs/6.png new file mode 100644 index 0000000..2e140d1 Binary files /dev/null and b/Images_readme/Sketchs/6.png differ diff --git a/Images_readme/Usuarios-clientes.jpg b/Images_readme/Usuarios-clientes.jpg new file mode 100644 index 0000000..570b119 Binary files /dev/null and b/Images_readme/Usuarios-clientes.jpg differ diff --git a/README.md b/README.md index 554e57c..dd871cc 100644 --- a/README.md +++ b/README.md @@ -1,475 +1,421 @@ -# Data Lovers -## Índice +![imagen a mostrar](src/Images_proyect/Banner.png) + + +### INDICE + +* [1. INTRODUCCIÓN A MAGIC MATCH](#introduccion) +* [2. MAGIC MATCH: TODO LO QUE NECESITAS SABER](#informacion) +* [3. PLANIFICACIÓN](#construccion) +* [4. DISEÑO UX](#diseno) +* [5. CONCLUSIONES Y REFLEXIONES](#conclusiones) +* [6. AGRADECIMIENTOS](#agradecimientos) -* [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. Parte adicional-opcional](#6-parte-adicional-opcional) -* [7. Consideraciones técnicas](#7-consideraciones-técnicas) -* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias) -* [9. Checklist](#9-checklist) *** -## 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_. + :zap: 1. INTRODUCCIÓN A MAGIC MATCH :zap: -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. +Magic Match es una plataforma web basada en el imaginario de Harry Potter, que ofrece a sus usuarios la oportunidad de jugar dos tests, donde podrán encontrar su alma gemela mágica y su enemigo mágico, dentro de los personajes de esta misma Saga. -![json-interfaz](https://lh4.googleusercontent.com/Tn-RPXS26pVvOTdUzRT1KVaJ-_QbFs9SpcGLxSPE43fgbHaXtFgMUInuDt7kV41DkT1j8Tt29V0LxQW7SMtC6digOIhfTXSBKdwI08wUwhD3RAqlwy0hjfmhZ2BFe91mtmCSEqysfgk) +Adicionalmente, el usuario tiene acceso a la información técnica de cada uno de los personajes disponibles. -## 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 a los usuarios -**visualizar, filtrar, ordenar, etc.**. -Te proponemos una serie de datos de diferentes _temáticas_ para que los -explores y decidas con cuál te interesa trabajar. Cada _set_ de datos viene con -información básica sobre los datos y su estructura, y una lista de las -necesidades de los usuarios que proviene de una investigación (_research_) -hecha por el equipo de Laboratoria. + :sparkles: 2. MAGIC MATCH: TODO LO QUE NECESITAS SABER :sparkles: -Una vez que elijas, diseña tu proyecto intentando ofrecerle la mejor experiencia -posible para ayudarle a satisfacer sus necesidades. +***Magic Match*** nace como respuesta ante la necesidad de nuestro cliente, por mejorar la experiencia de usuario de los jugadores de la plataforma: "Harry Potter: Wizards Unite". -Estos son datos que te proponemos: +Luego de sus propios estudios en usuarios, se dieron cuenta que había ciertos elementos que podrían ser útiles de implementar, ya que aportarían a mejorar la experiencia de aquellos usuarios. -* [Pokémon](src/data/pokemon/pokemon.json): - En este set encontrarás una lista con los 151 Pokémon de la región de Kanto, junto con sus respectivas estadísticas usadas en el juego - [Pokémon GO](http://pokemongolive.com). - - [Investigación con jugadores de Pokémon Go](src/data/pokemon/README.md) +Estos elementos son: -* [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) +:black_circle: Poder filtrar personajes por sus características, particularmente: -* [Harry Potter](src/data/potter/potter.json). - Este set de datos muestra la lista de los personajes del mundo de [Harry Potter: Wizards Unite](https://www.wizardingworld.com/), junto con sus respectivas características mencionadas en la serie de novelas de Harry Potter escrita por la autora británica J.K.Rowling. - - [Investigación con jugadores de Harry Potter: Wizards Unite](src/data/potter/README.md) +-Patronus -## 3. Objetivos de aprendizaje +-Varita Mágica -El objetivo principal de este proyecto es que, entendiendo las necesidades de tus usuarios, aprendas a diseñar y construir una interfaz web donde se pueda visualizar y manipular data. +-Casa Mágica -Revisa la lista y reflexiona sobre los objetivos que conseguiste en el proyecto anterior. Piensa en eso al decidir tu estrategia de trabajo individual y de equipo. +-Profesión -### UX -- [ ] Diseñar la aplicación pensando y entendiendo al usuario. -- [ ] Crear prototipos para obtener feedback e iterar. -- [ ] Aplicar los principios de diseño visual (contraste, alineación, jerarquía). -- [ ] Planear y ejecutar tests de usabilidad. +:black_circle: Poder acceder a la información de los personajes disponibles en la base de datos. -### HTML y CSS -- [ ] Entender y reconocer por qué es importante el HTML semántico. -- [ ] Identificar y entender tipos de selectores en CSS. -- [ ] Entender como funciona `flexbox` en CSS. -- [ ] Construir tu aplicación respetando el diseño planeado (maquetación). -### DOM -- [ ] Entender y reconocer los selectores del DOM (querySelector | querySelectorAll). -- [ ] Manejar eventos del DOM. (addEventListener) -- [ ] Manipular dinámicamente el DOM. (createElement, appendchild, innerHTML, value) +Bajo este concepto se concibe ***Magic Match***, cuyo objetivo principal es complementar la experiencia de usuario de los jugadores de "Harry Potter: Wizards Unite", a través de una plataforma web, que les permita participar de dos experiencias de estilo test. Como recompensa obtendrán sus Match Mágicos dentro de la gama de personajes disponibles, tanto en categoría Pareja, como Enemigo. -### Javascript -- [ ] Manipular arrays (`filter` | `map` | `sort` | `reduce`). -- [ ] Manipular objects (key | value). -- [ ] Entender el uso de condicionales (`if-else` | `switch`). -- [ ] Entender el uso de bucles (`for` | `forEach`). -- [ ] Entender la diferencia entre expression y statements. -- [ ] Utilizar funciones (parámetros | argumentos | valor de retorno). -- [ ] Entender la diferencia entre tipos de datos atómicos y estructurados. -- [ ] Utilizar ES Modules (`import` | `export`). +El usuario además puede acceder a una sección de Personajes, donde encontrará las fichas técnicas de cada uno de los personajes que forman parte de la base de datos dispuesta por nuestro cliente. -### Pruebas Unitarias (_testing_) -- [ ] Testear funciones (funciones puras). +La plataforma ***Magic Match*** también permite el acceso a usuarios que no son participantes de "Harry Potter: Wizards Unite", pero que si se sienten atraídos por las experiencias relacionadas al mundo de Harry Potter. -### Git y GitHub -- [ ] Ejecutar comandos de git (`add` | `commit` | `pull` | `status` | `push`). -- [ ] Utilizar los repositorios de GitHub (`clone` | `fork` | gh-pages). -- [ ] Colaborar en Github (pull requests). +**¿Cómo funciona?** -### Buenas prácticas de desarrollo -- [ ] Organizar y dividir el código en módulos (Modularización). -- [ ] Utilizar identificadores descriptivos (Nomenclatura | Semántica). -- [ ] Utilizar linter para seguir buenas prácticas (ESLINT). +El usuario entra a la Plataforma de ***Magic Match*** y escoge entre Descubrir su Pareja Mágica, su Enemigo Mágico o Conocer más sobre los personajes disponibles. +No es necesario registrarse, ni estar vinculado a ninguna otra plataforma para acceder. -### Soft skills -- [ ] **Planificación, organización y manejo del tiempo** Organizarse utilizando historias de usuario, haciendo una estimación general de los tiempos que se necesitarán para la realización del proyecto. Conocer las ceremonias y artefactos ágiles (sprint planning, dailys, retrospectiva, tablero al menos, etc) a pesar de que no se utilicen con regularidad. +Una vez que el usuario accede a cualquiera de los dos juegos disponibles, se le presenta un set de 5 preguntas, donde debe escoger su respuesta. +Este set de preguntas está creado a partir de los elementos que desea implementar nuestro cliente, por tanto hay preguntas relacionadas con las varitas mágicas, los Patronus y las casas mágicas de los personajes. -- [ ] **Trabajo en equipo** Trabajar con otros de forma colaborativa y en base a un objetivo común, entregando ideas para la construcción del proyecto +El mecanismo por el cuál se obtiene el match mágico del usuario es a través del filtrado, por tanto, el usuario efectivamente cumple con el objetivo técnico de filtrar, y lo hace a través de las respuestas que va entregando en cada pregunta, pero este es un filtrado intuitivo que entrega un resultado en función del instinto del usuario, y no un filtrado racional que solo arroja un orden predeterminado. -- [ ] **Autoaprendizaje** Demostrar interés y adquirir nuevos conocimientos autónomamente, estudiando de manera independiente, lo que se traduce, en que cuando es necesario, la estudiante buscará aclarar conceptos y resolver dudas sobre la materia. +Por otra parte, cuando el usuario ingresa a la categoría para conocer más sobre los personajes, puede ver las fotos de cada uno de ellos en la pagina web, las cuales puede ordenar bajo distintos criterios, como alfabéticamente y por relevancia. +Al hacer click en cualquiera de las fotos disponibles, el usuario accede a una ficha técnica con información del personaje seleccionado. -- [ ] **Presentaciones** Utilizar ciertas estrategias para hablar en público (tono y ritmo de voz adecuado, contacto visual con el público, interacción con medios de presentación), que permitan asegurar un mediano entendimiento de la audiencia. -- [ ] **Adaptabilidad** Afrontar los cambios inesperados o nuevos desafíos con una actitud positiva, aunque no necesariamente se logre accionar o adaptarse de la mejor manera a los diferentes contextos. +*** -- [ ] **Solución de problemas** Trabajar en la búsqueda y en la elaboración de soluciones alternativas a problemas de mediana complejidad. -- [ ] **Responsabilidad** Demostrar actitud de compromiso, reflejandolo en la entrega de trabajo a tiempo, llegando a la hora acordada y/o avisando cuando no se pueda asistir. + :dizzy: 3. CONSTRUCCIÓN DEL PROYECTO :dizzy: -- [ ] **Dar y recibir feedback** Escuchar los comentarios y críticas de los demás de manera respetuosa, y/o comunicar a los demás las opiniones de forma constructiva. +Te invitamos a acceder nuestra plataforma de trabajo, donde podrás ver gráficamente todo el proceso de este Proyecto. -- [ ] **Comunicación eficaz** Comunicar ideas a los demás cuando es necesario, aunque no siempre se fomenten de manera proactiva estas instancias de comunicación. +[Ingresa aquí a nuestro Board en Miro](https://miro.com/app/board/o9J_ktGidAY=/) -## 4. Consideraciones generales -* 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 3 semanas (15 días hábiles). -## 5. Criterios de aceptación mínimos del proyecto +### El comienzo -Los criterios para considerar que has completado este proyecto son: -### Definición del producto +Todo empieza cuando nuestro cliente plantea la necesidad de crear una plataforma que potenciara la experiencia de los usuarios de "Harry Potter: Wizards Unite", implementando soluciones a las necesidades descubiertas luego de investigaciones UX. -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. +Si bien lo esencial era implementar el mecanismo de filtrado, y desplegar las fichas de los diferentes personajes, no queríamos simplemente ser un apéndice enciclopédico para el juego, sino estimular al usuario a partir de una experiencia interactiva, intiutiva y con recompensas, con una interfaz amigable, sencilla y que represente la identidad de Harry Potter. -### Historias de usuario +Ideamos un primer Diagrama de Flujo de la aplicación, donde se refleja la primera aproximación a nuestra propuesta. -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. +![imagen a mostrar](Images_readme/Diagrama1.png) -Asegúrate de incluir la definición de terminado (_definition of done_) y los -Criterios de Aceptación para cada una. +Con este primer paso teníamos un punto de partida, pero luego de ir trabajando en nuestra propuesta y recibiendo feedback, se concibió la idea de lo que hoy es ***Magic Match***: Una aplicación que no solo muestra al usuario su afín de pareja en el mundo de Harry Potter, sino también su enemigo. +Con esto, ***Magic Match*** se convirtió en una idea ganadora para nuestro equipo. -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). +Luego de tener claro hacia donde nos dirigíamos, comenzamos nuestra planificación, para llevar a cabo el proyecto. -### Diseño de la Interfaz de Usuario -#### Prototipo de baja fidelidad +### Organización del Proyecto -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`. +Nuestra forma de trabajo se basa en la metodología SCRUM de Metodologías Ágiles. -#### Prototipo de alta fidelidad +Comenzamos nuestro proceso de planificación desglosando cada diferente tarea y objetivo en un tablero de trabajo. -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. Recuerda utilizar la -[identidad gráfica](https://drive.google.com/open?id=1eeWFqrWpy-OYOH4EHDckFGunyrm9iNeE) -correspondiente a cada set de datos que elijas. +[Visita acá nuestro Desglose del Proyecto](https://trello.com/b/uGPxOAaF/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_. +Con una aproximación más clara de nuestras misiones y objetivos, creamos una calendarización de nuestro proyecto, en la misma plataforma. -#### Testeos de usabilidad +[Visita acá nuestro Calendario](https://trello.com/b/x3gtxXLE/calendario-planificaci%C3%B3n-data-lovers) -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) +El proceso de planificación se dividió en 4 Sprint: -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 +:black_circle: Planificación e Investigación -Como mínimo, tu implementación debe: +:black_circle: Desarrollo -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_. +:black_circle: Codeo -### Pruebas unitarias +:black_circle: Testeo y Afinamiento. -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. +La idea general de nuestra planificación fue setear tareas diarias, para ir resolviendo en equipo. -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). +Cada día realizamos un Daily Meeting, que nos sirvió para ir poniéndonos al tanto como equipo, e ir avanzando en conjunto hacia los objetivos diarios. -## 6. Parte adicional-opcional +Al final de cada Sprint tuvimos una Retrospectiva de la semana, donde preparamos el tablero de Actividades para el siguiente Sprint. -Si **terminaste** con todo lo anterior y te queda tiempo, intenta explorar y -completar parte o todo de lo siguiente. Así podrás -profundizar y/o ejercitar más sobre los objetivos de aprendizaje del proyecto. +Con la planificación clara, procedimos a trabajar en nuestro 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. +### Desarrollo -* 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/). +**SPRINT** :one: -* 100% Coverage de pruebas unitarias. +Comenzamos el Sprint tomando dos lineas principales de trabajo. La primera fue Investigación, donde se estudió constantemente las distintas temáticas a aplicarse en nuestro proyecto, desde las diferentes perspectivas donde se construye. -## 7. Consideraciones técnicas +En paralelo, tuvimos el proceso de búsqueda para definir y redefinir la aplicación, y setearla como lo que actualmente proponemos como Magic Match. -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. +Creamos un nuevo diagrama de flujo, el cuál marca el flujo real con que se desarrolla la aplicación actualmente. -No se debe utilizar la _pseudo-variable_ `this`. +![imagen a mostrar](Images_readme/Diagrama_Final.png) -El _boilerplate_ contiene una estructura de archivos como punto de partida así -como toda la configuración de dependencias: +Definimos el Backlog del Proyecto y también del Sprint. -```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 -| | └── potter -| | ├── potter.js -| | └── potter.json -| | └── README.md -| ├── data.js -| ├── index.html -| ├── main.js -| └── style.css -└── test - └── data.spec.js +Con esto comenzamos a llevar a cabo los distintos procesos de Diseño Ux, y también trabajamos en escribir historias de Usuarios y practicar Java Script. -directory: 6 file: 17 -``` +Finalmente, integramos todos los elementos y documentos necesarios para nuestro trabajo, en la plataforma Miro. Es el link presentado al principio de esta categoría, pero puedes encontrarlo nuevamente [aquí.](https://miro.com/app/board/o9J_ktGidAY=/) -### `src/index.html` +Terminamos la semana con una retrospectiva, y reformulamos el Backlog del Sprint 2, Tablero de Actividades de este Sprint, incluyendo las historias de Usuarios. -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. +**Sprint** :two: -Encontrarás 1 etiqueta inicial, la cual si deseas puedes borrar y empezar de cero: - -``` -
-``` - -### `src/main.js` - -Acá escribirás todo el código que tenga que ver con la interacción del DOM -(seleccionar, actualizar y manipular elementos del DOM y eventos). Es decir, -en este archivo deberás invocar a tus funciones exportadas en el boilerplate, -según sea necesario para realizar operaciones como creación de nodos, -registro de manejadores de eventos (_event listeners_ o _event handlers_), .... - -En este archivo encontrarás una serie de _sentencias_ `import` -_comentadas_. Para _cargar_ las diferentes fuentes de datos tendrás que -_descomentar_ estas _sentencias_. Cada una de estas sentencias importará un -objeto, el cual ya se encuentra exportado en el boilerplate. Este objeto -contiene la data correspondiente a esa fuente de datos. - -Por ejemplo, si "descomentamos" la siguiente línea: - -```js -// import data from './data/pokemon/pokemon.js'; -``` - -La línea quedaría así: - -```js -import data from './data/pokemon/pokemon.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. - -* Y así sucesivamente, según tu proyecto en particular. - -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 ` - + + + + + Data Lovers + + + + + + +
+
+ + +
+

+ + Descubre tu Pareja Mágica o tu Enemigo Encantado, en el mundo de los personajes de “Harry Potter: Wizards Unite”. + + ¿Por dónde te gustaría comenzar? +

+
+ + + +
+
+ + +
+

Ya no necesitarás pociones de amor. Contesta algunas preguntas y sabrás que personaje de + la Saga, es tu pareja mágica ideal.

+ +
+ +

1. ¿Qué tipo de pareja buscas?

+ + +

2. Si fueras estudiante de Hogwarts, ¿A qué casa mágica te gustaría ir?

+ + + +

3. Si vivieras en el mundo de "Harry Potter: Wizads Unite" ¿Qué linaje te gustaría + tener?

+ + + + + +

4. ¿Cuál de estos animales conecta con tu corazón?

+ + + + +

5. Si mañana despertaras en un bosque ¿Qué tipo de bosque te gustaría que fuera?

+ + + +
+ + +
+
+
+ + +
+

Si lo tuyo es el combate, aquí encontrarás a tu enemigo encantado perfecto. + Contesta algunas preguntas y tendrás la respuesta.

+
+ +

1. ¿Con cuál de estas criaturas mágicas te gustaría enfrentarte?

+ + + +

2. Si fueras estudiante de Hogwarts, ¿En qué casa mágica no soportarías vivir?

+ + +

3. ¿Con qué linaje mágico no te llevas bien?

+ + + +

4. ¿Con cuál de estas criaturas mágicas te atreverías a enfrentarte?

+ + + +

5. ¿Cuál de estos animales es el que menos te gusta?

+ + +
+ + +
+
+ +
+ + +
+ +

Clickea sobre la foto que quieras, para obtener más información. + Esperamos que encuentres lo que buscas...

+ +
+ + +
+ + +
+ +
+ + + +
+
+ + + + + + + + diff --git a/src/main.js b/src/main.js index 71c59f2..d1eef2c 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,409 @@ -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'; +import dataHarryPotter from './data/potter/potter.js' // conecta la data de harry Potter +import { + filterData, + filterCasa, + filterordenaA_Z, + filterMadera, + filterHechizo, + filterAncestro, + filterRelevancia, + filterNucleo, + filterCasaEnemigo, + filterAncestroEnemigo, + filterEspecie, + filterHechizoEnemigo +} from './data.js' -console.log(example, data); + +//BOTONES DESDE HTML// +const botonParaFlow1 = document.getElementById("boton1"); +botonParaFlow1.addEventListener("click", flow1); + +const botonParaFlow2 = document.getElementById("boton2"); +botonParaFlow2.addEventListener("click", flow2); + +const botonParaFlow3 = document.getElementById("boton3"); +botonParaFlow3.addEventListener("click", flow3); + +const botonAtrasPareja = document.getElementById("volverPareja"); +botonAtrasPareja.addEventListener("click", regresarPareja); + +const botonAtrasEnemigo = document.getElementById("volverEnemigo"); +botonAtrasEnemigo.addEventListener("click", regresarEnemigo); + +const ocultarPreguntasAmor = document.getElementById('pareja'); +const ocultarPreguntasEnemigo = document.getElementById('enemigo'); + +const botonInicioPareja = document.createElement("button"); //se crea boton desde js +const nombreBotonPareja = document.createTextNode("Inicio"); //se asigna nombre de boton + +//const botonConocerMasPareja = document.createElement("button"); +//const nombreBotonConocerMasPareja = document.createTextNode("Quiero Saber Mas"); + +const botonInicioEnemigo = document.createElement("button"); +const nombreBotonEnemigo = document.createTextNode("Inicio"); + +//const botonConocerMasEnemigo = document.createElement("button"); +//const nombreBotonConocerMasEnemigo = document.createTextNode("Quiero Saber Mas"); + + +const botonInicioPersonajes = document.createElement("button"); +const nombreBotonPersonajes = document.createTextNode("Inicio"); + +const conteiner = document.getElementById("root"); +const botonesJS = document.getElementById("botonesJS"); + +let dataSegundaPregunta = []; +let dataTerceraPregunta = []; +let dataCuartaPregunta = []; +let dataQuintaPregunta = []; +let resultado = []; + + +let flujo1 = document.getElementById("pareja"); +let intro = document.getElementById("portada"); +let flujo2 = document.getElementById("enemigo"); +let flujo3 = document.getElementById("personajes"); + +let modal = document.getElementById("modal"); +let dataFoto = document.getElementsByClassName("imagens"); + +//FUNCIONES PARA BOTONES// + +// FUNCION PAREJA MAGICA +function flow1() { + flujo1.style.display = "block"; //Muestra seccion de pareja magica + intro.style.display = "none"; //Oculta seccion de pantalla principal +} + +// FUNCION ENEMIGO MAGICO +function flow2() { + flujo1.style.display = "none"; //Oculta seccion de pareja magica + intro.style.display = "none"; //Oculta seccion de pantalla principal + flujo2.style.display = "block"; // Muestra seccion de enemigo magico +} + +function regresarPareja() { + flujo1.style.display = "none"; //Oculta seccion de pareja magica + intro.style.display = "block"; //Muestra seccion de pantalla principal + flujo2.style.display = "none"; // Oculta seccion de enemigo magico +} + +function regresarEnemigo() { + flujo1.style.display = "none"; //Oculta seccion de pareja magica + intro.style.display = "block"; //Oculta seccion de pantalla principal + flujo2.style.display = "none"; // Oculta seccion de enemigo magico +} + +function flow3() { + flujo1.style.display = "none"; //Oculta seccion de pareja magica + intro.style.display = "none"; //Oculta seccion de pantalla principal + flujo2.style.display = "none"; //Oculta seccion de enemigo magico + flujo3.style.display = "block"; //Muestra Seccion de Personajes Magicos + for (let i = 0; i < dataHarryPotter.length; i++) { + let elemen = + `
+
+ +

${dataHarryPotter[i].name}

+

+
` + conteiner.innerHTML += elemen; + } + botonInicioPersonajes.setAttribute("id", "vuelvePersonajes") + botonInicioPersonajes.setAttribute("class", "botones") + botonInicioPersonajes.appendChild(nombreBotonPersonajes); + botonesJS.appendChild(botonInicioPersonajes); + const botonVuelvePersonaje = document.getElementById("vuelvePersonajes") //id de boton + botonVuelvePersonaje.addEventListener("click", () => { + location.reload() + }) + for (let i = 0; i < dataFoto.length; i++) { + let recorrido = dataFoto[i]; + recorrido.addEventListener('click', modalImprimir); + } + modalImprimir +} + +const ordenaAZ = document.getElementById("ordenar_Alfabeticamente"); +ordenaAZ.addEventListener("change", () => { + let ordena = ordenaAZ.options[ordenaAZ.selectedIndex].text; + conteiner.innerHTML = ""; + let personajesOrdenados = filterordenaA_Z(dataHarryPotter, ordena); + for (let i = 0; i < personajesOrdenados.length; i++) { + let elemen = + `
+
+ +

${personajesOrdenados[i].name}

+

+
` + conteiner.innerHTML += elemen; + } + for (let i = 0; i < dataFoto.length; i++) { + let recorrido = dataFoto[i]; + recorrido.addEventListener('click', modalImprimir); + } + modalImprimir +}) + +const ordenaRelevanciaAZ = document.getElementById("ordenar_Relevancia"); +ordenaRelevanciaAZ.addEventListener("change", () => { + let categoria = ordenaRelevanciaAZ.options[ordenaRelevanciaAZ.selectedIndex].text; + conteiner.innerHTML = ""; + let personajesRelevancia = filterRelevancia(dataHarryPotter, categoria); + for (let i = 0; i < personajesRelevancia.length; i++) { + let elemen = + `
+
+ +

${personajesRelevancia[i].name}

+

+
` + conteiner.innerHTML += elemen; + } + for (let i = 0; i < dataFoto.length; i++) { + let recorrido = dataFoto[i]; + recorrido.addEventListener('click', modalImprimir); + } + modalImprimir +}); + +// FUNCIONES PAREJA MAGICA + + +const filtraGenero = document.getElementById("pregunta1Amor"); // se crea constante +filtraGenero.addEventListener("change", () => { + document.getElementById('pregunta2Amor').removeAttribute('disabled'); + let genero = filtraGenero.options[filtraGenero.selectedIndex].value; // Se crea variable donde se almacena la opcion elegida por el usuario + let generoFiltrado = filterData(dataHarryPotter, genero); + dataSegundaPregunta = generoFiltrado; +}) + + +const filtraCasa = document.getElementById("pregunta2Amor"); // se crea constante +filtraCasa.addEventListener("change", () => { + document.getElementById('pregunta3Amor').removeAttribute('disabled'); + let casa = filtraCasa.options[filtraCasa.selectedIndex].value; + let casaFiltrada = filterCasa(dataSegundaPregunta, casa); + dataTerceraPregunta = casaFiltrada; +}); + + +const filtraAncestro = document.getElementById("pregunta3Amor"); // se crea constante +filtraAncestro.addEventListener("change", () => { + document.getElementById('pregunta4Amor').removeAttribute('disabled'); + let ancestro = filtraAncestro.options[filtraAncestro.selectedIndex].value; + let ancestroFiltrada = filterAncestro(dataTerceraPregunta, ancestro); + dataCuartaPregunta = ancestroFiltrada; +}) + + +const filtraHechizo = document.getElementById("pregunta4Amor"); // se crea constante +filtraHechizo.addEventListener("change", () => { + document.getElementById('pregunta5Amor').removeAttribute('disabled'); + let hechizo = filtraHechizo.options[filtraHechizo.selectedIndex].value; + let hechizoFiltrada = filterHechizo(dataCuartaPregunta, hechizo); + dataQuintaPregunta = hechizoFiltrada; +}) + + +const filtraMadera = document.getElementById("pregunta5Amor"); // se crea constante +filtraMadera.addEventListener("change", () => { + let madera = filtraMadera.options[filtraMadera.selectedIndex].value; + let maderaFiltrada = filterMadera(dataQuintaPregunta, madera); + resultado = maderaFiltrada; +}) + +const botonAceptarPareja = document.getElementById("aceptarPareja"); +botonAceptarPareja.addEventListener('click', () => { + ocultarPreguntasAmor.style.display = 'none'; + + conteiner.innerHTML = ""; + if (resultado.length === 0) { + conteiner.innerHTML = `

¡No tienes Match Mágico¡
Intenta nuevamente con otras selecciones.

` + } else { + for (let i = 0; i < resultado.length; i++) { + let elemen = + `
+

Tu pareja mágica es:

+

+

${resultado[i].name}

+

${resultado[i].personalInfo}

+ +

` + conteiner.innerHTML += elemen; + } + } + + /*botonConocerMasPareja.setAttribute("id", "quieroConocerPareja") + botonConocerMasPareja.setAttribute("class", "botones") + botonConocerMasPareja.appendChild(nombreBotonConocerMasPareja); + botonesJS.appendChild(botonConocerMasPareja); + const botonMasPareja = document.getElementById("quieroConocerPareja") //id de boton + botonMasPareja.addEventListener("click", () => { + conteiner.innerHTML = ""; + for (let i = 0; i < resultado.length; i++) { + let elemen = + `
+
+ +

Nombre: ${resultado[i].name}

+

Especie: ${resultado[i].species}

+

Genero: ${resultado[i].gender}

+

Casa Mágica: ${resultado[i].house}

+

Linaje: ${resultado[i].ancestry}

+

Patronus: ${resultado[i].patronus}

+

Madera de Varita: ${resultado[i].wand.wood}

+

Nucleo de Varita: ${resultado[i].wand.core}

+

Longuitud de Varita: ${resultado[i].wand.length}

+

+
`; + conteiner.innerHTML += elemen; + } + });*/ + + botonInicioPareja.setAttribute("id", "vuelvePareja") + botonInicioPareja.setAttribute("class", "botones") + botonInicioPareja.appendChild(nombreBotonPareja); + botonesJS.appendChild(botonInicioPareja); + const botonVuelvePareja = document.getElementById("vuelvePareja") //id de boton + botonVuelvePareja.addEventListener("click", () => { + location.reload(); + }); +}); + +// FUNCIONES ENEMIGO MAGICO + +const filtraNucleo = document.getElementById("pregunta1Enemigo"); // se crea constante +filtraNucleo.addEventListener("change", () => { + document.getElementById('pregunta2Enemigo').removeAttribute('disabled'); + let nucleo = filtraNucleo.options[filtraNucleo.selectedIndex].value; // Se crea variable donde se almacena la opcion elegida por el usuario + let nucleoFiltrado = filterNucleo(dataHarryPotter, nucleo); + dataSegundaPregunta = nucleoFiltrado; +}) + +const filtraCasaEnemigo = document.getElementById("pregunta2Enemigo"); // se crea constante +filtraCasaEnemigo.addEventListener("change", () => { + document.getElementById('pregunta3Enemigo').removeAttribute('disabled'); + let casaEnemigo = filtraCasaEnemigo.options[filtraCasaEnemigo.selectedIndex].value; + let casaFiltradaEnemigo = filterCasaEnemigo(dataSegundaPregunta, casaEnemigo); + dataTerceraPregunta = casaFiltradaEnemigo; +}) + +const filtraAncestroEnemigo = document.getElementById("pregunta3Enemigo"); // se crea constante +filtraAncestroEnemigo.addEventListener("change", () => { + document.getElementById('pregunta4Enemigo').removeAttribute('disabled'); + let ancestroEnemigo = filtraAncestroEnemigo.options[filtraAncestroEnemigo.selectedIndex].value; + let ancestroFiltradaEnemigo = filterAncestroEnemigo(dataTerceraPregunta, ancestroEnemigo); + dataCuartaPregunta = ancestroFiltradaEnemigo +}) + +const filtraEspecie = document.getElementById("pregunta4Enemigo"); // se crea constante +filtraEspecie.addEventListener("change", () => { + document.getElementById('pregunta5Enemigo').removeAttribute('disabled'); + let especie = filtraEspecie.options[filtraEspecie.selectedIndex].value; + let especieFiltrada = filterEspecie(dataCuartaPregunta, especie); + dataQuintaPregunta = especieFiltrada +}) + +const filtraHechizoEnemigo = document.getElementById("pregunta5Enemigo"); // se crea constante +filtraHechizoEnemigo.addEventListener("change", () => { + let hechizoEnemigo = filtraHechizoEnemigo.options[filtraHechizoEnemigo.selectedIndex].value; + let hechizoFiltradaEnemigo = filterHechizoEnemigo(dataCuartaPregunta, hechizoEnemigo); + resultado = hechizoFiltradaEnemigo +}) + +const botonAceptarEnemigo = document.getElementById("aceptarEnemigo"); +botonAceptarEnemigo.addEventListener('click', () => { + ocultarPreguntasEnemigo.style.display = 'none'; + conteiner.innerHTML = ""; + if (resultado.length === 0) { + conteiner.innerHTML = `

¡No tienes Match Mágico¡
Intenta nuevamente con otras selecciones.

` + } else { + for (let i = 0; i < resultado.length; i++) { + let elemen = + `
+

Tu enemigo mágico es:

+

+

${resultado[i].name}

+

${resultado[i].personalInfo}

+ +

` + conteiner.innerHTML += elemen; + } + } + /*botonConocerMasEnemigo.setAttribute("id", "quieroConocerEnemigo") + botonConocerMasEnemigo.setAttribute("class", "botones") + botonConocerMasEnemigo.appendChild(nombreBotonConocerMasEnemigo); + botonesJS.appendChild(botonConocerMasEnemigo); + const botonMasEnemigo = document.getElementById("quieroConocerEnemigo") //id de boton + botonMasEnemigo.addEventListener("click", () => { + conteiner.innerHTML = ""; + for (let i = 0; i < resultado.length; i++) { + let elemen = + `
+
+ +

Nombre: ${resultado[i].name}

+

Especie: ${resultado[i].species}

+

Genero: ${resultado[i].gender}

+

Casa Mágica: ${resultado[i].house}

+

Linaje: ${resultado[i].ancestry}

+

Patronus: ${resultado[i].patronus}

+

Madera de Varita: ${resultado[i].wand.wood}

+

Nucleo de Varita: ${resultado[i].wand.core}

+

Longuitud de Varita: ${resultado[i].wand.length}

+

+
` + conteiner.innerHTML += elemen; + } + })*/ + + botonInicioEnemigo.setAttribute("id", "vuelveEnemigo") + botonInicioEnemigo.setAttribute("class", "botones") + botonInicioEnemigo.appendChild(nombreBotonEnemigo); + botonesJS.appendChild(botonInicioEnemigo); + const botonVuelveEnemigo = document.getElementById("vuelveEnemigo") //id de boton + botonVuelveEnemigo.addEventListener("click", () => { + location.reload() + }); + for (let i = 0; i < dataFoto.length; i++) { + let recorrido = dataFoto[i]; + recorrido.addEventListener('click', modalImprimir) + } + modalImprimir +}) + + +for (let i = 0; i < dataFoto.length; i++) { + let recorrido = dataFoto[i]; + recorrido.addEventListener('click', modalImprimir) +} + + +function modalImprimir(event) { + modal.innerHTML = ""; + const pensonajesEncontrados = dataHarryPotter.find(function (personaje) { + return (personaje.name === event.target.id) + }) + modal.innerHTML += + `
+
+ +

Nombre: ${pensonajesEncontrados.name}

+

Especie: ${pensonajesEncontrados.species}

+

Género: ${pensonajesEncontrados.gender}

+

Casa Mágica: ${pensonajesEncontrados.house}

+

Linaje: ${pensonajesEncontrados.ancestry}

+

Patronus: ${pensonajesEncontrados.patronus}

+

Madera de varita: ${pensonajesEncontrados.wand.wood}

+

Nucleo de varita: ${pensonajesEncontrados.wand.core}

+

Longuitud de varita: ${pensonajesEncontrados.wand.length}

+

+
` + modal.classList.add('modal--show') + modal.addEventListener("click", (e) => { + if (e.target.classList.contains('modal')) modal.classList.remove('modal--show') + }); +} diff --git a/src/style.css b/src/style.css index e69de29..6d9697c 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,469 @@ +/* Contenedor Universal */ +* { + font-family: 'Lato', sans-serif; + font-family: 'Manjari', sans-serif; + font-family: 'Merriweather', serif; + font-family: 'Metal Mania', cursive; + font-family: 'Montserrat', sans-serif; + font-family: 'Open Sans', sans-serif; + text-align: center; + color: rgb(8, 8, 8); + background-color: #000000; + padding: 0; + margin: 0; +} + +/*Caja para Biografía personajes en resultados juegos*/ +#bioResultado { + background-image: url("./Images_proyect/fondo_general.jpg"); + width: 90vw; + height: 100%; + margin-left: 3%; + margin-right: 3%; + margin-top: 3%; + display: flex; + align-self: center; + justify-content: left; + font-size: calc(0.8em + 0.9vw); +} + +/*Es el cuerpo general del documento. Define el fondo general y que trabajamos con flexbox */ +body { + background-image: url("./Images_proyect/fondo_general.jpg"); + padding-top: 0em; + display: flex; + flex-direction: column; +} + + +/* Clase para Botones pantallas: portada, juego pareja, juego enemigo, y personajes */ +.botones { + background-color: rgba(255, 252, 62, 0.966); + opacity: 0.7; + width: 20vw; + height: 10vh; + border: 0.2em solid #aa9d9de5; + font-family: 'Metal Mania', cursive; + font-size: calc(0.7em + 0.8vw); + border-radius: 20%; +} +/*Seteo de contenedor botones creados en JS*/ +#botonesJS { + background: transparent; + display: flex; + flex-direction: row; + justify-content: space-evenly; + margin-top: 5em; + margin-bottom: 1em; +} + +/* Contenedor para Botones pantalla portada, juego pareja, juego enemigo, creados en HTML */ +.contenedorBotones { + background-color: transparent; + margin-top: 6vh; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: flex-end; +} + + +/* Contenedor para Preguntas juegos, creadas en HTML */ +.contenedorPreguntas { + background-color: transparent; + padding-top: 3vh; + padding-left: 3vw; + padding-bottom: 7vh; + padding-right: 3vw; + margin-bottom: 5vh; + display: flex; + flex-direction: column; +} + +/* Para ocultar pantalla enemigo en función */ +#enemigo { + display: none; +} + +/* Seteo Banner para todo el proyecto*/ +/* Banner en si*/ +#estiloBanner { + background-image: url("./Images_proyect/Banner.png"); + background-repeat: no-repeat; + background-size: 100%; + width: 100vw; + height: 25vh; + margin: 0em 0em 0em 0em; + display: block; + margin: auto; +} + +/* configuración para eliminar franjas negras al hacer resposive pagina*/ +.bannerFondo { + background-color: transparent; +} + +/* Acá seteamos ficha personajes, y las hacemos responsive */ +.ficha { + width: 180px; + height: 230px; + padding: 25px; + border-radius: 10px; + margin: 1% auto; + margin-left: 1%; + margin-right: 1%; + margin-top: 3%; + margin-bottom: 3%; + background: transparent; + float: left; +} + +/* Seteo para que podamos ver el fondo de pantalla en biografias */ +.fichaBio { + background-color: transparent; +} + +/* Ficha resultado, pero la comentamos porque no la estamos usando, porque elminamos ficha resultado +.fichaResultado { + background-image: url("./Images_proyect/fondo_general.jpg"); + background-color: transparent; + width: 90vw; + height: 100vh; + display: flex; + align-self: flex-start; + justify-self: right; +} */ + + + +/* Acá seteamos pantalla fondo enemigo */ +.imagenEnemigo { + background-image: url("./Images_proyect/fondo_enemigo.png"); + background-repeat: no-repeat; + background-size: cover; + width: 100%; + height: 100vh; + margin: 0em 0em 0em 0em; + display: block; + margin: auto; + background-color: #000000; +} + +/* Acá seteamos imagen pantalla pareja*/ +.imagenPareja { + background-image: url("./Images_proyect/fondo_amor.png"); + background-repeat: no-repeat; + background-size: cover; + display: block; + margin: auto; + width: 100vw; + height: 100vh; + margin: 0em 0em 0em 0em; + background-color: transparent; +} + + +/* Acá seteamos pantalla fondo personaje */ +.imagenPersonaje { + background-image: url("./Images_proyect/fondo_general.jpg"); + background-repeat: no-repeat; + background-size: cover; + display: block; + margin: auto; + width: 100vw; + height: 30vh; + margin: 0em 0em 0em 0em; + +} + +/* Acá seteamos imagen pantalla portada */ +.imagenPortada { + background-image: url("./Images_proyect/fondo_1.png"); + background-repeat: no-repeat; + background-size: cover; + display: block; + margin: auto; + width: 100vw; + height: 100vh; + margin: 0em 0em 0em 0em; + padding-top: 6%; +} + +/*Seteo imagen para fichas*/ +.imagens { + width: 100%; + height: 30vh; + border-radius: 2em; + border: 0.3em solid rgba(24, 22, 22, 0.897); + background-image: url("./Images_proyect/fondo_general.jpg"); +} + +/*Seteo Imagenes resultado juegos*/ +/*Imagen en si*/ +.imagensResultado { + width: 20vw; + height: 15%; + border-radius: 2em; + border: 0.3em solid rgba(24, 22, 22, 0.897); + margin-top: 0; + margin-bottom: 0; +} + +/*contenedor imagen resultado juegos*/ +.contenedorImagenBio { +background-color: transparent; +margin-top: 0; +margin-bottom: 3%; +} + + +/*Seteo letras mensaje no match*/ +.mensajeNoMatch { + font-family: 'Merriweather', serif; + color: #FFC107; + background-color: transparent; +} + + + + +/*acá inicia el estilo del modal*/ +/*Imagen dentro del modal*/ +.imagensModal { + width: 80%; + height: 65%; + border-radius: 5em; + margin-top: 2%; + margin-bottom: 7%; + border: 0.3em solid rgba(24, 22, 22, 0.897); + background-image: url("./Images_proyect/fondo_general.jpg") +} + +/*seteo modal, pero no se ve esto*/ +.modal { + position: fixed; + top: 0; + left: 3%; + width: 100vw; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background-color: transparent; + transform: scale(0); + transition: transform .2s; +} + +/*Id modal, pero o lo estamos ocupando para css*/ +/*#modal_Content { + background-color: fuchsia; + width: 300vw; + height: 300vh; + padding: 3rem; +}*/ + +/*contenedor modal*/ +.modal--show { + transform: scale(1); + background-color: transparent; + width: 45%; + height: 70vh; + padding-top: 4em; + padding-bottom: 10em; + padding-right: 30em; + padding-left: 1em; + margin-top: 2em; + margin-right: 20%; + display: flex; + justify-content: center; + align-items: center; + +} +/*modal en si*/ +#tarjetaModal { + width: 100%; + height: 100%; + padding: 5em; + background-image: url("./Images_proyect/fondo_general.jpg"); + border: 0.3em solid rgba(24, 22, 22, 0.897); + border-radius: 5em; + margin: 1% auto; + margin-left: 10%; + margin-right: 1%; + display: flex; + justify-content: center; + align-items: center; +} + +/*contenedor textos modal*/ +#letras { + padding-top: 0; + background-color: transparent; +} + +/*estilo letras modal*/ +.letras { + font-family: 'Merriweather', serif; + color: #FFC107; + background-color: transparent; +} + + + + +/* Acá ocultamos pantalla pareja para funcion*/ +#pareja { + display: none; +} + + +/* Acá ocultamos pantalla personajes para funcion*/ +#personajes { + display: none; +} + + +/* Aca seteamos el estilo del footer del proyecto */ +.pie { + background-color: black; + font-family: 'Merriweather', serif; + font-size: calc(1vh + 1vw); + color: #aa9d9de5; + margin-top: 4em; + background-image: url("./Images_proyect/fondo_general.jpg"); + flex-shrink: 0; + justify-self: flex-end; +} + +/* Aca seteamos el contenedor de la portada del proyecto*/ +#portada { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: flex-start; +} + +/* Aca seteamos el contenedor root del proyecto*/ +#root { + margin: 1cm; + background-color: transparent; + flex: 1 0 auto; +} + +/* Selectores para ordenar A-z y relevancia */ +.selectoresOrden { + background-color: transparent; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-around; + border-radius: 10px; + padding-top: 2.5em; + padding-bottom: 0vh; + height: 5vh; +} + +/* Originalente para fichas personajes pero no lo estamos usando. +.seteoFicha { + font-family: 'Manjari', sans-serif; + color: #FFC107; + font-size: 1.5em; + background-image: url("./Images_proyect/fondo_general.jpg"); + display: flex; + flex-direction: row; + width: 20vw; + height: 30vh; +}/* + +/*estilo de fuente para biografía personajes en resultado juegos */ +.seteoFichaBio { + font-family: 'Merriweather', serif; + color: #FFC107; + font-size: calc(1.4vh + 0.6vw); + background-image: url("./Images_proyect/fondo_general.jpg"); + width: 85%; + height: 100%; + margin-right: 5%; + margin-left: 2%; +} + +/*Seteo nombres en pantalla personajes*/ +.seteoNombresPantallaPersonajes { + font-family: 'Manjari', sans-serif; + color: #FFC107; + font-size: calc(1.8vh + 0.9vw); + background-color: transparent; + display: inline; +} + +/*Seteo nombre en bio*/ +.seteoNombresPantallaBio { + font-family: 'Metal Mania', cursive; + color: #FFC107; + font-size: 3em; + background-color: transparent; + width: 30%; + height: 5vh; + display: flex; + align-items: center; + margin-bottom: 2%; + margin-top: 2%; + margin-left: 40%; + font-size: calc(3vh + 2vw); +} + + +/* Texto de los encabezados de las páginas Enemigo, Pareja y Personajes */ +.textoSecciones { + padding-top: 5vh; + padding-right: 5vw; + padding-bottom: 2vh; + padding-left: 5vw; + background-color: transparent; + opacity: 1; + font-family: 'Metal Mania', cursive; + color: #aa9d9de5; + font-size: calc(2.5vh + 1vw); +} + +/*Texto portada web */ +.textoPortada { + font-family: 'Merriweather', serif; + color: #aa9d9de5; + font-size: calc(2.5vh + 0.7vw); + background-color: transparent; + margin: 0em 1em 2.5em 1em; +} + +/*Preguntas de los juegos */ +.textoPregunta { + font-family: 'Merriweather', serif; + color: #FFC107; + background-color: transparent; + font-size: calc(1.5vh + 0.7vw); + padding-bottom: 2.5vh; + padding-top: 2.5vh; + align-self: center; +} + +/*Select de opciones para preguntas */ +.textoSelect { + font-family: 'Manjari', sans-serif; + font-size: calc(1vh + 0.5vw); + color: #aa9d9de5; + background-color: transparent; + width: 40vw; + height: 4vh; + display: flex; + flex-direction: row; + align-self: center +} + +/*titulo pantalla personajes juegos*/ +.tituloMensajes { + font-family: 'Merriweather', serif; + color: #aa9d9de5; + font-size: calc(3vh + 2vw); + background-color: transparent; + margin: 0em 1em 1em 1em; +} \ No newline at end of file diff --git a/test/data.spec.js b/test/data.spec.js index 9344710..4137ed7 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,4 +1,373 @@ -import { example, anotherExample } from '../src/data.js'; +import {filterordenaA_Z, + filterRelevancia, + filterData, + filterCasa, + filterMadera, + filterHechizo, + filterAncestro, + filterNucleo, + filterCasaEnemigo, + filterAncestroEnemigo, + filterEspecie, + filterHechizoEnemigo} from '../src/data.js'; + +//creando constantes para la data a testear// + +//constante para filterOrdenarAZ/ +const dataOrdenarAZ = [ + { + "name": 'Draco Malfoy', + "categories": 33, + }, { + "name": 'Remus Lupin', + "categories": 30, + }, { + "name": 'Lord Voldemort', + "categories": 51, + }] + + +//constante para filterOrdenarRelevancia/ +const dataOrdenarRelevancia = [ + { + "name": 'Arthur Weasley', + "categories": 22, + }, { + "name": 'Horace Slughorn', + "categories": 17, + }, { + "name": 'Lucius Malfoy', + "categories": 18, + }] + + +//constante para filterData// +const dataData = [ + { + "name": 'Ron Weasley', + "gender": 'male', + } +] + +//constante para filterCasa// +const dataCasa = [{ + "name": "Gregory Goyle", + "house": "Slytherin", +} +] + +//constante para filterMadera// +const dataMadera = [{ + "name": "Hermione Granger", + "wand": { + "wood": "vine", + } + } +] + +//constante para filterHechizo// +const dataHechizo = [{ + "name": 'Cho Chang', + "patronus": 'swan', + } +] + +//constante para filterAncestro// +const dataAncestro = [{ + "name": 'Severus Snape', + "ancestry": 'half-blood', + } +] + +//constante para filterNucleo// +const dataNucleo = [{ + "name": "Harry Potter", + "wand": { + "core": "phoenix feather", + } + } +] + +//constante para filterCasaEnemigo// +const dataCasaEnemigo = [{ + "name": "Neville Longbottom", + "house": "Gryffindor", + } +] + +//constante para filterAncestroEnemigo// +const dataAncestroEnemigo = [{ + "name": "Ginny Weasley", + "ancestry": "pure-blood", + } +] + +//constante para filterEspecia// +const dataEspecie = [{ + "name": "Mrs Norris", + "species": "cat", + } +] + +//constante para filterHechizoEnemigo// +const dataHechizoEnemigo = [{ + "name": "Dolores Umbridge", + "patronus": "persian cat", + } +] + + +//testeando funcion de ordena a-z y z-a/ +describe('filterordenaA_Z', () => { + + test('is a function', () => { + expect(typeof filterordenaA_Z).toBe('function'); + }); + + test('should return "Ordenar A-Z" for order "ordena"', () => { + expect(filterordenaA_Z(dataOrdenarAZ,"ordena","Ordenar A-Z"))===([{ + "name": 'Draco Malfoy', + "categories": 33, + }, { + "name": 'Lord Voldemort', + "categories": 51, + }, { + "name": 'Remus Lupin', + "categories": 30, + }]); + }); + }); + + /* describe('filterordenaA_Z', () => { + + test('should return "Ordenar Z-A" for order "ordena"', () => { + expect(filterordenaA_Z(dataOrdenarAZ,"ordena","Ordenar Z-A"))===([{ + "name": 'Draco Malfoy', + "categories": 33, + }, { + "name": 'Lord Voldemort', + "categories": 51, + }, { + "name": 'Remus Lupin', + "categories": 30, + }].reverse()); + }); + }); */ + + +//testeando funcion de ordena relevancia/ +describe('filterRelevancia', () => { + + test('is a function', () => { + expect(typeof filterRelevancia).toBe('function'); + }); + + test('should return "Menor Relevancia" for order "categoria"', () => { + expect(filterRelevancia(dataOrdenarRelevancia,"categoria","Menor Relevancia"))===([{ + "name": 'Horace Slughorn', + "categories": 17, + }, { + "name": 'Lucius Malfoy', + "categories": 18, + }, { + "name": 'Arthur Weasley', + "categories": 22, + }]); + }); + }); + + /*describe('filterordenaA_Z', () => { + + test('should return "Ordenar Z-A" for order "ordena"', () => { + expect(filterordenaA_Z(dataOrdenarRelevancia,"categoria","Mayor Relevancia"))===([{ + "name": 'Horace Slughorn', + "categories": 17, + }, { + "name": 'Lucius Malfoy', + "categories": 18, + }, { + "name": 'Arthur Weasley', + "categories": 22, + }].reverse()); + }); + }); */ + + + + +//testeando funcion de filtra genero// +describe('filterData', () => { + test('is a function', () => { + expect(typeof filterData).toBe('function'); + }); + + test('should return "male" for filter "gender"', () => { + expect(filterData(dataData, "male" )).toEqual([ + { + "name": 'Ron Weasley', + "gender": 'male', + } + ]); + }); +}); + +//testeando funcion de filtra casa// +describe('filterCasa', () => { + test('is a function', () => { + expect(typeof filterCasa).toBe('function'); + }); + + test('should return "Slytherin" for filter "house"', () => { + expect(filterCasa(dataCasa, "Slytherin")).toEqual([{ + "name": "Gregory Goyle", + "house": "Slytherin", + } + ]); + }); + }); + +//testeando funcion de filtra madera varita// +describe('filterMadera', () => { + test('is a function', () => { + expect(typeof filterMadera).toBe('function'); + }); + + test('should return "vine" for filter "wand.wood"', () => { + expect(filterMadera(dataMadera, "vine" )).toEqual([{ + "name": "Hermione Granger", + "wand": { + "wood": "vine", + } + } + ]); + }); +}); + +//testeando funcion de filtra hechizo// +describe('filterHechizo', () => { + test('is a function', () => { + expect(typeof filterHechizo).toBe('function'); + }); + + test('should return "swan" for filter "patronus"', () => { + expect(filterHechizo(dataHechizo, "swan" )).toEqual([{ + "name": "Cho Chang", + "patronus": "swan", + } + ]); + }); +}); + +//testeando funcion de filtra ancestro// +describe('filterAncestro', () => { + test('is a function', () => { + expect(typeof filterAncestro).toBe('function'); + }); + + test('should return "half-blood" for filter "ancestry"', () => { + expect(filterAncestro(dataAncestro, "half-blood" )).toEqual([{ + "name": 'Severus Snape', + "ancestry": 'half-blood', + } + ]); + }); +}); + +//testeando funcion de filtra nucleo varita// +describe('filterNucleo', () => { + test('is a function', () => { + expect(typeof filterNucleo).toBe('function'); + }); + + test('should return "phoenix feather" for filter "wand.core"', () => { + expect(filterNucleo(dataNucleo, "phoenix feather" )).toEqual([{ + "name": "Harry Potter", + "wand": { + "core": "phoenix feather", + } + } + ]); + }); +}); + + +//testeando funcion de filtra casa Enemigo// +describe('filterCasaEnemigo', () => { + test('is a function', () => { + expect(typeof filterCasaEnemigo).toBe('function'); + }); + + test('should return "Gryffindor" for filter "house"', () => { + expect(filterCasaEnemigo(dataCasaEnemigo, "Gryffindor" )).toEqual([{ + "name": 'Neville Longbottom', + "house": 'Gryffindor', + } + ]); + }); +}); + + +//testeando funcion de filtra ancestro Enemigo// +describe('filterAncestroEnemigo', () => { + test('is a function', () => { + expect(typeof filterAncestroEnemigo).toBe('function'); + }); + + test('should return "pure-blood" for filter "ancestry"', () => { + expect(filterAncestroEnemigo(dataAncestroEnemigo, "pure-blood" )).toEqual([{ + "name": 'Ginny Weasley', + "ancestry": 'pure-blood', + } + ]); + }); +}); + + +//testeando funcion de filtra especie// +describe('filterEspecie', () => { + test('is a function', () => { + expect(typeof filterEspecie).toBe('function'); + }); + + test('should return "cat" for filter "species"', () => { + expect(filterEspecie(dataEspecie, "cat" )).toEqual([{ + "name": 'Mrs Norris', + "species": 'cat', + } + ]); + }); +}); + + +//testeando funcion de hechizo enemigo// +describe('filterHechizoEnemigo', () => { + test('is a function', () => { + expect(typeof filterHechizoEnemigo).toBe('function'); + }); + + test('should return "persian cat" for filter "patronus"', () => { + expect(filterHechizoEnemigo(dataHechizoEnemigo, "persian cat" )).toEqual([{ + "name": 'Dolores Umbridge', + "patronus": 'persian cat', + } + ]); + }); +}); + + +/*describe('anotherExample', () => { + test('is a function', () => { + expect(typeof anotherExample).toBe('function'); + }); + + test('returns `anotherExample`', () => { + expect(anotherExample()).toBe('OMG'); + }); +});*/ + + + +/*import { example, anotherExample } from '../src/data.js'; describe('example', () => { @@ -20,4 +389,4 @@ describe('anotherExample', () => { test('returns `anotherExample`', () => { expect(anotherExample()).toBe('OMG'); }); -}); +});*/