diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..00fc85d --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "references.preferredLocation": "view" +} \ No newline at end of file diff --git a/README.md b/README.md index a45b7d5..21828d0 100644 --- a/README.md +++ b/README.md @@ -1,623 +1,115 @@ -# Data Lovers +

DATA GHIBLI LOVERS
Proyecto desarrollado por Francis Carrasco y Bárbara Barrios Fulquet

-## Índice +## Í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) +[1. Resúmen del proyecto](#1-resúmen-del-proyecto)
+[2. Entrevistas](#2-entrevistas)
+[3. Historias de usuarix](#3-historias-de-usuarix)
+[4. Prototipados](#4-prototipados)
+[5. Diseño](#5-diseño)
+[6. Tests](#6-)
+[7. Links](#7-links) *** -## 1. Preámbulo +## 1. RESÚMEN DEL PROYECTO +Data Ghibli Lovers es una aplicación para que lxs usuarixs tengan una aproximación a la historia, filmografía y personajes de las animaciones de Studio Ghibli. -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 las -usuarias, al lado derecho. - -![pokemon-data-to-ui](https://user-images.githubusercontent.com/12631491/218505816-c6d11758-9de4-428f-affb-2a56ea4d68c4.png) - -## 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) -

- -- [ ] **Variables (declaración, asignación, ámbito)** - -
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) -

- -- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)** - -
Links

- - * [Estructuras condicionales y repetitivas](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/01-conditionals-and-loops) - * [Tomando decisiones en tu código — condicionales - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/conditionals) -

- -- [ ] **Uso de bucles/ciclos (while, for, for..of)** - -
Links

- - * [Bucles (Loops)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/02-loops) - * [Bucles e iteración - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Loops_and_iteration) -

- -- [ ] **Funciones (params, args, return)** - -
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)** - -
Links

- - * [Empezando con Jest - Documentación oficial](https://jestjs.io/docs/es-ES/getting-started) -

- -- [ ] **Módulos de ECMAScript (ES Modules)** - -
Links

- - * [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)** - -- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)** - -- [ ] **Diferenciar entre expresiones (expressions) y sentencias (statements)** - -### Control de Versiones (Git y GitHub) - -- [ ] **Git: Instalación y configuración** - -- [ ] **Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)** - -- [ ] **Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)** - -- [ ] **GitHub: Creación de cuenta y repos, configuración de llaves SSH** - -- [ ] **GitHub: Despliegue con GitHub Pages** - -
Links

- - * [Sitio oficial de GitHub Pages](https://pages.github.com/) -

- -- [ ] **GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)** - -### Centrado en el usuario - -- [ ] **Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro** - -### Diseño de producto - -- [ ] **Crear prototipos de alta fidelidad que incluyan interacciones** - -- [ ] **Seguir los principios básicos de diseño visual** - -### Investigación - -- [ ] **Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad** - -
Links

- - * [Intro a testeos usabilidad](https://coda.io/@bootcamp-laboratoria/contenido-ux/test-de-usabilidad-15) - * [Pruebas con Usuarios 1 — ¿Qué, cuándo y para qué testeamos?](https://eugeniacasabona.medium.com/pruebas-con-usuarios-1-qu%C3%A9-cu%C3%A1ndo-y-para-qu%C3%A9-testeamos-7c3a89b4b5e7) -

- -## 4. Consideraciones generales - -* Este proyecto se debe resolver en duplas. -* El rango de tiempo estimado para completar el proyecto es de 3 a 4 Sprints. -* El proyecto será entregado subiendo tu código a GitHub (commit/push) y la - interfaz será desplegada usando [GitHub Pages](https://pages.github.com/). - -## 5. Criterios de aceptación mínimos del proyecto - -Los criterios para considerar que has completado este proyecto son: - -### Definición del producto - -Documenta brevemente tu trabajo en el archivo `README.md` de tu repositorio, -contándonos cómo fue tu proceso de diseño y cómo crees que el producto resuelve -el problema (o problemas) que tiene tu usuario. - -### Historias de usuario - -Una vez que entiendas las necesidades de tus usuarios, escribe las [Historias -de Usuario](https://es.wikipedia.org/wiki/Historias_de_usuario) que representen -todo lo que el usuario necesita hacer/ver. Las **Historias de Usuario** deben -ser el resultado de tu proceso de investigación o _research_ de tus usuarios. - -Asegúrate de incluir la definición de terminado (_definition of done_) y los -Criterios de Aceptación para cada una. - -En la medida de lo posible, termina una historia de usuario antes de pasar -a la siguiente (Cumple con Definición de Terminado + Criterios de Aceptación). - -### Diseño de la Interfaz de Usuario - -#### Prototipo de baja fidelidad - -Durante tu trabajo deberás haber hecho e iterado bocetos (_sketches_) de tu -solución usando papel y lápiz. Te recomendamos tomar fotos de todas las -iteraciones que hagas, que las subas a tu repositorio y las menciones en tu -`README.md`. - -#### Prototipo de alta fidelidad - -Lo siguiente es diseñar tu Interfaz de Usuario (UI por sus siglas en inglés - -_User Interface_). Para eso debes aprender a utilizar alguna herramienta de -diseño visual. Nosotros te recomendamos [Figma](https://www.figma.com/) que es -una herramienta que funciona en el navegador y, además, puedes crear una cuenta -gratis. Sin embargo, eres libre de utilizar otros editores gráficos como -Illustrator, Photoshop, PowerPoint, Keynote, etc. - -El diseño debe representar el _ideal_ de tu solución. Digamos que es lo que -desearías implementar si tuvieras tiempo ilimitado para trabajar. Además, tu -diseño debe seguir los fundamentos de _visual design_. - -#### Testeos de usabilidad - -Durante el reto deberás hacer _tests_ de usabilidad con distintos usuarios, y -en base a los resultados, deberás iterar tus diseños. Cuéntanos -qué problemas de usabilidad detectaste a través de los _tests_ y cómo los -mejoraste en tu propuesta final. - -### Implementación de la Interfaz de Usuario (HTML/CSS/JS) - -Luego de diseñar tu interfaz de usuario deberás trabajar en su implementación. -**No** es necesario que construyas la interfaz exactamente como la diseñaste. -Tu tiempo de hacking es escaso, así que deberás priorizar - -Como mínimo, tu implementación debe: - -1. Mostrar la data en una interfaz: puede ser un card, una tabla, una lista, - etc. -2. Permitir al usuario interactuar para obtener la infomación que necesita. -3. Ser _responsive_, es decir, debe visualizarse sin problemas desde distintos - tamaños de pantallas: móviles, tablets y desktops. -4. Que la interfaz siga los fundamentos de _visual design_. - -### Pruebas unitarias - -El _boilerplate_ de este proyecto no incluye Pruebas Unitarias (_tests_), así es -que tendrás que escribirlas tú para las funciones encargadas de _procesar_, -_filtrar_ y _ordenar_ la data, así como _calcular_ estadísticas. - -Tus _pruebas unitarias_ deben dar una cobertura del 70% de _statements_ -(_sentencias_), _functions_ (_funciones_), _lines_ (_líneas_), y _branches_ -(_ramas_) del archivo `src/data.js` que contenga tus funciones y está detallado -en la sección de [Consideraciones técnicas](#srcdatajs). - -## 6. Hacker edition - -Las secciones llamadas _Hacker Edition_ son **opcionales**. Si **terminaste** -con todo lo anterior y te queda tiempo, intenta completarlas. Así podrás -profundizar y/o ejercitar más sobre los objetivos de aprendizaje del proyecto. - -Features/características extra sugeridas: - -* En lugar de consumir la data estática brindada en este repositorio, puedes - consumir la data de forma dinámica, cargando un archivo JSON por medio de - `fetch`. La carpeta `src/data` contiene una versión `.js` y una `.json` de - de cada set datos. -* Agregarle a tu interfaz de usuario implementada visualizaciones gráficas. Para - ello te recomendamos explorar librerías de gráficas como - [Chart.js](https://www.chartjs.org/) - o [Google Charts](https://developers.google.com/chart/). -* 100% Coverage - -## 7. Consideraciones técnicas - -La lógica del proyecto debe estar implementada completamente en JavaScript -(ES6), HTML y CSS. En este proyecto NO está permitido usar librerías o -frameworks, solo [vanilla JavaScript](https://medium.com/laboratoria-how-to/vanillajs-vs-jquery-31e623bbd46e), -con la excepción de librerías para hacer gráficas (charts); ver -[_Parte opcional_](#6-hacker-edition) más arriba. - -El _boilerplate_ contiene una estructura de archivos como punto de partida así -como toda la configuración de dependencias: - -```text -. -├── EXTRA.md -├── README.md -├── package.json -├── src -| ├── data (según con qué data trabajes) -| | ├── lol -| | | ├── lol.js -| | | ├── lol.json -| | | └── README.md -| | ├── pokemon -| | | ├── pokemon.js -| | | ├── pokemon.json -| | | └── README.md -| | └── rickandmorty -| | | ├── rickandmorty.js -| | | ├── rickandmorty.json -| | | └── README.md -| | └── athletes -| | | ├── athletes.js -| | | ├── athletes.json -| | | └── README.md -| | └── ghibli -| | | ├── ghibli.js -| | | ├── ghibli.json -| | | └── README.md -| ├── data.js -| ├── index.html -| ├── main.js -| └── style.css -└── test - └── data.spec.js - -directory: 7 file: 20 -``` - -### `src/index.html` - -Como en el proyecto anterior, existe un archivo `index.html`. Como ya sabes, -acá va la página que se mostrará al usuario. También nos sirve para indicar -qué scripts se usarán y unir todo lo que hemos hecho. - -### `src/main.js` - -Recomendamos usar `src/main.js` para todo tu código que tenga que ver con -mostrar los datos en la pantalla. Con esto nos referimos básicamente a la -interacción con el DOM. Operaciones como creación de nodos, registro de -manejadores de eventos (_event listeners_ o _event handlers_), .... - -Esta no es la única forma de dividir tu código, puedes usar más archivos y -carpetas, siempre y cuando la estructura sea clara para tus compañeras. - -En este archivo encontrarás una serie de _imports_ _comentados_. Para _cargar_ -las diferentes fuentes de datos tendrás que _descomentar_ la línea -correspondiente. - -Por ejemplo, si "descomentamos" la siguiente línea: - -```js -// import data from './data/lol/lol.js'; -``` - -La línea quedaría así: - -```js -import data from './data/lol/lol.js'; -``` - -Y ahora tendríamos la variable `data` disponible en el script `src/main.js`. - -### `src/data.js` - -El corazón de este proyecto es la manipulación de datos a través de arreglos -y objetos. - -Te recomendamos que este archivo contenga toda la funcionalidad que corresponda -a obtener, procesar y manipular datos (tus funciones). Por ejemplo: +*** -* `filterData(data, condition)`: esta función `filter` o filtrar recibiría la - data, y nos retornaría aquellos datos que sí cumplan con la condición. +## 2. ENTREVISTAS +Para entender y enfocar el proyecto en las necesidades de lxs usuarixs realizamos las siguiente encuesta: -* `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. +1. ¿Conoces la filmografía de Studio Ghibli? -* `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. +![Encuesta - Primera pregunta](src/images/Read.me%20-%20Encuesta%20(1).png) -Estos nombres de funciones y de parámetros son solamente referenciales, lo que -decidas depende de tu propia implementación. +2. ¿Qué información esperas encontrar en nuestra web? -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, ...). +![Encuesta - Segunda pregunta](src/images/Read.me%20-%20Encuesta%20(2).png) -### `src/data` +3. ¿Qué características esperas encontrar en nuestra web? -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 Ghibli Lovers + + + + + + +
+ +
+ + +
+

+

HISTORIA

+
+ +
+

Fundado en 1985, el estudio está dirigido por el galardonado director Hayao Miyazaki, y + hasta 2018 estuvo + dirigido por Miyazaki junto a su amigo y mentor, Isao Takahata, fallecido en ese año. Sus orígenes datan de + 1984, con la película Nausicäa del Valle del Viento, la cual comenzó como un manga en una publicación de la + revista Tokuma Shoten. Tokuma era la compañía "madre" de Ghibli, y cedió a Disney los derechos de video y + distribución de varias películas; entre ellas La princesa Mononoke y El viaje de Chihiro. El compositor Joe + Hisaishi ha creado la banda sonora para muchas de las películas del Studio Ghibli. +
+ Debido a la fama de los estudios se abrió en las afueras de Tokio el Museo Ghibli. El 1 de septiembre de 2013, + el director de cine y cofundador de la compañía, Hayao Miyazaki, anunció su retirada a través de un comunicado + oficial. +
+ El 3 de agosto de 2014, Toshio Suzuki, productor del estudio y uno de los fundadores del estudio, anunciaba que + clausuraban su sección de producción de largometrajes, siendo El recuerdo de Marnie, su última película. Uno de + los factores que provocaron esta decisión fue la retirada del director de cine Hayao Miyazaki, otro de los + fundadores del estudio, que según las declaraciones, su salida supuso un duro golpe; junto con la jubilación del + cineasta, se cree que la regular recepción de taquilla de El cuento de la princesa Kaguya, la última obra + dirigida por Isao Takahata, fue también un motivo. El Studio Ghibli siguió con sus licencias hasta acabar un + proceso de reestructuración. + El 10 de agosto de 2017, el estudio reabrió sus puertas. +
+ Cabe destacar que las películas de dicho estudio han adquirido muchos premios, entre ellas cinco de sus + películas fueron nominadas al Óscar a la producción cinematográfica de animación más destacada; las cintas + nominadas fueron: El viaje de Chihiro (2001), El castillo ambulante (2004), El recuerdo de Marnie (2014), El + viento se levanta (2013) y El cuento de la princesa Kaguya (2013). A pesar de estas numerosas nominaciones, tan + solo El viaje de Chihiro fue galardonada con el Óscar. +
+ Además de las películas ya mencionadas, muchas otras contaron con un gran éxito en los cines, como puede ser el + caso de El castillo ambulante y Ponyo y el secreto de la sirenita. A lo largo de todas sus películas han contado + con grandes voces para el doblaje en inglés, como por ejemplo Patrick Stewart, Anne Hathaway, Elle Fanning, Liam + Neeson, Matt Damon, entre otros. +
+ El 3 de junio de 2020, se anunció oficialmente el lanzamiento de Earwig y la bruja, la primera película en + animación del estudio hecha por ordenador, siendo estrenada el 30 de diciembre del mismo año. +
+ El 1 de noviembre de 2022, el parque temático Studio Ghibli, fue lanzado. Se caracterizó por disponer de muschas + zonas verdes y carecer de atracciones mecánicas. +

+
+ +
+

FILMOGRAFÍA

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

PERSONAJES

+
+ +
+ +
+
+
+
+ + +
+ + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 71c59f2..4dc6602 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,196 @@ -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'; +/* global Set */ +import data from "./data/ghibli/ghibli.js"; +import { filtroInformacionDirector, filtroInformacionProductor, filtroInformacionEspecie, ordenInformacion, calculoInformacion } from './data.js'; -console.log(example, data); +// SELECCION SECCION + +//HISTORIA +const botonHistoria = document.getElementById("botonHistoria"); +const seccionHistoria = document.getElementById("historia"); +botonHistoria.addEventListener("click", function () { + document.getElementById("header").style.display = "none"; + seccionHistoria.style.display = "block"; +}); +const botonPersonajes = document.getElementById("botonPersonajes"); +const seccionPersonajes = document.getElementById("personajes"); +botonPersonajes.addEventListener("click", function () { + document.getElementById("header").style.display = "none"; + seccionPersonajes.style.display = "block"; +}); +const botonFilmografia = document.getElementById("botonFilmografia"); +const seccionFilmografia = document.getElementById("filmografia"); +botonFilmografia.addEventListener("click", function () { + document.getElementById("header").style.display = "none"; + seccionFilmografia.style.display = "block"; +}); + +// VOLVER AL HOME +const volver = document.getElementById("botonVolver"); +function volverInicio() { + window.location.reload(); +} +volver.addEventListener("click", volverInicio); + +const volver2 = document.getElementById("botonVolver2"); +function volverInicio2() { + window.location.reload(); +} +volver2.addEventListener("click", volverInicio2); + +const volver3 = document.getElementById("botonVolver3"); +function volverInicio3() { + window.location.reload(); +} +volver3.addEventListener("click", volverInicio3); + +// FILMOGRAFIA +const matrizFilmografia = document.querySelector("#grillaFilmografia"); +const films = data.films; +for (let i = 0; i < films.length; i++) { + const listaFilmografia = ` +
+ + + +
+

${films[i].title}

+ +

${films[i].description}

+
+
`; + matrizFilmografia.insertAdjacentHTML("beforeend", listaFilmografia); +} +export function nuevaListaFilmografia(films) { + matrizFilmografia.innerHTML = ""; + for (let i = 0; i < films.length; i++) { + const listadoFilmografia = ` +
+ + + +
+

${films[i].title}

+ +

${films[i].description}

+
+
`; + matrizFilmografia.insertAdjacentHTML("beforeend", listadoFilmografia); + } +} + +// FILMOGRAFIA - Directores +const directores = document.querySelector("#filtroDirector"); +const a = new Set([]); +data.films.forEach(x => { + a.add(x.director); +}); + +// FILMOGRAFIA - Directores - Limpiar +const limpiarDirector = [...a]; +for (let i = 0; i < limpiarDirector.length; i++) { + const listaFilmografia = ` + `; + directores.insertAdjacentHTML("beforeend", listaFilmografia); +} +directores.addEventListener('change', (e) => { + const directorSeleccionado = filtroInformacionDirector(films, e.target.value); + nuevaListaFilmografia(directorSeleccionado); +}) + +// FILMOGRAFIA - Productores +const productores = document.querySelector("#filtroProductor"); +const b = new Set([]); +data.films.forEach(x => { + b.add(x.producer); +}); + +// FILMOGRAFIA - Productores - Limpiar +const limpiarProductor = [...b]; +for (let i = 0; i < limpiarProductor.length; i++) { + const listaFilmografia = ` + `; + productores.insertAdjacentHTML("beforeend", listaFilmografia); +} +productores.addEventListener('change', (e) => { + const productorSeleccionado = filtroInformacionProductor(films, e.target.value); + nuevaListaFilmografia(productorSeleccionado); +}) + +// FILMOGRAFIA - Ordenamiento +const orden = document.getElementById("filtroOrden"); +orden.addEventListener('change', (e) => { + const ordenSeleccionado = ordenInformacion(e.target.value, films); + nuevaListaFilmografia(ordenSeleccionado); +}) + +// PERSONAJES +export const listaPersonajes = []; +for (let i = 0; i < data.films.length; i++) { + for (let j = 0; j < data.films[i].people.length; j++) { + listaPersonajes.push(data.films[i].people[j]); + } +} +const matrizPersonajes = document.querySelector("#grillaPersonajes"); +for (let i = 0; i < listaPersonajes.length; i++) { + const listaFilmografia = ` +
+ + + +
+

${listaPersonajes[i].name.toUpperCase()}

+
    +
  • Género: ${listaPersonajes[i].gender === 'Male' ? 'Masculino' : 'Femenino'}
    • +
  • Edad: ${listaPersonajes[i].age} años
    • +
  • Especie: ${listaPersonajes[i].specie}
    • +
+
+
`; + matrizPersonajes.insertAdjacentHTML("beforeend", listaFilmografia); +} + +function personajes(listaPersonajes) { + matrizPersonajes.innerHTML = ""; + for (let i = 0; i < listaPersonajes.length; i++) { + const listadoFilmografia = ` +
+ + + +
+

${listaPersonajes[i].name.toUpperCase()}

+
    +
  • Género: ${listaPersonajes[i].gender === 'Male' ? 'Masculino' : 'Femenino'}
    • +
  • Edad: ${listaPersonajes[i].age} años
    • +
  • Especie: ${listaPersonajes[i].specie}
    • +
+
+
`; + matrizPersonajes.insertAdjacentHTML("beforeend", listadoFilmografia); + + } + +} +const especiePersonajes = document.querySelector("#filtroEspecie"); +const c = new Set([]); +listaPersonajes.forEach(x => { + c.add(x.specie); +}); + +// PERSONAJES - Limpiar personajes +const limpiarPersonajes = [...c]; +for (let i = 0; i < limpiarPersonajes.length; i++) { + const listaFilmografia = ` +`; + especiePersonajes.insertAdjacentHTML("beforeend", listaFilmografia); +} + +// PERSONAJES - Calculo +especiePersonajes.addEventListener('change', (e) => { + const especieSeleccionada = filtroInformacionEspecie(listaPersonajes, e.target.value); + const cantidadEspecie = calculoInformacion(data.films, e.target.value); + const mensajeCantidadEspecie = `
`; + const resultadoCantidadEspecie = document.getElementById("numeroEspecies"); + resultadoCantidadEspecie.innerHTML = mensajeCantidadEspecie; + personajes(especieSeleccionada); +}) \ No newline at end of file diff --git a/src/style.css b/src/style.css index e69de29..d985248 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,794 @@ +* { + margin: 0; + padding: 0; +} + +h1 { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-weight: bold; + font-size: 60px; + color: #ffffff; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + text-align: center; +} + +h2 { + font-family: Arial, Helvetica, sans-serif; + background-color: #7F8462; + color: #ffffff; + padding: 10px 20px; + font-size: 16px; + border: 3px solid #C9B8A7; + text-align: right !important; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + width: 200px; + height: 40px; + display: flex; + align-items: center; + justify-content: flex-end; + margin: 40px; + margin-left: 0; + box-sizing: border-box; +} + +body { + background-image: url(images/background.gif); + background-size: cover; + background-repeat: no-repeat; +} + +img { + max-width: 100%; + height: auto; +} + +.textoHistoria { + font-family: Arial, Helvetica, sans-serif; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + color: #ffffff; + text-align: justify; + background-color: #7F8462; + opacity: 1; + font-size: 15px; + border-radius: 20px; + border: 3px solid #C9B8A7; + width: 820px; + height: 250px; + padding: 40px; + margin: auto; + overflow: auto; +} + +.filmografia, +.personajes { + /* Contenedor de toda la sección */ + max-width: 1000px; + max-height: 455px; +} + +.filtrosFilmografia, +.filtroPersonajes { + max-width: 1425px; + max-height: 50px; +} + +.filtroDirector, +.filtroProductor, +.filtroOrden, +.filtroEspecie { + font-family: Arial, Helvetica, sans-serif; + width: 180px; + height: 50px; + padding: 10px; + border: 3px solid #4C362E; + border-radius: 8px; + background-color: #C9B8A7; + font-size: 15px; + font-weight: bold; + color: #4C362E; + position: absolute; + margin-left: -65px; + margin-top: auto; +} + +.filtroDirector, +.filtroEspecie { + left: 50%; +} + +.filtroProductor { + left: 65%; +} + +.filtroOrden { + left: 35%; +} + +.imagenesFilmografia { + width: 1200px; + margin: 90px auto 0; + text-align: center; +} + +.imagenesPersonajes { + width: 1400px; + margin: 90px auto 0; + text-align: center; +} + +.peliculas { + /* Contenedor imágen, título, año y descripción */ + font-family: Arial, Helvetica, sans-serif; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + color: #ffffff; + text-align: justify; + background-color: #7F8462; + opacity: 1; + font-size: 15px; + border-radius: 20px; + border: 3px solid #C9B8A7; + width: 500px; + height: 200px; + padding: 20px; + margin: 15px; + margin-top: 70px; + display: inline-flex; + vertical-align: top; + position: relative; +} + +.posterPelicula { + max-width: 200px; + max-height: 200px; + float: left; + margin-right: 20px; +} + +.personaje { + /* Contenedor imágen, género, edad y especie */ + font-family: Arial, Helvetica, sans-serif; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + color: #ffffff; + text-align: justify; + background-color: #7F8462; + opacity: 1; + font-size: 15px; + border-radius: 20px; + border: 3px solid #C9B8A7; + width: 330px; + height: 200px; + padding: 20px; + margin: 15px; + margin-top: 30px; + display: inline-flex; + flex-flow: row nowrap; + justify-content: space-between; + float: left; + overflow: auto; +} + +.posterPersonaje { + max-width: 200px; + max-height: 200px; + object-fit: cover; + float: left; +} + +.descripcionPelicula, +.datosPersonaje { + /* Descripción */ + font-family: Arial, Helvetica, sans-serif; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + font-size: 12px; + color: #ffffff; + text-align: justify; + margin-top: 15px; + max-width: 350px; + max-height: 100px; +} + +img { + max-width: 100%; + height: auto; + border-radius: 15px 50px; +} + +#numeroEspecies { + font-family: Arial, Helvetica, sans-serif; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + font-size: 17px; + color: #ffffff; + text-align: justify; + margin-top: 15px; + max-width: 350px; + max-height: 100px; +} + +/* BULLET */ +ul { + list-style: none; +} + +/* BOTONES SELECCION SECCIONES */ +button { + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + background-color: #7F8462; + color: #ffffff; + padding: 10px 20px 10px; + font-size: 16px; + border: 3px solid #C9B8A7; + text-align: right !important; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + width: 200px; + height: 40px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: flex-end; + margin: 10px; + margin-left: 0; + clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%); +} + +button:hover { + background-color: rgb(76, 54, 46); +} + +button:first-of-type { + margin-top: 305px; +} + +/* BOTONES VOLVER */ +#botonVolver, +#botonVolver2, +#botonVolver3 { + text-align: center !important; + width: 110px; + justify-content: flex-start; + margin: 10px; + margin-left: 0; + float: left; + clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%); +} + +#botonVolver:hover, +#botonVolver2:hover, +#botonVolver3:hover { + background-color: #4C362E; +} + +/* MOSTRAR-OCULTAR SECCIONES */ +#header { + display: auto; +} + +#historia { + display: none; +} + +#filmografia { + display: none; +} + +#personajes { + display: none; +} + + +/* RESPONSIVE TABLET */ + +@media screen and (max-width: 700px) { + + h1 { + position: absolute; + top: 30%; + left: 50%; + transform: translate(-50%, -50%); + font-weight: bold; + font-size: 42px; + color: #ffffff; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + text-align: center; + } + + h2 { + font-family: Arial, Helvetica, sans-serif; + background-color: #7F8462; + color: #ffffff; + padding: 10px 20px; + font-size: 14px; + border: 3px solid #C9B8A7; + text-align: right !important; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + width: 150px; + height: 30px; + display: flex; + align-items: center; + justify-content: flex-end; + margin: 40px; + margin-left: 0; + box-sizing: border-box; + } + + body { + background-image: url(./Imagenes/Tablet\ \(720x1280\).png); + background-repeat: no-repeat; + background-size: auto; + height: auto; + min-height: 100vh; + } + + .textoHistoria { + font-family: Arial, Helvetica, sans-serif; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + color: #ffffff; + text-align: justify; + margin: 40px; + background-color: #7F8462; + opacity: 1; + font-size: 13px; + border-radius: 20px; + border: 3px solid #C9B8A7; + width: 450px; + height: 300px; + padding: 20px; + overflow: auto; + } + + .filmografia, + .personajes { + /* Contenedor de toda la sección */ + max-width: 700px; + max-height: 455px; + } + + .filtrosFilmografia, + .filtroPersonajes { + max-width: 700px; + max-height: 50px; + } + + .filtroDirector, + .filtroProductor, + .filtroOrden, + .filtroEspecie { + font-family: Arial, Helvetica, sans-serif; + width: 120px; + height: 40px; + padding: 10px; + border: 3px solid #4C362E; + border-radius: 8px; + background-color: #C9B8A7; + font-size: 11px; + font-weight: bold; + color: #4C362E; + position: absolute; + margin-left: -65px; + margin-top: auto; + } + + .filtroDirector { + left: 90%; + top: 22%; + } + + .filtroEspecie { + left: 90%; + top: 13%; + } + + .filtroProductor { + left: 90%; + top: 15%; + } + + .filtroOrden { + left: 90%; + top: 8%; + } + + .imagenesFilmografia { + width: 1000px; + margin: 50px auto 0; + text-align: center; + } + + .imagenesPersonajes { + width: 1400px; + margin: 50px auto 0; + text-align: center; + } + + .peliculas { + /* Contenedor imágen, título, año y descripción */ + font-family: Arial, Helvetica, sans-serif; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + color: #ffffff; + text-align: justify; + background-color: #7F8462; + opacity: 1; + font-size: 15px; + border-radius: 20px; + border: 3px solid #C9B8A7; + width: 500px; + height: 220px; + padding: 20px; + margin: 20px; + margin-top: 80px; + display: block; + position: relative; + } + + .posterPelicula { + max-width: 250px; + max-height: 200px; + float: left; + margin-right: 10px; + } + + .personaje { + /* Contenedor imágen, género, edad y especie */ + font-family: Arial, Helvetica, sans-serif; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + color: #ffffff; + text-align: justify; + background-color: #7F8462; + opacity: 1; + font-size: 13px; + border-radius: 20px; + border: 3px solid #C9B8A7; + width: 290px; + height: 180px; + padding: 20px; + margin: 16.5px; + margin-top: 20px; + display: flex; + overflow: auto; + clear: both; + } + + .posterPersonaje { + max-width: 180px; + max-height: 200px; + float: left; + object-fit: fill; + } + + img { + max-width: 100%; + height: auto; + border-radius: 15px 50px; + } + + .descripcionPelicula, + .datosPersonaje { + /* Descripción */ + font-family: Arial, Helvetica, sans-serif; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + font-size: 12.5px; + color: #ffffff; + text-align: justify; + margin-top: 15px; + max-width: 500px; + max-height: 200px; + } + + #numeroEspecies { + font-family: Arial, Helvetica, sans-serif; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + font-size: 14px; + color: #ffffff; + text-align: justify; + margin-top: 15px; + max-width: 350px; + max-height: 100px; + } + + /* BULLET */ + ul { + list-style: none; + } + + /* BOTONES SELECCION SECCIONES */ + button { + font-family: Arial, Helvetica, sans-serif; + background-color: #7F8462; + color: #ffffff; + padding: 10px 20px 10px; + font-size: 15px; + border: 3px solid #C9B8A7; + text-align: right !important; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + width: 170px; + height: 35px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: flex-end; + margin: 10px; + margin-left: 0; + clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%); + } + + button:hover { + background-color: rgb(76, 54, 46); + } + + button:first-of-type { + margin-top: 305px; + } + + /* BOTONES VOLVER */ + #botonVolver, + #botonVolver2, + #botonVolver3 { + text-align: center !important; + width: 110px; + justify-content: flex-start; + margin: 10px; + margin-left: 0; + float: left; + clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%); + position: top; + } + +} + +/* RESPONSIVE SMARTPHONE */ + +@media screen and (max-width: 500px) { + + h1 { + position: absolute; + top: 30%; + left: 50%; + transform: translate(-50%, -50%); + font-weight: bold; + font-size: 25px; + color: #ffffff; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + text-align: center; + } + + h2 { + font-family: Arial, Helvetica, sans-serif; + background-color: #7F8462; + color: #ffffff; + padding: 10px 20px; + font-size: 12px; + border: 3px solid #C9B8A7; + text-align: right !important; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + width: 120px; + height: 30px; + display: flex; + align-items: center; + justify-content: flex-end; + margin: 40px; + margin-left: 0; + box-sizing: border-box; + } + + body { + background-image: url(./Imagenes/Smartphone\ \(640x900\).png); + background-repeat: no-repeat; + background-size: auto; + height: auto; + min-height: 100vh; + } + + .textoHistoria { + font-family: Arial, Helvetica, sans-serif; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + color: #ffffff; + text-align: justify; + margin: 30px; + background-color: #7F8462; + opacity: 1; + font-size: 13px; + border-radius: 20px; + border: 3px solid #C9B8A7; + width: 260px; + height: 340px; + padding: 20px; + overflow: auto; + } + + .textoPorcentaje { + font-family: Arial, Helvetica, sans-serif; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + color: #ffffff; + text-align: justify; + + } + + .filtroDirector, + .filtroProductor, + .filtroOrden, + .filtroEspecie { + font-family: Arial, Helvetica, sans-serif; + width: 100px; + height: 40px; + padding: 10px; + border: 2px solid #4C362E; + border-radius: 8px; + background-color: #C9B8A7; + font-size: 9px; + font-weight: bold; + color: #4C362E; + position: absolute; + margin-left: -65px; + margin-top: auto; + } + + .filtroDirector { + left: 90%; + top: 22%; + } + + .filtroEspecie { + left: 90%; + top: 13%; + } + + .filtroProductor { + left: 90%; + top: 15%; + } + + .filtroOrden { + left: 90%; + top: 8%; + } + + .imagenesFilmografia { + width: 1200px; + margin: 90px auto 0; + text-align: center; + } + + .imagenesPersonajes { + width: 1400px; + margin: 90px auto 0; + text-align: center; + } + + .peliculas { + /* Contenedor imágen, título, año y descripción */ + font-family: Arial, Helvetica, sans-serif; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + color: #ffffff; + text-align: justify; + background-color: #7F8462; + opacity: 1; + font-size: 15px; + border-radius: 20px; + border: 3px solid #C9B8A7; + width: 270px; + height: 320px; + padding: 20px; + margin: 13px; + margin-top: 30px; + display: block; + position: relative; + overflow: auto; + } + + .posterPelicula { + max-width: 250px; + max-height: 200px; + float: left; + margin-right: 10px; + } + + .personaje { + /* Contenedor imágen, género, edad y especie */ + font-family: Arial, Helvetica, sans-serif; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + color: #ffffff; + text-align: justify; + background-color: #7F8462; + opacity: 1; + font-size: 15px; + border-radius: 20px; + border: 3px solid #C9B8A7; + width: 270px; + height: 200; + padding: 15px; + margin: 15x; + margin-top: 25px; + display: flex; + vertical-align: top; + position: relative; + flex-direction: row; + align-items: center; + } + + .posterPersonaje { + max-width: 120px; + max-height: 150px; + object-fit: cover; + float: left; + } + + .descripcionPelicula, + .datosPersonaje { + /* Descripción */ + font-family: Arial, Helvetica, sans-serif; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + font-size: 15px; + color: #ffffff; + text-align: justify; + margin-top: 15px; + margin-left: 10px; + max-width: 500px; + max-height: 100px; + } + + #numeroEspecies { + font-family: Arial, Helvetica, sans-serif; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + font-size: 12px; + color: #ffffff; + text-align: justify; + margin-top: 15px; + max-width: 350px; + max-height: 100px; + } + + /* BULLET */ + ul { + list-style: none; + } + + /* BOTONES SELECCION SECCIONES */ + button { + font-family: Arial, Helvetica, sans-serif; + background-color: #7F8462; + color: #ffffff; + padding: 10px 20px 10px; + font-size: 14px; + border: 3px solid #C9B8A7; + text-align: right !important; + text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); + width: 150px; + height: 30px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: flex-end; + margin: 10px; + margin-left: 0; + clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%); + } + + button:hover { + background-color: rgb(76, 54, 46); + } + + button:first-of-type { + margin-top: 305px; + } + + /* BOTONES VOLVER */ + #botonVolver, + #botonVolver2, + #botonVolver3 { + text-align: center !important; + font-size: 14px; + font-weight: bold; + width: 100px; + height: 30px; + justify-content: flex-start; + margin: 10px; + margin-left: 0; + float: left; + clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%); + position: top; + } + +} \ No newline at end of file diff --git a/test/data.spec.js b/test/data.spec.js index 09b1f23..45c4e45 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,23 +1,100 @@ -import { example, anotherExample } from '../src/data.js'; +import { filtroInformacionDirector, filtroInformacionProductor, ordenInformacion, fechaAscendente, fechaDescendente, calculoInformacion } from '../src/data.js'; +const baseDatos = [{ title: "Castle in the Sky", director: "Hayao Miyazaki", producer: "Isao Takahata", release_date: "1986" }, + { title: "My Neighbor Totoro", director: "Hayao Miyazaki", producer: "Hayao Miyazaki", release_date: "1988" }] -describe('example', () => { - it('is a function', () => { - expect(typeof example).toBe('function'); +describe('Test filtroInformacionDirector', () => { + it('filtroInformacionDirector es una función', () => { + expect(typeof filtroInformacionDirector).toBe('function'); }); + it('filtra información por Director', () => { + const peliculas = [{ title: "Castle in the Sky", director: "Hayao Miyazaki", producer: "Isao Takahata", release_date: "1986" }, { title: "My Neighbor Totoro", director: "Hayao Miyazaki", producer: "Hayao Miyazaki", release_date: "1988" }]; + expect(filtroInformacionDirector(baseDatos, 'Hayao Miyazaki')).toEqual(peliculas); + }) +}); - it('returns `example`', () => { - expect(example()).toBe('example'); +describe('Test filtroInformacionProductor', () => { + it('filtroInformacionProductor es una función', () => { + expect(typeof filtroInformacionProductor).toBe('function'); }); + it('filtra información por Productor', () => { + const peliculas = [ + { title: "Castle in the Sky", director: "Hayao Miyazaki", producer: "Isao Takahata", release_date: "1986" }]; + expect(filtroInformacionProductor(baseDatos, 'Isao Takahata')).toEqual(peliculas); + }) }); +describe('Test ordenInformacion', () => { + it('ordenInformacion es una función', () => { + expect(typeof ordenInformacion).toBe('function'); + }); + it('ordenar películas por fecha', () => { + const orden = [{ title: "Castle in the Sky", director: "Hayao Miyazaki", producer: "Isao Takahata", release_date: "1986" }, + { title: "My Neighbor Totoro", director: "Hayao Miyazaki", producer: "Hayao Miyazaki", release_date: "1988", }]; + expect(ordenInformacion("Ascendente", baseDatos)).toEqual(orden); + }); + it('ordenar películas por fecha', () => { + const orden = [{ title: "My Neighbor Totoro", director: "Hayao Miyazaki", producer: "Hayao Miyazaki", release_date: "1988" }, + { title: "Castle in the Sky", director: "Hayao Miyazaki", producer: "Isao Takahata", release_date: "1986", }]; + expect(ordenInformacion("Descendente", baseDatos)).toEqual(orden); + }) +}); -describe('anotherExample', () => { - it('is a function', () => { - expect(typeof anotherExample).toBe('function'); +describe('Test fechaAscendente', () => { + it('fechaAscendente es una función', () => { + expect(typeof fechaAscendente).toBe('function'); + }); + it('comparar películas por fecha', () => { + const ascendente = -1; + expect(fechaAscendente({ release_date: "1986" }, { release_date: "1988" })).toEqual(ascendente); }); + it('comparar películas por fecha', () => { + const ascendente = 1; + expect(fechaAscendente({ release_date: "1988" }, { release_date: "1986" })).toEqual(ascendente); + }) +}); - it('returns `anotherExample`', () => { - expect(anotherExample()).toBe('OMG'); +describe('Test fechaDescendente', () => { + it('fechaDescendente es una función', () => { + expect(typeof fechaDescendente).toBe('function'); + }); + it('comparar películas por fecha', () => { + const descendente = 1; + expect(fechaDescendente({ release_date: "1986" }, { release_date: "1988" })).toEqual(descendente); }); + it('comparar películas por fecha', () => { + const descendente = -1; + expect(fechaDescendente({ release_date: "1988" }, { release_date: "1986" })).toEqual(descendente); + }) }); + +const baseDatosPersonajes = [{ + "id": "2baf70d1-42bb-4437-b551-e5fed5a87abe", + "title": "Castle in the Sky", + "description": "La huérfana Sheeta heredó un misterioso cristal que la conecta con el mítico reino celestial de Laputa. Con la ayuda del ingenioso Pazu y una banda animada de piratas del cielo, ella se dirige hacia las ruinas de la que fue una gran civilización. Sheeta y Pazu deben superar al malvado Muska, quien planea utilizar la ciencia de Laputa para convertirse en el gobernante del mundo.", + "director": "Hayao Miyazaki", + "producer": "Isao Takahata", + "poster": "https://static.wikia.nocookie.net/studio-ghibli/images/c/c1/Castle_in_the_Sky.jpg", + "release_date": "1986", + "rt_score": "95", + "people": [ + { + "id": "fe93adf2-2f3a-4ec4-9f68-5422f1b87c01", + "name": "Pazu", + "img": "https://static.wikia.nocookie.net/studio-ghibli/images/8/8b/Pazu.jpg", + "gender": "Male", + "age": "13", + "eye_color": "Black", + "hair_color": "Brown", + "specie": "Human" + }] +}] +describe('Test calculoInformacion', () => { + it('calculoInformacion es una función', () => { + expect(typeof calculoInformacion).toBe('function'); + }); + it('calculoInformacion devuelve un número', () => { + const numero = 1; + expect(calculoInformacion(baseDatosPersonajes, "Human")).toEqual(numero); + }); +}); \ No newline at end of file