diff --git a/Pantalla 1.png b/Pantalla 1.png new file mode 100644 index 00000000..895745df Binary files /dev/null and b/Pantalla 1.png differ diff --git a/Pantalla 2 (1).png b/Pantalla 2 (1).png new file mode 100644 index 00000000..886a10df Binary files /dev/null and b/Pantalla 2 (1).png differ diff --git a/Prototipo.png b/Prototipo.png new file mode 100644 index 00000000..17a9f02a Binary files /dev/null and b/Prototipo.png differ diff --git a/README.md b/README.md index 4942fff0..36caa45a 100644 --- a/README.md +++ b/README.md @@ -2,655 +2,49 @@ ## Índice -* [1. Preámbulo](#1-preámbulo) -* [2. Resumen del proyecto](#2-resumen-del-proyecto) -* [3. Objetivos de aprendizaje generales](#3-objetivos-de-aprendizaje-generales) -* [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. Hito Opcional](#6-hito-opcional) -* [7. Consideraciones técnicas](#7-consideraciones-técnicas) -* [8. Objetivos de aprendizaje](#8-objetivos-de-aprendizaje) -* [9. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias) -* [10. Para considerar Project Feedback](#9-para-considerar-project-feedback) -*** - -## 1. Preámbulo - -Según [Forbes](https://www.forbes.com/sites/bernardmarr/2018/05/21/how-much-data-do-we-create-every-day-the-mind-blowing-stats-everyone-should-read), -el 90% de la data que existe hoy ha sido creada durante los últimos dos años. -Cada día generamos 2.5 millones de terabytes de datos, una cifra sin -precedentes. - -No obstante, los datos por sí mismos son de poca utilidad. Para que esas -grandes cantidades de datos se conviertan en **información** fácil de leer para -los usuarios, necesitamos entender y procesar estos datos. Una manera simple de -hacerlo es creando _interfaces_ y _visualizaciones_. - -En la siguiente imagen, podrás ver cómo con la data que que se ve en la parte -izquierda se puede construir una interfaz amigable y entendible por el usuario -al lado derecho. - -![json-interfaz](https://lh4.googleusercontent.com/Tn-RPXS26pVvOTdUzRT1KVaJ-_QbFs9SpcGLxSPE43fgbHaXtFgMUInuDt7kV41DkT1j8Tt29V0LxQW7SMtC6digOIhfTXSBKdwI08wUwhD3RAqlwy0hjfmhZ2BFe91mtmCSEqysfgk) - -## 2. Resumen del proyecto - -En este proyecto **construirás una _página web_ para visualizar un -_conjunto (set) de datos_** que se adecúe a lo que descubras que tu usuario -necesita. - -Como entregable final tendrás una página web que permita **visualizar la data, -filtrarla, ordenarla y hacer algún cálculo agregado**. Con cálculo agregado -nos referimos a distintos cálculos que puedes hacer con la data para mostrar -información aún más relevante para los usuarios (promedio, el valor máximo -o mínimo, etc). - -Esta vez te proponemos una serie de datos de diferentes _temáticas_ para que -explores y decidas con qué temática te interesa trabajar. Hemos elegido -específicamente estos sets de datos porque creemos que se adecúan bien a esta -etapa de tu aprendizaje. - -Una vez que definas tu área de interés, buscar entender quién es tu usuario -y qué necesita saber o ver exactamente; luego podrás construir la interfaz que -le ayude a interactuar y entender mejor esos datos. - -Estos son datos que te proponemos: - -* [Pokémon](src/data/pokemon/pokemon.json): - En este set encontrarás una lista con los 251 Pokémon de la región de Kanto - y Johto, junto con sus respectivas estadísticas usadas en el juego - [Pokémon GO](http://pokemongolive.com). - - [Investigación con jugadores de Pokémon Go](src/data/pokemon/README.md) - -* [League of Legends - Challenger leaderboard](src/data/lol/lol.json): - Este set de datos muestra la lista de campeones en una liga del - juego League of Legends (LoL). - - [Investigación con jugadores de LoL](src/data/lol/README.md) - -* [Rick and Morty](src/data/rickandmorty/rickandmorty.json). - Este set nos proporciona la lista de los personajes de la serie Rick and - Morty. [API Rick and Morty](https://rickandmortyapi.com). - - [Investigación con seguidores de Rick and Morty](src/data/rickandmorty/README.md) - -* [Juegos Olímpicos de Río de Janeiro](src/data/athletes/athletes.json). - Este set nos proporciona la lista de los atletas que ganaron medallas en las - olímpiadas de Río de Janeiro. - - [Investigación con interesados en juegos olímpicos de Río de Janeiro](src/data/athletes/README.md) - -* [Studio Ghibli](src/data/ghibli/ghibli.json). - En este set encontrarás una lista de las animaciones y sus personajes del - [Studio Ghibli](https://ghiblicollection.com/). - - [Investigación con seguidores de las animaciones del Studio Ghibli](src/data/ghibli/README.md) - -* [Harry Potter](src/data/harrypotter/harry.json). - En este set encontrarás una lista de los personajes,libros pociones - y hechizos de toda la saga de - [Harry Potter](https://harrypotter.fandom.com). - - [Investigación con seguidoras de Harry Potter](src/data/harrypotter/README.md) - -El objetivo principal de este proyecto es que aprendas a diseñar y construir una -interfaz web donde se pueda visualizar y manipular data, entendiendo lo que el -usuario necesita. - - -## 3. Objetivos de aprendizaje generales - -Como continuación del Proyecto 1, volverás a trabajar sobre fundamentos de JavaScript, objetos y arreglos, manipulación básica del DOM, fundamentos de HTML y CSS. - -Mientras desarrollas este proyecto, te familiarizarás con estos nuevos conceptos: - -- Como trabajar con un juego de data y diseñar una interfaz para visualizar y manipular esta data. -- Uso de Flexbox en CSS para lograr hacer una página web responsiva. -- Arreglos y sus métodos para manipularlos (`filter`, `sort`, `reduce`). -- Como escribir HTML y manipular el DOM de una manera dinámica desde JavaScript. - -## 4. Consideraciones generales - -* Este proyecto se debe resolver en duplas. -* El proyecto será entregado subiendo tu código a GitHub (commit/push) y la - interfaz será desplegada usando [GitHub Pages](https://pages.github.com/). -* Tiempo para completarlo: Toma como referencia 4 semanas. - -## 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). - -#### [Ejemplo de Historia de usuario] - -Yo como usuario [visitante del sitio] quiero poder VER todos lxs personajes/películas/deportistas para familiarizarme. - -**Criterios de Aceptación. Edita/agrega de acuerdo a tu implementación exactamente:** - ->* La UI es responsive (teléfonos y PC). ->* Todos los personajes/películas/deportistas aparecen en una misma vista, en forma ->de grilla (cuadrícula) sin ningún orden en particular. ->* La vista no tiene paginación, se hace scroll desde el primer elemento hasta el último. ->* Cada cuadrícula contiene: -> ->>* Nombre de personaje/película/deportista. ->>* [XXX] ->> ->* Al hacer _click/tap_ en cada cuadrícula sucede [XXX]. -> ->* La UI es exactamente igual al prototipo de alta fidelidad (colores, tamaños de bloques,tipo de letra, tamaño de letra, imágenes, etc. ) - -**Definición de Terminado. Edita/agrega de acuerdo a tu implementación exactamente** - ->* Todo el código está en la rama principal/main del repositorio. -> ->* La página está publicada en Github Pages y es accesible mediante un enlace/link/liga. ->* Cada estudiante del equipo ha hecho _code review_ del código escrito por la(s) otra persona(s). ->* Se hacen pruebas de usabilidad con al menos 2 usuarias y se incorporan las mejoras identificadas en la versió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. Hito Opcional - -Las partes "opcionales" tienen como intención permitirte profundizar un poco más sobre los objetivos de aprendizaje del proyecto. Todo en la vida tiene pros y contras, si **terminaste** con todo lo anterior y te queda tiempo, decide sabiamente si quieres invertir el tiempo en profundizar/perfeccionar o aprender cosas nuevas en el siguiente 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) -| | └── athletes -| | | ├── athletes.js -| | | ├── athletes.json -| | | ├── README.pt-BR.md -| | | └── README.md -| | └── ghibli -| | | ├── ghibli.js -| | | ├── ghibli.json -| | | ├── README.pt-BR.md -| | | └── README.md -| | └── harrypotter -| | | ├── data.js -| | | ├── harry.json -| | | ├── README.pt-BR.md -| | | └── README.md -| | ├── lol -| | | ├── lol.js -| | | ├── lol.json -| | | ├── README.pt-BR.md -| | | └── README.md -| | ├── pokemon -| | | ├── pokemon.js -| | | ├── pokemon.json -| | | ├── README.pt-BR.md -| | | └── README.md -| | └── rickandmorty -| | | ├── rickandmorty.js -| | | ├── rickandmorty.json -| | | ├── README.pt-BR.md -| | | └── README.md -| ├── data.js -| ├── index.html -| ├── main.js -| └── style.css -└── test - └── data.spec.js - -directory: 8 file: 29 -``` - -### `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. +* [1. Resumen del proyecto](#1-resumen-del-proyecto) +* [2. Prototipo de baja fidelidad](#2-prototipo-de-baja-fidelidad) +* [3. Prototipo de alta fidelidad](#3-prototipo-de-alta-fidelidad) +* [4. Hisotrias de usuario](#4-historias-de-ususario) +* [5.Consideraciones finales](#5-consideraciones-finales) -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 ` + diff --git a/src/logo.svg b/src/logo.svg new file mode 100644 index 00000000..22406f06 --- /dev/null +++ b/src/logo.svg @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/main.js b/src/main.js index 71c59f2d..3d380b5c 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,120 @@ -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 objetoghibli from './data/ghibli/ghibli.js'; /*libera nuestra data*/ +import {filterDirector, sortPelis, filterGender} from './data.js'; +// eslint-disable-next-line no-console +//console.log(objetoghibli); + +let showPersonaje = function(personas){ + let newHtml= "" + personas.forEach(function(personaje,index){ + + let templatePelicula =` +
+ img + ${personaje.name} + + +
`; + newHtml+= templatePelicula; + }); + document.getElementById("root").innerHTML = newHtml; + + const showMore = document.getElementsByClassName("showMore"); + const closeButton = document.getElementsByClassName("close-button"); + + for(let i=0 ;i < showMore.length ; i++) { + showMore[i].addEventListener("click", toggleModal); + } + for(let i=0 ; i < closeButton.length ; i++) { + closeButton[i].addEventListener("click",toggleModal); + } +} +//Funcion para mostrar las peliculas +let show = function (dataGhibli){ + let newHtml= "" + dataGhibli.forEach(function(film,index){ + + let templatePelicula =` +
+ poster + ${film.title} + + +
`; + newHtml+= templatePelicula; + }); + document.getElementById("root").innerHTML = newHtml; + + const showMore = document.getElementsByClassName("showMore"); + const closeButton = document.getElementsByClassName("close-button"); + + for(let i=0 ;i < showMore.length ; i++) { + showMore[i].addEventListener("click", toggleModal); + } + for(let i=0 ; i < closeButton.length ; i++) { + closeButton[i].addEventListener("click",toggleModal); + } +} +show(objetoghibli.films); + +//*funcion modal*// +function toggleModal(event) { + let indice = event.target.attributes["data-film-id"].value; + let idModal = "modal-film-"+indice; + document.getElementById (idModal).classList.toggle("show-modal"); + +} +//*sort a-z y z-a*// +const sortSelect = document.getElementById("sort-movies-by"); + +sortSelect.addEventListener("change",() =>{ + let copyData = objetoghibli ; + +switch(sortSelect.value){ + case "a-z": + show(sortPelis(copyData.films)); + break; + case "z-a": + show(sortPelis(copyData.films).reverse()); + break; +} +}); +//*Filtrar por director*// +const filterSelect = document.getElementById("filter-director"); + + filterSelect.addEventListener("change", () =>{ + + + show(filterDirector(objetoghibli.films,filterSelect.value)); + }); + /*Filtrado por gender */ +const filterSelect2 = document.getElementById("filter-gender"); + +filterSelect2.addEventListener("change", () =>{ + + + showPersonaje (filterGender(objetoghibli.films, filterSelect2.value)); +}); + + + + + + + + + -console.log(example, data); diff --git a/src/pelis.html b/src/pelis.html new file mode 100644 index 00000000..de387ac6 --- /dev/null +++ b/src/pelis.html @@ -0,0 +1,46 @@ + + + + + +Data Lovers + + + +
+
+logo + +
+
+
+ + + +
+
+
+ + + \ No newline at end of file diff --git a/src/prueba.js b/src/prueba.js new file mode 100644 index 00000000..575831ae --- /dev/null +++ b/src/prueba.js @@ -0,0 +1,3 @@ + +// eslint-disable-next-line no-console +console.log("prueba"); diff --git a/src/style.css b/src/style.css index e69de29b..4a7831f5 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,238 @@ +*{ +margin: 0; +padding: 0; +} +body{ + background-image: url("totoro.png"); + background-repeat: no-repeat; + background-attachment: fixed; + background-position:bottom right; + background-size: 25%; + +} +.main { + width: 1920px; + +} +header{ + width: 100%; + overflow:hidden; + background-color: #6C9B98; + margin-bottom: 20px; + align-items: center; +} +header .logo { + color:#f2f2f2; + font-size:50px; + line-height:200px; + float:left; + padding-top: 50px; +} + +.cardPrincipal img{ + display: flex; + justify-content: center; + align-items: center; + margin-left: auto; + margin-right: auto; + border-radius: 20px; + object-fit:fill; + max-width: 230px; + width: 100%; + height: auto; + box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px; + gap: 20px; +} + +header nav { + float:right; + line-height:80px; +} + +header nav a { +display:inline-block; +font-family:'Poppins', sans-serif ; +color:white; +text-decoration:none; +padding:10px 20px; +justify-content: center; +line-height:normal; +font-size:25px; +font-weight:bold; +-webkit-transition:all 500ms ease; +-o-transition:all 500ms ease; +transition:all 500ms ease; +} + +header nav a:hover { + background:#f56f3a; + border-radius:50px; +} +h1 { + display: flex; + font-family: 'Poppins', sans-serif; + font-size: 62px; + padding: 10px; + padding-left: 30px; + margin-top: 70px; +} + +.parrafo{ + display: flex; + flex-direction:column; + font-family:'Poppins', sans-serif; + font-size: 36px; + text-align: left; + vertical-align: left; + text-align: justify; + margin: 0; + padding: 0 2rem; + position: absolute; + top: 35%; +} +.moreinfo{ + max-width: 242px; + padding: 10px 100px; + border-style:none; + border-radius:11px; + font-size: 20px; + font-weight: bold; + letter-spacing: 2px; + background:#428682; + color:white; + margin: 15px auto; + cursor: pointer; + text-decoration: none; + margin-top: 60px; + +} +.cardPrincipal{ + display: flex; + width: 20vw; + padding: 1rem; + font-family: 'Poppins', sans-serif; + font-weight: bold; + flex-direction:column; + justify-content: center; + align-items: center; + gap: 20px; + +} +#sort-movies-by{ + flex-wrap: nowrap; + padding: 10px; + background-color:#0d4642; + border-style: none; + border-radius: 5px; + font-family:'Poppins', sans-serif ; + color:white; + cursor: pointer; + margin-left: 118px; + margin-top: 60px; + +} +#filter-director{ + flex-wrap: nowrap; + padding: 10px; + background-color:#0d4642; + border-style: none; + border-radius: 5px; + font-family:'Poppins', sans-serif ; + color:white; + cursor: pointer; + margin-left: 50px; + margin-top: 60px; +} +#filter-gender{ + flex-wrap: nowrap; + padding: 10px; + background-color:#0d4642; + border-style: none; + border-radius: 5px; + font-family:'Poppins', sans-serif ; + color:white; + cursor: pointer; + margin-left: 50px; + margin-top: 60px; +} +#root { + display: flex; + padding: 10px 0px; + flex-wrap: wrap; + justify-content: space-evenly; + margin-top: 30px; + padding-bottom: 20px; + +} +.showMore{ + background-color:#0d4642; + border-style: none; + border-radius: 5px; + font-family:'Poppins', sans-serif ; + color:white; + cursor: pointer; + padding:5px; +} +.modal { + display: none; + flex-direction: column; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; +} + +.modal-content { + position:absolute; + background-color:rgb(204, 226, 245); + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 1rem 1.5rem; + width: 300px; + height: auto; + border-radius: 0.5rem; +} + +.close-button { + float: right; + width: 1.5rem; + line-height: 1.5rem; + text-align: center; + cursor: pointer; + border-radius: 0.25rem; + background-color: lightgray; +} + +.close-button:hover { + background-color: darkgray; +} + +.show-modal { + display: inline; + animation: mymove 2s forwards; + /* opacity: 1; + visibility: visible; + transform: scale(1.0); + transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;*/ +} +@keyframes mymove { + from { + transform: scale(1.1); + opacity: 0; + } + to { + transform: scale(1.0); + opacity: 1; + } + } +/*responsive*/ +@media screen and (max-width: 600px){ + .cardPrincipal { + width: 60%; + } +} + + + \ No newline at end of file diff --git a/src/totoro.png b/src/totoro.png new file mode 100644 index 00000000..a0eeb887 Binary files /dev/null and b/src/totoro.png differ diff --git a/test/data.spec.js b/test/data.spec.js index 09b1f23f..304b4e88 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,23 +1,134 @@ -import { example, anotherExample } from '../src/data.js'; +import { sortPelis , filterDirector, filterGender } from '../src/data.js'; - -describe('example', () => { - it('is a function', () => { - expect(typeof example).toBe('function'); +let sortData = [ +{ + title: "Castle in the Sky", +}, +{ + title: "Kiki's Delivery Service", +}, +]; +let sortDataAZ = [ + { + title: "Castle in the Sky", + }, + { + title: "Kiki's Delivery Service", + }, + ]; + let sortDataZA = [ + { + title:"Kiki's Delivery Service", + }, + { + title: "Castle in the Sky", + }, + ]; +describe('sortPelis', () => { + it('Es una funcion', () => { + expect(typeof sortPelis).toBe('function'); }); - it('returns `example`', () => { - expect(example()).toBe('example'); + it('Debe retornar las películas de ordenadas de A-Z', () => { + expect(sortPelis(sortData)).toEqual(sortDataAZ); }); + + it('Debe retornar las peliculas de Z-A', () => { + expect(sortPelis(sortData).reverse()).toEqual(sortDataZA); + }) + it ("Recorre el array en diferentes casos", () => { + expect(sortPelis([{title:"B"} ,{title: "A"}])).toEqual([{title:"A"} ,{title: "B"}]); + }) }); +// test para filterDirector +let filtradosDirector =[ + { + title: "Castle in The Sky", + director: "Hayao Miyazaki", + }, + { + title:"When Marnie Was There", + director: "Hiromasa Yonebayashi", + }, + { + title:"Kiki's Delivery Service", + director: "Hayao Miyazaki", + }, +]; +let Hayao =[ + { + title: "Castle in The Sky", + director: "Hayao Miyazaki", + }, + { + title:"Kiki's Delivery Service", + director: "Hayao Miyazaki", + }, +]; -describe('anotherExample', () => { - it('is a function', () => { - expect(typeof anotherExample).toBe('function'); - }); +describe("filterDirector", () => { + it ("Es una funcion", () => { + expect (typeof filterDirector).toBe("function"); + }); + it ("retorna una array solo con las peliculas del director HAYAO",() => { + expect(filterDirector(filtradosDirector,"Hayao Miyazaki")).toEqual(Hayao); + }) +}); - it('returns `anotherExample`', () => { - expect(anotherExample()).toBe('OMG'); +//test filterGender +let filtradoGender = [ + { + people: [{ + name: "Lusheeta Toel Ul Laputa", + gender: "Female", + }, + { + name: "Satsuki Kusakabe", + gender: "Female", + }, + { + name: "Romska Palo Ul Laputa", + gender: "Male", + }, + { + name: "Tatsuo Kusakabe", + gender: "Male", + }, + ] + }]; +let femaleGender = [ + { + name: "Lusheeta Toel Ul Laputa", + gender: "Female", + }, + { + name: "Satsuki Kusakabe", + gender: "Female", + }, +]; +let maleGender = [ + { + name: "Romska Palo Ul Laputa", + gender: "Male", + }, + { + name: "Tatsuo Kusakabe", + gender: "Male", + }, +]; +describe ("filterGender",()=>{ + it ("Es una funcion", ()=>{ + expect (typeof filterGender).toBe("function"); + }); + it ("Retorna un array solo con el genero female", () =>{ + expect(filterGender(filtradoGender, "Female")).toEqual(femaleGender); }); + it ("Retorna una array solo con el genero male", () =>{ + expect(filterGender(filtradoGender, "Male")).toEqual(maleGender); + }) }); + + + +