diff --git a/README.md b/README.md index e2a913eb..a213b685 100644 --- a/README.md +++ b/README.md @@ -1,118 +1,140 @@ -# Data Lovers - +# PROYECT DATA LOVERS +*** ## Í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. Preámbulo](#1-Preámbulo) +* [2. Resumen Proyecto](#2-Resumen-de-proyecto) +* [3. Componentes del proyecto ](#3-Componentes-del-proyecto ) +* [4. Investigacion UX](#4-Investigacion-UX) +* [5. Diseño de la Interfaz de Usuario](#5-objetivos-de-aprendizaje) +* [6. Implementación de la Interfaz de Usuario](#6-implementacion-de-la-interfaz-de-usuario) +* [7. Resultado del proyecto](#7-Resultado-del-proyecto) +* [8. Visualización del Proyecto](#8-Resultado-del-proyecto) *** -## 1. Preámbulo - -Según [Forbes](https://www.forbes.com/sites/bernardmarr/2018/05/21/how-much-data-do-we-create-every-day-the-mind-blowing-stats-everyone-should-read), -el 90% de la data que existe hoy ha sido creada durante los últimos dos años. -Cada día generamos 2.5 millones de terabytes de datos, una cifra sin -precedentes. - -No obstante, los datos por sí mismos son de poca utilidad. Para que esas -grandes cantidades de datos se conviertan en **información** fácil de leer para -los usuarios, necesitamos entender y procesar estos datos. Una manera simple de -hacerlo es creando _interfaces_ y _visualizaciones_. - -En la siguiente imagen, podrás ver cómo con la data que que se ve en la parte -izquierda se puede construir una interfaz amigable y entendible por 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 +# 1. Preámbulo +🙋💬 Hola somos Yanet y Yohana...Bienvenidos al mundo Ghibli de nuestro proyecto Data Lovers! Antes de empezar, queremos explicar que Si hay algo que caracteriza el anime de este siglo XXI es la influencia que estudio Ghibli y Hayao Miyazaki han tenido en él. Prácticamente todos los directores de renombre se sienten influidos por sus películas, lo que nos ha dado un anime de calidad indiscutible. Nuestra página te muestra 20 posters de films con detalles acerca del director, productor, descripción entre otros, te hará recordar los grandes hitos del estudio: ecología, monstruos, humanismo, viajes a mundos inimaginables, ternura e imaginación. Te invitamos a recordar estas piezas de arte y animarte a que las veas por primera vez o verlas nuevamente. -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. +Encontrarás más información en: https://es.wikipedia.org/wiki/Studio_Ghibli , https://www.ghibli.jp/ , https://www.netflix.com/pe/browse/genre/81227213. -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). +# 2. Resumen de Proyecto +El proyecto consiste en la construcción de una página web que se adapte a diversos formatos de pantallas. +Nuestro objetivo es crear un sitio web llamado "Ghibli Dreams" donde los usuarios puedan encontrar un directorio de 20 películas del Studio Ghibli, incluyendo información detallada como el año de lanzamiento, el director, el productor y otras características relevantes. Queremos proporcionar a los usuarios una fuente confiable y completa de información sobre las películas de Studio Ghibli en un solo lugar. -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. +El proyecto se ha desarrollado utilizando HTML, CSS y Javascript basada en data de formato Json. Como versión final nuestra página web permite visualizar la data, filtrarla, ordenarla y ver el cálculo agregado. -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. +# 3. Componentes del proyecto +**3.1 Objetivo General:** +Realizar una interfaz que me permita visualizar los posters con informacion de los films de Studios Ghibli desde cualquier dispositivo. -Estos son datos que te proponemos: +**3.2 Objetivos específicos:** +* Definir las necesidades del usuario para poder determinar los componentes que contendrá la interfaz. +* Maquetación de la página web. +* Creación de Historias de Usuario. +* Revisión de Objetivos de aprendizaje. -* [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) +## Presentación + ![screen1](src/img/portada.png) -* [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) +*** +# 4.Investigación UX +Nuestro proceso creativo consta de: +## Historias de usuario +Para desarrollar "Ghibli Dreams", las historias de usuario son el primer paso para construir la web. +se ha identificado las siguientes necesidades y requerimientos de los usuarios, expresados en forma de historias de usuario: + +### Historia N°1: "Yo como usuario, quiero poder ver una página web donde se visualicen las imágenes de los films, los títulos de las películas y el año de estreno producidas por Studios Ghibli." + +* Definición de terminado: + Se ha implementado una función que mostrará los 20 posters. + La historia se testeó a 5 usuarios reales y se hicieron los cambios resultantes del testeo. + La página debe ser responsive. En versión mobile debe mostrar un listado de 20 pokemon. +* Criterios de aceptación: + Las y los usuarios verán una galería de 20 posters ordenada. + El usuario podrá hacer uso del scroll para ver los demás posters. + +### Historia N°2: "Yo como usuario, quiero poder buscar y explorar las 20 películas de Studio Ghibli disponibles filtrar los films producidas por cada productor. +* Criterios de aceptación: + Las y los usuarios verán un buscador donde podrán escribir el nombre del film y encontrar un boton desplegable donde se filtre por productor a buscar. + El usuario podrá hacer la búsqueda de otro poster usando el buscador. + En caso del filtrado por productor solo se mostrará lo seleccionado. + +* Definición de terminado: +El buscador arrojará las coincidencias. +La galería debe mostrar los posters según la búsqueda. +Hacer el test para comprobar si llama a todos los posters. +La historia se testeó en usuarios reales y se hicieron los cambios resultantes del testeo. + +### Historia N°3: "Yo como usuario, quiero revisar el listado de películas por orden alfabético" +* Definición de terminado: + Al dar clic al botón "order" debe mostrar las opciones de orden de la A-Z y Z-A. + Los posters del film que se muestren debe ordenarse según A-Z o Z-A. + Hacer el test para comprobar si ordena correctamente. + Se testeó en usuarios reales y se hicieron los cambios resultantes del testeo. + +* Criterios de aceptación: + Los y las usuarias verán un menú desplegable para ordenar los posters alfabéticamente. + Al dar clic, el menú desplegable muestra las opciones A-Z y Z-A. Podrán escoger entre las 2 opciones. + Según la opción escogida, la galería se actualizarán para encontrar al poster del film deseado. + +### Historia N°4: "Yo como usuario, quiero conocer el porcentaje de los personajes por especie, género y rating de los 20 films de Studio Ghibli." +* Definición de terminado: Se incluyen tanto el porcentaje por especie dividido en: humano vs no huamano, por género: femenino vs masculino por rating de las peliculas: debajo del 89% y por encima o igual a 89% hechas por el estudio Ghibli. + +* Criterios de aceptación: Que los porcentajes se muestren de acuerdo al promedio por especie, género y rating. + **** +## 5. Diseño de la Interfaz de Usuario +Fotos del prototipo de baja fidelidad📱: + +### Prototipo idea en papel y lápiz + ![Idea en papel](src/img/img_papelylapiz.jpg) +### Prototipo de baja fidelidad +![Idea en papel](src/img/baja_fidelidad.png) + + **** +### Prototipo de alta fidelidad +Nos dividimos los prototipos de alta fidelidad: una trabajó la versión de escritorio y la otra trabajó la versión mobile. + Después del Test de Usuario como dupla decidimos modificar algunos elementos a partir del feedback recibido. + Finalmente nos basamos en el prototipo ya modificado para dar paso a la estructura del HTML y CSS. + +### Prototipo en alta fidelidad versión escritorio +Fotos del prototipo de alta fidelidad📱: +![Idea en Figma](src/img/figma_escritorio.png) +### Prototipo en alta fidelidad versión para móvil + ![screen1](src/img/prototipo_movil.png) + + **** +### Testeo en usuarios +Se realizó testeo con usuarios entre 15 a 40 años, quienes indican que los colores siguen la identidad gráfica del estudio Ghibli, que es agradable e intuitiva. Como sugerencia nos indicaron cambiaramos la imagen que iba en la portada. +*** -* [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) +## 6. Implementación de la Interfaz de Usuario (HTML/CSS/JS) +La implementación consta en: -* [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) +* HTML: Muestra la data en una interfaz mediante listas. +Permite a la usuaria interactuar para obtener la infomación que necesita. -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. +* CSS: Se agregaron estilos a cada sección correspondiente. La interfaz sigue los fundamentos del Visual Design. -## 3. Objetivos de aprendizaje +Es responsive, se visualiza sin problemas desde distintos tamaños de pantallas. -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. +* JavaScript: se encuentra una hoja con nombre data.js la cual contiene toda la lógica y las funciones de la web, la cual se exporta a otra hoja con nombre de main.js, que contiene toda la conexión con el DOM y sus eventos para que el usuario pueda interactuar con ella. ### HTML -- [ ] **Uso de HTML semántico** - +- [✔] **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** - +- [✔] **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** - +- [✔] **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) @@ -120,10 +142,8 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/)

-- [ ] **Uso de flexbox en CSS** - +- [✔] **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) @@ -131,29 +151,23 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t ### Web APIs -- [ ] **Uso de selectores del DOM** - +- [✔] **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)** - +- [✔] **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** - +- [✔] **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) @@ -164,10 +178,8 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t ### JavaScript -- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos** - -- [ ] **Arrays (arreglos)** - +- [✔] **Diferenciar entre tipos de datos primitivos y no primitivos** +- [✔] **Arrays (arreglos)**

Links

* [Arreglos](https://curriculum.laboratoria.la/es/topics/javascript/04-arrays) @@ -179,55 +191,44 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t * [Array.prototype.reduce() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)

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

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

-- [ ] **Variables (declaración, asignación, ámbito)** - +- [✔] **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)** - +- [✔] **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)** - +- [✔] **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)** - +- [✔] **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)** - +- [✔] **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)** +- [✔] **Módulos de ECMAScript (ES Modules)**
Links

@@ -235,381 +236,52 @@ Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en t * [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)** +- [✔] **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** +- [✔] **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)** +- [✔] **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ñ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** -- [ ] **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 +## 7. Resultado del proyecto +**7.1 Interacción del usuario con la página:** +El objetivo principal del usuario es la de poder visualizar las 20 películas producidas por Studios Ghibli por lo que contendrá las diguientes funciones; -#### Prototipo de baja fidelidad +* Visualización de las portadas de las películas con sus respectivos nombres. +* Filtro de películas por productores +* Ordenado de películas de forma ascendente y descendente. +* Datos estadísticos en formato de Datos curiosos acerca de las películas. -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). +Secuencia de uso de la interfaz; -## 6. Hacker edition + - Al ingresar a la página web, se deberá visualizar todas las portadas de las películas con sus respectivos nombres. + - Si el usuario desea solamente conocer las películas producidas por un determinado productor, podrá filtrarlas haciendo click en el botón de "Producers" la cual mostrará una lista desplegable donde se visualizará todos los productores a elegir o ingresar el nombre del film en el buscador. + - Si el usuario desea poder ordenar de forma ascendente o descente las películas, podrá hacerlo haciendo click en el botón de "Order". + - Si el usuario desea conocer algunas curiosidades acerca de la película, podrá hacerlo haciendo click en "Curiositis". -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. +**7.2 Interacción visual del usuario con la página:** +La página web deberá ser amigable a la percepción visual del usuario, por lo que se optó en; -Features/características extra sugeridas: +* Usar una paleta de colores neutros para no causar conflicto con los poster coloridos de las películas. +* Se hizo responsive para múltiples dispositivos. -* En lugar de consumir la data estática brindada en este repositorio, puedes - consumir la data de forma dinámica, cargando un archivo JSON por medio de - `fetch`. La carpeta `src/data` contiene una versión `.js` y una `.json` de - de cada set datos. -* Agregarle a tu interfaz de usuario implementada visualizaciones gráficas. Para - ello te recomendamos explorar librerías de gráficas como - [Chart.js](https://www.chartjs.org/) - o [Google Charts](https://developers.google.com/chart/). -* 100% Coverage - -## 7. Consideraciones técnicas - -La lógica del proyecto debe estar implementada completamente en JavaScript -(ES6), HTML y CSS. En este proyecto NO está permitido usar librerías o -frameworks, solo [vanilla JavaScript](https://medium.com/laboratoria-how-to/vanillajs-vs-jquery-31e623bbd46e), -con la excepción de librerías para hacer gráficas (charts); ver -[_Parte opcional_](#6-hacker-edition) más arriba. - -El _boilerplate_ contiene una estructura de archivos como punto de partida así -como toda la configuración de dependencias: - -```text -. -├── EXTRA.md -├── README.md -├── package.json -├── src -| ├── data (según con qué data trabajes) -| | ├── lol -| | | ├── lol.js -| | | ├── lol.json -| | | └── README.md -| | ├── pokemon -| | | ├── pokemon.js -| | | ├── pokemon.json -| | | └── README.md -| | └── rickandmorty -| | | ├── rickandmorty.js -| | | ├── rickandmorty.json -| | | └── README.md -| | └── athletes -| | | ├── athletes.js -| | | ├── athletes.json -| | | └── README.md -| | └── ghibli -| | | ├── ghibli.js -| | | ├── ghibli.json -| | | └── README.md -| ├── data.js -| ├── index.html -| ├── main.js -| └── style.css -└── test - └── data.spec.js - -directory: 7 file: 20 -``` - -### `src/index.html` - -Como en el proyecto anterior, existe un archivo `index.html`. Como ya sabes, -acá va la página que se mostrará al usuario. También nos sirve para indicar -qué scripts se usarán y unir todo lo que hemos hecho. - -### `src/main.js` - -Recomendamos usar `src/main.js` para todo tu código que tenga que ver con -mostrar los datos en la pantalla. Con esto nos referimos básicamente a la -interacción con el DOM. Operaciones como creación de nodos, registro de -manejadores de eventos (_event listeners_ o _event handlers_), .... - -Esta no es la única forma de dividir tu código, puedes usar más archivos y -carpetas, siempre y cuando la estructura sea clara para tus compañeras. - -En este archivo encontrarás una serie de _imports_ _comentados_. Para _cargar_ -las diferentes fuentes de datos tendrás que _descomentar_ la línea -correspondiente. - -Por ejemplo, si "descomentamos" la siguiente línea: - -```js -// import data from './data/lol/lol.js'; -``` - -La línea quedaría así: - -```js -import data from './data/lol/lol.js'; -``` - -Y ahora tendríamos la variable `data` disponible en el script `src/main.js`. - -### `src/data.js` - -El corazón de este proyecto es la manipulación de datos a través de arreglos -y objetos. - -Te recomendamos que este archivo contenga toda la funcionalidad que corresponda -a obtener, procesar y manipular datos (tus funciones). Por ejemplo: - -* `filterData(data, condition)`: esta función `filter` o filtrar recibiría la - data, y nos retornaría aquellos datos que sí cumplan con la condición. - -* `sortData(data, sortBy, sortOrder)`: esta función `sort` u ordenar - recibe tres parámetros. - El primer parámetro, `data`, nos entrega los datos. - El segundo parámetro, `sortBy`, nos dice con respecto a cuál de los campos de - la data se quiere ordenar. - El tercer parámetro, `sortOrder`, indica si se quiere ordenar de manera - ascendente o descendente. - -* `computeStats(data)`: la función `compute` o calcular, nos permitirá hacer - cálculos estadísticos básicos para ser mostrados de acuerdo a la data - proporcionada. - -Estos nombres de funciones y de parámetros son solamente referenciales, lo que -decidas depende de tu propia implementación. - -Estas funciones deben ser [_puras_](https://medium.com/laboratoria-developers/introducci%C3%B3n-a-la-programaci%C3%B3n-funcional-en-javascript-parte-2-funciones-puras-b99e08c2895d) -e independientes del DOM. Estas funciones serán después usadas desde el archivo -`src/main.js`, al cargar la página, y cada vez que el usuario interactúe (click, -filtrado, ordenado, ...). - -### `src/data` - -En esta carpeta están los datos de las diferentes fuentes. Encontrarás una -carpeta por cada fuente, y dentro de cada carpeta dos archivos: uno con la -extensión `.js` y otro `.json`. Ambos archivos contienen la misma data; la -diferencia es que el `.js` lo usaremos a través de una etiqueta ` - + + + + + + + + + Ghibli Dreams (Data Lovers) + + + + +
+ + + + +
+ +
+
+

WELCOME TO GHIBLI DREAMS

+

Studio Ghibli is a renowned Japanese animation studio known for its enchanting and visually stunning films. + Here are some of their most beloved works.

+

Films

+
+ +
+
+
+ +
+
    +
  • CreatedBy
    • + +
+
+ + + diff --git a/src/main.js b/src/main.js index 71c59f2d..05c802b4 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,162 @@ -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 { getFilmsData, getFilmsByProducer, getFilmsByTitle, getFilmsInOrder, computeStats } from './data.js'; +// declaración de variable que muestra el array de películas al cargar en DOM +const filmsData = getFilmsData(); +loadInitialData(); -console.log(example, data); +const selectProducer = document.getElementById('selectProducer'); +selectProducer.addEventListener('change', (event) => { + const selectedProducer = event.target.value; + const filteredFilms = getFilmsByProducer(selectedProducer); + document.getElementById("root").textContent = ""; + filteredFilms.forEach(data => { + const div = document.createElement('article'); + div.classList.add('card'); + const h2 = document.createElement('h2'); + const img = document.createElement('img'); + const ins = document.createElement('ins'); + const strong = document.createElement('strong'); + const em = document.createElement('em'); + const p = document.createElement('p'); + h2.textContent = data.title; + img.src = data.poster; + ins.textContent = "Producer: " + data.producer; + strong.textContent = "Director: " + data.director; + em.textContent = "Release Date: " + data.release_date; + p.textContent = "Description: " + data.description; + div.appendChild(h2); + div.appendChild(img); + div.appendChild(ins); + div.appendChild(strong); + div.appendChild(em); + div.appendChild(p); + document.getElementById("root"). appendChild(div); + }); +}); + +const searchFilmInput = document.getElementById('searchFilmInput'); +searchFilmInput.addEventListener('input', handleSearch); + +function handleSearch() { + // Filtrar las películas que coincidan con la búsqueda + const filteredFilms = getFilmsByTitle.byNameFilms(filmsData, searchFilmInput.value); + // Llamar a la función para mostrar los resultados filtrados + displayFilms(filteredFilms); +} + +function displayFilms(films) { + const rootElement = document.getElementById('root'); + rootElement.innerHTML = ''; // Limpiar el contenido anterior + films.forEach(film => { + const div = document.createElement('article'); + div.classList.add('card'); + const h2 = document.createElement('h2'); + const img = document.createElement('img'); + const p = document.createElement('p'); + h2.textContent = film.title; + img.src = film.poster; + p.textContent = film.description; + + div.appendChild(h2); + div.appendChild(img); + div.appendChild(p); + rootElement.appendChild(div); + }); +} + +const selectOrder = document.getElementById('selectOrder'); +selectOrder.addEventListener('change', (event) => { + const orderedTitles = event.target.value; + const orderedFilms = getFilmsInOrder(orderedTitles); + document.getElementById("root").textContent = ""; + + orderedFilms.forEach(film => { + const div = document.createElement('article'); + div.classList.add('card'); + const h2 = document.createElement('h2'); + const img = document.createElement('img'); + h2.textContent = film.title; + img.src = film.poster; + div.appendChild(h2); + div.appendChild(img); + document.getElementById("root").appendChild(div); + }); +}); + +const homeBtn = document.getElementById('btnHome'); +homeBtn.addEventListener('click', () => { + document.getElementById("root").textContent = ""; + loadInitialData(); +}); + +function loadInitialData(){ + console.log(document.getElementById("root")); + + filmsData.forEach(data => { + const div = document.createElement('article'); + div.classList.add('card'); + const h2 = document.createElement('h2'); + const img = document.createElement('img'); + h2.textContent = data.title; + img.src = data.poster; + div.appendChild(h2); + div.appendChild(img); + document.getElementById("root").appendChild(div); + }); +} + +const curiositiesBtn = document.getElementById('btnCuriosities'); +curiositiesBtn.addEventListener('click', () => { + document.getElementById("root").textContent = ""; + // mostrar estadisticas + const data = computeStats(filmsData); + stadistics(data); +}); + +//funcion de estadistica y creacion de etiquetas html para la publicacion de datos en la web +function stadistics(films) { + + const rootElement = document.getElementById('root'); + rootElement.innerHTML = ''; // Limpiar el contenido anterior + + const articleContenedor = document.createElement('article'); + articleContenedor.classList.add('articleContenedor'); + + const h2TitleFirst = document.createElement('h2'); + h2TitleFirst.classList.add('h2TitleFirst'); + h2TitleFirst.textContent = 'Curious Facts about the Films of Studio Ghibli' + const divGender = document.createElement('div'); + divGender.classList.add('divGender'); + const pGender = document.createElement('p'); + const spanMale = document.createElement('span'); + spanMale.textContent = films.male; + const spanFemale = document.createElement('span'); + spanFemale.textContent = films.female; + pGender.innerHTML = `Did you know that in the characters of Studio Ghibli films, ${spanMale.textContent} are male characters, and ${spanFemale.textContent} are female characters.`; + + const divCharacters = document.createElement('div'); + divCharacters.classList.add('divCharacters'); + const pCharacters = document.createElement('p'); + const spanHuman = document.createElement('span'); + spanHuman.textContent = films.human; + const spanNoHuman = document.createElement('span'); + spanNoHuman.textContent = films.nonHuman; + pCharacters.innerHTML = `In Studio Ghibli films, ${spanHuman.textContent}, of the characters are humans, while only ${spanNoHuman.textContent} are non-human characters represented by animals and fantastical creatures.`; + + const divAverage = document.createElement('div'); + divAverage.classList.add('divAverage'); + const pAverage = document.createElement('p'); + const spanHighRating = document.createElement('span'); + spanHighRating.textContent = films.ratingBelow90; + const spanLowRating = document.createElement('span'); + spanLowRating.textContent = films.ratingAbove89; + pAverage.innerHTML = `Ghibli films have achieved a record level of acceptance and high ratings in most countries. ${spanHighRating.textContent} of them have received ratings ranging from 89 to 100%, which is a rare achievement for anime production companies, while ${spanLowRating.textContent} have received ratings from 0 to 88%.` ; + + divGender.appendChild(pGender); + divCharacters.appendChild(pCharacters); + divAverage.appendChild(pAverage); + articleContenedor.appendChild(h2TitleFirst); + articleContenedor.appendChild(divGender); + articleContenedor.appendChild(divCharacters); + articleContenedor.appendChild(divAverage); + rootElement.appendChild(articleContenedor); +} diff --git a/src/style.css b/src/style.css index e69de29b..0ddc74a2 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,173 @@ +*{ + margin: 0; + padding: 0; +} +body { + background-color: #eee; + font-family: 'Outfit', sans-serif; + font-family: 'Roboto', sans-serif; + margin-bottom: 50px; + padding-bottom: 10px; +} +/*header*/ +.banner{ + width: 100%; +} + /*navegador*/ + nav { + color: #190808; + display: flex; + flex-wrap: wrap; + justify-content: center; +} +input[type="text"] { + width: 312px; + height: 36px; + border-radius: 10px; + border: 1px solid rgb(248, 248, 248); + box-shadow: 0px 0px 5px 0px #48AEF0; + background-color: rgba(251, 253, 253, 0.709); + margin: 10px 2px 10px 10px; + font-size: 1.3em; + color: rgb(45, 25, 25); + margin-bottom: 3px; + text-align: center; +} +.searchForm2 + { + width: 312px; + height: 36px; + border-radius: 10px; + padding: 0px 20px 0px 20px; + background-color: #48AEF0; + margin: 10px 2px 10px 10px; + font-size: 1.3em; + color: #eee; + margin-bottom: 3px; + text-align: center; + border: 1px solid rgb(248, 248, 248); + box-shadow: 0px 0px 3px 0px rgb(185, 178, 178); + } +/* Titulo y subtítulo */ +h1 { + font-size: 40px; + text-align: center; + margin-bottom: 2rem; + margin: 20px; +} +p { + font-size: 30px; + text-align: center; + margin: 10px; +} +.subtitle{ + font-size: 25px; + color: #eee; + text-align: center; + margin-bottom: 3rem; + background-color:#48AEF0; +} +/* body*/ +img { + width: 80%; + height: auto; +} +.root { + display: flex; + flex-wrap: wrap; + justify-content: center; +} +.card { + display: flex; + flex-direction: column; + align-items: center; + margin: 10px; + padding: 10px; + border: 1px solid #48AEF0; + box-shadow: 2px 2px #48AEF0; + width: 300px; + border-radius: 30px; + padding: 3em 2.5em; + gap:1em; + place-items: center; +} +.card h2 { + font-size: 1.5rem; + margin: 10px; + text-align: center; +} +.card img { + max-width: 100%; + height: auto; + margin: 10px; +} +.card p { + font-size: 1rem; + margin: 10px; + text-align: justify; +} +.card img:hover { + position: relative; + box-shadow: 0px 0px 30px 10px #A9D8F8;; + transition: .5s; + bottom: 15px; +} +/*Estilos de estadistica*/ +.articleContenedor{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; +} +.h2TitleFirst{ + color: rgb(61, 67, 70); + font-size: 2.8em; + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; +} +.divGender, .divCharacters, .divAverage{ + display: flex; + flex-direction: column; + align-items: center; + margin: 10px; + padding: 10px; + border: 1px solid #48AEF0; + box-shadow: 2px 2px #48AEF0; + background-color: aliceblue; + width: 300px; + border-radius: 30px; + padding: 3em 2.5em; + gap:1em; + place-items: center; +} +/*Footer*/ +footer { + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + font-size: 15px; + width: 100%; + height: 44px; + background-color: rgba(32, 30, 36); + position: fixed; + bottom: 0px; +} +.copyright { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin-top: 3px; + margin-bottom: 3px; + text-align: center; + color: rgb(245, 241, 241); +} +@media (max-width:750px) { + .divGender, .divCharacters, .divAverage { + width: 100%; + padding: 2em 1.5em; +} +} +@media (max-width:500px) { + .divGender, .divCharacters, .divAverage { + width: 100%; + padding: 2em 1.5em; +} +} \ No newline at end of file diff --git a/test/data.spec.js b/test/data.spec.js index 09b1f23f..b1243404 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,23 +1,218 @@ -import { example, anotherExample } from '../src/data.js'; +import { getFilmsByTitle, computeStats, getFilmsData, getFilmsByProducer, getFilmsInOrder } from '../src/data.js'; +const data = [ + { + "id": "2baf70d1-42bb-4437-b551-e5fed5a87abe", + "title": "Castle in the Sky", + "description": "The orphan Sheeta inherited a mysterious crystal that links her to the mythical sky-kingdom of Laputa. With the help of resourceful Pazu and a rollicking band of sky pirates, she makes her way to the ruins of the once-great civilization. Sheeta and Pazu must outwit the evil Muska, who plans to use Laputa's science to make himself ruler of the world.", + "director": "Hayao Miyazaki", + "producer": "Isao Takahata", + "poster": "https://static.wikia.nocookie.net/studio-ghibli/images/c/c1/Castle_in_the_Sky.jpg", + "rt_score": "95", + "people": [ + { + "name": "Lusheeta Toel Ul Laputa", + "gender": "Female", + "specie": "Human" + }, + { + "name": "Dola", + "gender": "Female", + "specie": "Human" + }, + ], + }, + { + "id": "58611129-2dbc-4a81-a72f-77ddfc1b1b49", + "title": "My Neighbor Totoro", + "description": "Two sisters move to the country with their father in order to be closer to their hospitalized mother, and discover the surrounding trees are inhabited by Totoros, magical spirits of the forest. When the youngest runs away from home, the older sister seeks help from the spirits to find her.", + "director": "Hayao Miyazaki", + "producer": "Hayao Miyazaki", + "poster": "https://static.wikia.nocookie.net/studio-ghibli/images/d/db/My_Neighbor_Totoro.jpg", + "rt_score": "92", + "people": [ + { + "name": "Henri", + "gender": "Male", + "specie": "Human" + }, + { + "name": "Motro", + "gender": "Male", + "specie": "Human" + }, + ], + }, + { + "id": "45204234-adfd-45cb-a505-a8e7a676b114", + "title": "My Neighbors the Yamadas", + "description": "The Yamadas are a typical middle class Japanese family in urban Tokyo and this film shows us a variety of episodes of their lives. With tales that range from the humourous to the heartbreaking, we see this family cope with life's little conflicts, problems and joys in their own way.", + "director": "Isao Takahata", + "producer": "Toshio Suzuki", + "poster": "https://static.wikia.nocookie.net/studio-ghibli/images/d/db/My_Neighbors_the_Yamadas.jpg", + "rt_score": "80", + "people": [ + { + "name": "Kiki", + "gender": "Female", + "specie": "Witch" + }, + { + "name": "Catbus", + "gender": "Male", + "specie": "Cat" + } + ], + }, +]; -describe('example', () => { - it('is a function', () => { - expect(typeof example).toBe('function'); +describe('getFilmsByTitle', () => { + + it('debería ser un objeto', () => { + expect(typeof getFilmsByTitle).toBe('object'); }); - it('returns `example`', () => { - expect(example()).toBe('example'); + describe('byNameFilms', () => { + + it('deberia ser function', () => { + expect(typeof getFilmsByTitle.byNameFilms).toBe('function'); + }) + + it("debería retornar un array vacio cuando no encuentra coincidencias", () => { + const expectedResult = []; + expect(getFilmsByTitle.byNameFilms(data, "Alicia")).toStrictEqual(expectedResult); + }); + + it("debería retornar un array con films cuando encuentra coincidencias", () => { + const expectedResult = [ + { + "id": "58611129-2dbc-4a81-a72f-77ddfc1b1b49", + "title": "My Neighbor Totoro", + "description": "Two sisters move to the country with their father in order to be closer to their hospitalized mother, and discover the surrounding trees are inhabited by Totoros, magical spirits of the forest. When the youngest runs away from home, the older sister seeks help from the spirits to find her.", + "director": "Hayao Miyazaki", + "producer": "Hayao Miyazaki", + "poster": "https://static.wikia.nocookie.net/studio-ghibli/images/d/db/My_Neighbor_Totoro.jpg", + "rt_score": "92", + "people": [ + { + "name": "Henri", + "gender": "Male", + "specie": "Human" + }, + { + "name": "Motro", + "gender": "Male", + "specie": "Human" + }, + ], + }, + { + "id": "45204234-adfd-45cb-a505-a8e7a676b114", + "title": "My Neighbors the Yamadas", + "description": "The Yamadas are a typical middle class Japanese family in urban Tokyo and this film shows us a variety of episodes of their lives. With tales that range from the humourous to the heartbreaking, we see this family cope with life's little conflicts, problems and joys in their own way.", + "director": "Isao Takahata", + "producer": "Toshio Suzuki", + "poster": "https://static.wikia.nocookie.net/studio-ghibli/images/d/db/My_Neighbors_the_Yamadas.jpg", + "rt_score": "80", + "people": [ + { + "name": "Kiki", + "gender": "Female", + "specie": "Witch" + }, + { + "name": "Catbus", + "gender": "Male", + "specie": "Cat" + } + ], + }, + ]; + expect(getFilmsByTitle.byNameFilms(data, "My")).toStrictEqual(expectedResult); + }); }); }); +describe('computeStats', () => { + it('debería ser una function', () => { + expect(typeof computeStats).toBe('function'); + }); -describe('anotherExample', () => { - it('is a function', () => { - expect(typeof anotherExample).toBe('function'); + it('deberia retornar los porcentajes de personajes femeninos y masculinos', () => { + const expectedResult = { + human: '67%', + nonHuman: '33%', + female: '50%', + male: '50%', + ratingAbove89: '67%', + ratingBelow90: '33%', + } + expect(computeStats(data)).toEqual(expectedResult); }); +}); - it('returns `anotherExample`', () => { - expect(anotherExample()).toBe('OMG'); +describe('Test para la funcion getFilmsData', () => { + it('Es una funcion que trae los valores especificados', () => { + expect(typeof getFilmsData).toBe('function'); + }); + + it('la funcion getFilmsData Debe devolver un arreglo de objetos con datos de películas', () => { + const filmsData = { + "title": "Castle in the Sky", + "description": "The orphan Sheeta inherited a mysterious crystal that links her to the mythical sky-kingdom of Laputa. With the help of resourceful Pazu and a rollicking band of sky pirates, she makes her way to the ruins of the once-great civilization. Sheeta and Pazu must outwit the evil Muska, who plans to use Laputa's science to make himself ruler of the world.", + "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" + }; + expect(getFilmsData()).toEqual(expect.arrayContaining([expect.objectContaining(filmsData)])); }); }); + +describe('getFilmsByProducer', () => { + it('Es una funcion para filtrar por productores', () => { + expect(typeof getFilmsByProducer).toBe('function'); + }); + + it('La funcion getFilmsByProducer solo debe retornar las peliculas del productor elegido', () => { + const filmsData = { + "title": "Castle in the Sky", + "description": "The orphan Sheeta inherited a mysterious crystal that links her to the mythical sky-kingdom of Laputa. With the help of resourceful Pazu and a rollicking band of sky pirates, she makes her way to the ruins of the once-great civilization. Sheeta and Pazu must outwit the evil Muska, who plans to use Laputa's science to make himself ruler of the world.", + "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" + }; + expect(getFilmsByProducer("Isao Takahata")).toContainEqual(filmsData); + }); + it('La funcion getFilmsByProducer devuelve un array con las peliculas del productor escogido', () => { + //expect(typeof getFilmsByProducer("Isao Takahata")).toEqual('Array'); + expect(typeof getFilmsByProducer("Isao Takahata")).toEqual('object'); + }); +}); + +describe('getFilmsInOrder', () => { + it('Es una funcion para ordenar alfabeticamente las peliculas', () => { + expect(typeof getFilmsInOrder).toBe('function'); + }); + + it('La funcion getFilmsInOrder debe ordenar las peliculas de la A-Z', () => { + const orderedFilms = getFilmsInOrder("A-Z"); + const titleFirstFilm = orderedFilms[0].title; + const titleLastFilm = orderedFilms[orderedFilms.length - 1].title; + expect(titleFirstFilm).toBe("Castle in the Sky"); + expect(titleLastFilm).toBe("Whisper of the Heart"); + }); + it('La funcion getFilmsInOrder debe ordenar las peliculas de la Z-A', () => { + const orderedFilms = getFilmsInOrder("Z-A"); + const titleFirstFilm = orderedFilms[0].title; + const titleLastFilm = orderedFilms[orderedFilms.length - 1].title; + expect(titleFirstFilm).toBe("Whisper of the Heart"); + expect(titleLastFilm).toBe("Castle in the Sky"); + }); +}); + + + + +