diff --git a/.gitignore b/.gitignore index 072a15b..958fc85 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ *.swp coverage/ node_modules/ + +package-lock.json diff --git a/README.md b/README.md index a45b7d5..c4900cb 100644 --- a/README.md +++ b/README.md @@ -1,623 +1,47 @@ -# Data Lovers -## Índice +**## Proyecto Data Lovers "Pokemon Go para entrenadores"** -* [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) +## Biendenid@s al repositorio de Giselle Cifuentes y Carolina Vera! -*** +Nuestra idea partio pensando en una pagina web de data para los fans de la franquicia de Pokemon. Se escogio la data de Pokemon Go ya que ambas somos usuarias del juego y queriamos indagar mas sobre datos que nos pudieran servir a nosotras y a otros jugadores para poder mejorar nuestro desempeño en el juego. -## 1. Preámbulo +Iniciamos realizando las historias de usuario que surgen de la necesidad de conocer las caracteristicas de cada pokemon. -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. +## Historias de usuario: -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_. +![Historias de Usuario](./src/Extras/IMG/HistoriasDeUsuario.png) -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. +Luego se realizaron distintos prototipos de baja fidelidad de como queriamos que fuera la web en relación a nuestras historias de usuario. Este prototipo se fue modificando hasta llegar a la interfaz que tenemos actualmente. -![pokemon-data-to-ui](https://user-images.githubusercontent.com/12631491/218505816-c6d11758-9de4-428f-affb-2a56ea4d68c4.png) +## Prototipos: -## 2. Resumen del proyecto +__Prototipo Baja Fidelidad:__ +![Prototipo baja](./src/Extras/IMG/Prototipo.png) -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. +__Prototipo Alta Fidelidad:__ +![Prototip alta](./src/Extras/IMG/protAlta.png) -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). +[Has Click aqui para ver el prototipo en Figma](https://www.figma.com/file/PeRrZCA9exMS7emOrTOCbm/Prototipo-alta-fidelidad-data-Pokemon-Go?node-id=0%3A1&t=q0JyDs3WEiaoouoM-1) -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. +De esta forma, hemos avanzado en nuestro proyecto "Pokemon Go para entrenadores" de Data Lovers, esperando ofrecer a los usuarios una herramienta útil y amigable para conocer más sobre los pokémon presentes en el juego. -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. +**1. Descripción del proyecto:** Pokémon GO es un juego de realidad aumentada (RA) en el que los jugadores utilizan sus dispositivos móviles para capturar, entrenar y combatir con Pokémon, criaturas ficticias que aparecen en una variedad de medios de la franquicia de Pokémon. La idea del proyecto es ayudar a los jugadores a tener mas información útil mediante un analisis de datos de facil acceso. -Estos son datos que te proponemos: +**2. Objetivos:** En el marco de nuestro proceso de aprendizaje, nos propusimos como objetivo principal conocer y aplicar diversas funciones en nuestro proyecto. En concreto, nos centramos en la utilización de la función **.filter**, que nos permitió filtrar los datos en función de los tipos de pokémon presentes; la función **.sort**, mediante la cual aprendimos a ordenar los datos alfabéticamente de forma ascendente y descendente; y la función **ComputeStats**, que nos permitió realizar cálculos estadísticos básicos y explorar algunas curiosidades del juego, como el peso de ciertos pokémon. -* [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) +Asimismo, llevamos a cabo pruebas con **Jest** para evaluar la funcionalidad de nuestras funciones y asegurarnos de que cumplían con los requisitos esperados. De esta forma, pudimos avanzar en nuestro proceso de aprendizaje y obtener resultados satisfactorios en nuestro proyecto. -* [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) +**3. Conjunto de datos:** Se nos proporcionó un conjunto de datos con información de 251 pokémon presentes en Pokemon GO. Cada uno de ellos contaba con datos como número de Pokédex, nombre, fortalezas, debilidades, entre otros atributos relevantes. Gracias a esta data, pudimos manipularla y obtener la información necesaria para trabajar en nuestro proyecto. -* [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. Análisis de datos:** En este proyecto, utilizamos el lenguaje de programación JavaScript para analizar los datos de Pokémon GO. No se utilizaron bibliotecas externas para el análisis, sino que se escribieron funciones personalizadas para filtrar, ordenar y calcular estadísticas sobre los datos. -* [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) +**5. Resultados:** Con respecto a nuestras historias de usuario, pudimos ayudar a los jugadores a conocer las fortalezas y debilidades de cada pokémon, lo que les permitirá mejorar sus habilidades en la liga de combate. Además, gracias al cálculo de las estadísticas de peso de los pokémon, hemos descubierto que Snorlax es el pokémon más pesado, con un peso de más de 460 kg, mientras que Blissey es el pokémon promedio en cuanto a peso, con 46 kg. En resumen, nuestro análisis de datos nos ha permitido obtener información valiosa y curiosa acerca de los pokémon en Pokémon GO. -* [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) +**Test de Usabilidad:** Los usuarios identificaron varios problemas relacionados con la usabilidad de la aplicación. Estos son algunos de los problemas que se detectaron: -* [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) +- Los usuarios encontraron que el filtro de tipos de Pokémon no se agrupaba en orden alfabético, sino que solo los Pokémon de la sección "Todos los Pokémon" se ordenaban de esta manera. +- Se encontró un problema en el fondo de pantalla que solo se presentaba en algunos usuarios de iPhone, donde se veía pixelado en algunas secciones. +- En la pantalla principal, en algunos dispositivos, no se logra visualizar la imagen del profesor Oak. +- En dispositivos móviles, se observó que uno de los botones de filtro se salía del margen establecido. -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. - -* `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 ` - - + + + + + + Data Lovers + + + + + +
+ + + + +
+ +
+ +
+ + + +
+ +
+
+

Hola entrenador Pokemon

+

Te damos la bienvenida al emocionante mundo de Pokemon Go!

+ +

Este juego te invita a salir de casa e ir en la búsqueda de pokemons!! + completa tu Pokedex y combate con otros jugadores en la liga de combates Go!

+ +

Nosotras te ayudaremos mostrándote las características de cada pokemon de Kanto y Johto, + ademas en la seccion de curiosidades puedes encontrar el peso de algunos pokemons

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

Selecciona el tipo de Pokémon que necesitas, si quieres verlos todos oprime la pokebola

+
+ logo todos los tipos de pokemon + logo tipo normal + logo tipo lucha + logo tipo volador + logo tipo veneno + logo tipo tierra + logo tipo roca + logo tipo bicho + logo tipo fantasma + logo tipo acero + logo tipo fuego + logo tipo agua + logo tipo planta + logo tipo electrico + logo tipo psiquico + logo tipo hielo + logo tipo dragon + logo tipo siniestro + logo tipo hada +
+ + + +
+
+ +
+ +
+ + + + +
+ +
+ +
+ + + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 71c59f2..17d5446 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,316 @@ -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 { pokemonData, sortPokemon, computeStats } from "./data.js"; +// import data Pokemon +import data from "./data/pokemon/pokemon.js"; + +//secciones +const homeSecction = document.getElementById("homeSecction"); +const pokedexSecction = document.getElementById("pokedexSecction"); +const extraSecction = document.getElementById("extraSecction"); +const pokemonDiv = document.getElementById("pokemons"); +//botones de barra menu +const btnHome = document.getElementById("buttonHome"); +const btnPokedex = document.getElementById("buttonPokedex"); +const btnExtra = document.getElementById("buttonExtra"); + +//botones de tipos +const btnAllTypes = document.getElementById("allTypes"); +const btnTypeNormal = document.getElementById("typeNormal"); +const btnTypeFighting = document.getElementById("typeFighting"); +const btnTypeFlying = document.getElementById("typeFlying"); +const btnTypePoison = document.getElementById("typePoison"); +const btnTypeGround = document.getElementById("typeGround"); +const btnTypeRock = document.getElementById("typeRock"); +const btnTypeBug = document.getElementById("typeBug"); +const btnTypeGhost = document.getElementById("typeGhost"); +const btnTypeSteel = document.getElementById("typeSteel"); +const btnTypeFire = document.getElementById("typeFire"); +const btnTypeWater = document.getElementById("typeWater"); +const btnTypeGrass = document.getElementById("typeGrass"); +const btnTypeElectric = document.getElementById("typeElectric"); +const btnTypePsychic = document.getElementById("typePsychic"); +const btnTypeIce = document.getElementById("typeIce"); +const btnTypeDragon = document.getElementById("typeDragon"); +const btnTypeDark = document.getElementById("typeDark"); +const btnTypeFairy = document.getElementById("typeFairy"); + +//Ocultar secciones +function mostrarSeccion(seccion) { + switch (seccion) { + case "home": + homeSecction.style.display = "block"; + pokedexSecction.style.display = "none"; + extraSecction.style.display = "none"; + break; + case "pokedex": + homeSecction.style.display = "none"; + pokedexSecction.style.display = "block"; + extraSecction.style.display = "none"; + break; + case "extra": + homeSecction.style.display = "none"; + pokedexSecction.style.display = "none"; + extraSecction.style.display = "block"; + break; + default: + console.error("Sección no válida"); + } +} + +btnHome.addEventListener("click", () => mostrarSeccion("home")); +btnPokedex.addEventListener("click", () => mostrarSeccion("pokedex")); +btnExtra.addEventListener("click", () => mostrarSeccion("extra")); + +//const pokemonFiltro = pokemonData(data); +// Función para filtrar Pokémon por tipo +function filtrarPorTipo(tipo) { + return pokemonData(data.pokemon, tipo); +} + +// Función para mostrar los Pokémon en el contenedor +function mostrarPokemon(pokemones) { + pokemones.forEach((pokemon) => { + pokemonDiv.innerHTML += `
+
+ #${pokemon.num}
+ ${pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)}
+ Type: ${pokemon.type}
+ Resistant: ${pokemon.resistant.join(", ")}
+ Weaknesses: ${pokemon.weaknesses.join(", ")}
+
`; + }); +} + +//seccion ordenar por abecedario +const orderSelect = document.getElementById("order-select"); + +orderSelect.addEventListener("change", function () { + const selectedOption = orderSelect.value; + + if (selectedOption === "asc") { + // Ordenar y mostrar en orden ascendente + pokemonDiv.innerHTML = ""; + const pokemonOrdenados = sortPokemon(data.pokemon, "asc"); + mostrarPokemon(pokemonOrdenados); + } else if (selectedOption === "desc") { + // Ordenar y mostrar en orden descendente + pokemonDiv.innerHTML = ""; + const pokemonOrdenados = sortPokemon(data.pokemon, "desc"); + mostrarPokemon(pokemonOrdenados); + } +}); + +// Mostrar todos los Pokémon en pokedex +btnPokedex.addEventListener("click", function () { + pokemonDiv.innerHTML = ""; + mostrarPokemon(data.pokemon); +}); + +//Mostrar todos en bóton pokebola +btnAllTypes.addEventListener("click", function () { + pokemonDiv.innerHTML = ""; + mostrarPokemon(data.pokemon); +}); + +// Mostrar Pokémon de tipo Normal +btnTypeNormal.addEventListener("click", function () { + pokemonDiv.innerHTML = ""; + mostrarPokemon(filtrarPorTipo("normal")); +}); + +// Mostrar Pokémon de tipo Lucha +btnTypeFighting.addEventListener("click", function () { + pokemonDiv.innerHTML = ""; + mostrarPokemon(filtrarPorTipo("fighting")); +}); + +// Mostrar Pokémon de tipo Volador +btnTypeFlying.addEventListener("click", function () { + pokemonDiv.innerHTML = ""; + mostrarPokemon(filtrarPorTipo("flying")); +}); + +// Mostrar Pokémon de tipo Veneno +btnTypePoison.addEventListener("click", function () { + pokemonDiv.innerHTML = ""; + mostrarPokemon(filtrarPorTipo("poison")); +}); + +// Mostrar Pokémon de tipo Tierra +btnTypeGround.addEventListener("click", function () { + pokemonDiv.innerHTML = ""; + mostrarPokemon(filtrarPorTipo("ground")); +}); + +// Mostrar Pokémon de tipo Roca +btnTypeRock.addEventListener("click", function () { + pokemonDiv.innerHTML = ""; + mostrarPokemon(filtrarPorTipo("rock")); +}); + +// Mostrar Pokémon de tipo bicho +btnTypeBug.addEventListener("click", function () { + pokemonDiv.innerHTML = ""; + mostrarPokemon(filtrarPorTipo("bug")); +}); + +// Mostrar Pokémon de tipo Acero +btnTypeSteel.addEventListener("click", function () { + pokemonDiv.innerHTML = ""; + mostrarPokemon(filtrarPorTipo("steel")); +}); + +// Mostrar Pokémon de tipo fuego +btnTypeFire.addEventListener("click", function () { + pokemonDiv.innerHTML = ""; + mostrarPokemon(filtrarPorTipo("fire")); +}); + +// Mostrar Pokémon de tipo Agua +btnTypeWater.addEventListener("click", function () { + pokemonDiv.innerHTML = ""; + mostrarPokemon(filtrarPorTipo("water")); +}); + +// Mostrar Pokémon de tipo Planta +btnTypeGrass.addEventListener("click", function () { + pokemonDiv.innerHTML = ""; + mostrarPokemon(filtrarPorTipo("grass")); +}); + +// Mostrar Pokémon de tipo Fantasma +btnTypeGhost.addEventListener("click", function () { + pokemonDiv.innerHTML = ""; + mostrarPokemon(filtrarPorTipo("ghost")); +}); + +// Mostrar Pokémon de tipo eletrico +btnTypeElectric.addEventListener("click", function () { + pokemonDiv.innerHTML = ""; + mostrarPokemon(filtrarPorTipo("electric")); +}); + +// Mostrar Pokémon de tipo Psiquico +btnTypePsychic.addEventListener("click", function () { + pokemonDiv.innerHTML = ""; + mostrarPokemon(filtrarPorTipo("psychic")); +}); + +// Mostrar Pokémon de tipo Hielo +btnTypeIce.addEventListener("click", function () { + pokemonDiv.innerHTML = ""; + mostrarPokemon(filtrarPorTipo("ice")); +}); + +// Mostrar Pokémon de tipo Dragon +btnTypeDragon.addEventListener("click", function () { + pokemonDiv.innerHTML = ""; + mostrarPokemon(filtrarPorTipo("dragon")); +}); + +// Mostrar Pokémon de tipo Siniestro +btnTypeDark.addEventListener("click", function () { + pokemonDiv.innerHTML = ""; + mostrarPokemon(filtrarPorTipo("dark")); +}); + +// Mostrar Pokémon de tipo Hada +btnTypeFairy.addEventListener("click", function () { + pokemonDiv.innerHTML = ""; + mostrarPokemon(filtrarPorTipo("fairy")); +}); + + +// Mostrar pokemon por peso + +const mostrarPokeAverage = document.getElementById("mostrarPokePeso"); + +function mostrarPokemonPorPeso(pokemon, title) { + return ` +
+

${title}

+
+
+ #${pokemon.num}
+ ${pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)}
+ Type: ${pokemon.type}
+ Peso: ${pokemon.size.weight}

+
+
+ `; +} + +function mostrarAverage(pokemones) { + const averagePokemon = computeStats(pokemones); + console.log(averagePokemon); + + const pokemonesPorPeso = [mostrarPokemonPorPeso(averagePokemon.lightestPokemon, "Curiosidad #1: El pokemon más liviano es GASTLY si, los fantasmas tambien pesan"), mostrarPokemonPorPeso(averagePokemon.heaviestPokemon, "Curiosidad #2: El pokemon más pesado es SNORLAX puedes dormir junto a él, pero ten cuidado podría aplastarte"), mostrarPokemonPorPeso(averagePokemon.closestPokemon, "Curiosidad #3: El Pokemon más cercano al peso promedio es BLISSEY, cuando estes triste se acercará a ti para hacerte reír") ]; + + let peso = ""; + for (let i = 0; i < pokemonesPorPeso.length; i++) { + peso += pokemonesPorPeso[i]; + } + mostrarPokeAverage.innerHTML = peso ; +} + +btnExtra.addEventListener("click", function () { + mostrarAverage(data); +}); + +//poke peso +/*const mostrarPokeAverage = document.getElementById("mostrarPokePeso"); + +function mostrarAverage(pokemones) { + const averagePokemon = computeStats(pokemones); + console.log(averagePokemon); + + const lightestPokemon = averagePokemon.lightestPokemon; + const heaviestPokemon = averagePokemon.heaviestPokemon; + const closestPokemon = averagePokemon.closestPokemon; + + const lightestHTML = ` +
+

Pokemon con peso más liviano

+
+
+ #${lightestPokemon.num}
+ ${lightestPokemon.name.charAt(0).toUpperCase() + lightestPokemon.name.slice(1)}
+ Type: ${lightestPokemon.type}
+ Peso: ${lightestPokemon.size.weight}

+
+
+ `; + + const heaviestHTML = ` +
+

Pokemon con peso más pesado

+
+
+ #${heaviestPokemon.num}
+ ${heaviestPokemon.name.charAt(0).toUpperCase() + heaviestPokemon.name.slice(1)}
+ Type: ${heaviestPokemon.type}
+ Peso: ${heaviestPokemon.size.weight}

+
+
+ `; + + const closestHTML = ` +
+

Pokemon más cercano al peso promedio

+
+
+ #${closestPokemon.num}
+ ${closestPokemon.name.charAt(0).toUpperCase() + closestPokemon.name.slice(1)}
+ Type: ${closestPokemon.type}
+ Peso: ${closestPokemon.size.weight}

+
+
+ `; + + mostrarPokeAverage.innerHTML = lightestHTML + heaviestHTML + closestHTML; +} + +btnExtra.addEventListener("click", function () { + mostrarAverage(data); +}); +*/ -console.log(example, data); diff --git a/src/style.css b/src/style.css index e69de29..782f9a2 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,403 @@ +body { + background-image: url("./extra/fondoOscuro.png"); + width: 100%; + height: auto; + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; +} + +#menu { + display: flex; + flex-wrap: wrap; + box-shadow: 0px 10px 14px -7px #a1a3e1; + background: linear-gradient(to bottom, #0927ec 5%, #030b47 100%); + background-color: #04239f; + border-radius: 8px; + display: flex; + flex-wrap: wrap; + display: inline-block; + cursor: pointer; + color: #ffffff; + font-family: Arial; + font-size: 1rem; + font-weight: bold; + padding: 13px 32px; + text-shadow: 0px 1px 0px #1117ca; + width: 90%; + text-align: center; + margin-left: 2%; +} + +#buttonHome, +#buttonPokedex, +#buttonExtra { + display: flex; + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + font-size: 2rem; + box-shadow: 3px 4px 0px 0px #899599; + background: linear-gradient(to bottom, #ededed 5%, #bab1ba 100%); + background-color: #ededed; + border-radius: 15px; + border: 1px solid #d6bcd6; + display: inline-block; + cursor: pointer; + color: #121db6; + font-size: 90%; + padding: 7px 25px; + text-decoration: none; + text-shadow: 0px 1px 0px #e1e2ed; + width: 12%; + text-align: center; + margin-left: 5%; +} + +#buttonHome:hover, +#buttonPokedex:hover, +#buttonExtra:hover { + background: linear-gradient(to bottom, #bab1ba 5%, #ededed 100%); + background-color: #bab1ba; +} + +#buttonHome:active, +#buttonPokedex:active, +#buttonExtra:active { + position: relative; + top: 5px; +} + +.flexWelcome { + display: flex; + flex-direction: wrap; +} + +#welcome { + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + display: flex; + flex-wrap: wrap; + width: auto; + height: auto; + border-radius: 25px; + justify-content: center; + border-style: double; + border-color: #ffaa22; + border-width: 10px; + margin-left: 10%; + margin-top: 5%; + margin-right: auto; + background-color: #f3ebdede; +} + +#oak { + margin: auto; + width: 70%; + padding: auto; + margin-right: auto; +} + +.pokemon-container { + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + padding: 5%; + display: flex; + display: inline-block; + width: 16%; + margin-right: 2%; + margin-top: 2%; + background-color: rgba(200, 196, 196, 0.871); + border-radius: 25px; +} + +h3 { + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + text-align: center; + font-size: x-large; + background-color: rgba(200, 196, 196, 0.899); + margin-left: 2%; + margin-right: 3%; +} + +#pokemons { + + margin-left: 15%; + display: flex; + flex-wrap: wrap; +} + +#filterType { + margin-left: 10%; +} +#order-select { + display: inline-block; + width: 15%; + cursor: pointer; + padding: 7px 15px; + height: 30%; + outline: 0; + border: 0; + border-radius: 0; + margin-left: 45%; + background: #f0f0f0c4; + color: #080808; + font-size: 1em; + color: rgb(0, 0, 0); + font-family: "Quicksand", sans-serif; + border: 2px solid rgba(0, 0, 0, 0.2); + border-radius: 12px; + position: center; + transition: all 0.25s ease; +} + +#filterType{ + display: flex; + flex-wrap: wrap; +} + + +#typeNormal, +#typeFighting, +#typeFlying, +#typePoison, +#typeGround, +#typeRock, +#typeBug, +#typeGhost, +#typeSteel, +#typeFire, +#typeWater, +#typeGrass, +#typeElectric, +#typePsychic, +#typeIce, +#typeDragon, +#typeDark, +#typeFairy { + display: flex; + width: 4%; + background-color: rgba(200, 196, 196, 0.871); + border-radius: 10px; + margin: 0.5%; + margin-bottom: 1%; +} + +#typeNormal:active, +#typeFighting:active, +#typeFlying:active, +#typePoison:active, +#typeGround:active, +#typeRock:active, +#typeBug:active, +#typeGhost:active, +#typeSteel:active, +#typeFire:active, +#typeWater:active, +#typeGrass:active, +#typeElectric:active, +#typePsychic:active, +#typeIce:active, +#typeDragon:active, +#typeDark:active, +#typeFairy:active, +#allTypes:active { + position: relative; + top: 5px; + transform: scale(2) + +} + + +#allTypes { + width: 4.6%; + background-color: rgba(200, 196, 196, 0.871); + border-radius: 10px; + margin: 0.5%; + margin-bottom: 1%; +} + +footer { + position: static; + bottom: 0; + text-align: center; + font-size: large; + background-color: rgba(200, 196, 196, 0.69); + padding: 0.5%; + width: 100%; + height: 40px; + left: 0; +} + +#pokedexSecction, +#extraSecction { + display: none; +} + +#pokePeso{ + font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; + padding: 5%; + display: flex; + display: inline-block; + width: 16%; + margin-right: 2%; + margin-left: 40%; + margin-top: 2%; + background-color: rgba(200, 196, 196, 0.871); + border-radius: 25px; + +} + +main { + box-sizing: border-box; + height: 100%; + margin-bottom: 5%; +} + +/*Media Query achicar pantalla*/ +@media screen and (max-width: 768px) { + .pokemon-container { + width: 30%; + margin-right: 2%; + margin-top: 2%; + } + #filterType{ + display: flex; + flex-wrap: wrap; + } + + #typeNormal, + #typeFighting, + #typeFlying, + #typePoison, + #typeGround, + #typeRock, + #typeBug, + #typeGhost, + #typeSteel, + #typeFire, + #typeWater, + #typeGrass, + #typeElectric, + #typePsychic, + #typeIce, + #typeDragon, + #typeDark, + #typeFairy { + display: flex; + width: 9%; + border-radius: 10px; + margin: 0.5%; + margin-bottom: 1%; + } + #allTypes { + width: 10%; + border-radius: 10px; + margin: 0.5%; + margin-bottom: 1%; + } + #buttonHome, + #buttonPokedex, + #buttonExtra { + display: flex; + display: inline-block; + font-size: 2rem; + text-align: center; + margin-left: 3%; + width: 26%; + } + #order-select { + display: inline-block; + width: 30%; + padding: 7px 15px; + height: 40%; + outline: 0; + border: 0; + border-radius: 0; + margin-left: 33%; + margin-top: 3%; + font-size: 2em; + border-radius: 12px; + position: center; + } +} + +/*Media Query Celular*/ + +@media only screen and (min-device-width : 320px) and (max-device-width : 480px){ + .pokemon-container { + width: 30%; + margin-right: 2%; + margin-top: 2%; + padding: 5%; + font-size: 2rem; + } + #filterType{ + display: flex; + flex-wrap: wrap; + } + + #typeNormal, + #typeFighting, + #typeFlying, + #typePoison, + #typeGround, + #typeRock, + #typeBug, + #typeGhost, + #typeSteel, + #typeFire, + #typeWater, + #typeGrass, + #typeElectric, + #typePsychic, + #typeIce, + #typeDragon, + #typeDark, + #typeFairy { + display: flex; + width: 9%; + border-radius: 10px; + margin: 0.5%; + margin-bottom: 1%; + margin-right: 5; + } + #allTypes { + width: 10%; + border-radius: 10px; + margin: 0.5%; + margin-bottom: 1%; + } + #menu { + display: flex; + flex-wrap: wrap; + border-radius: 8px; + display: inline-block; + width: 80%; + height: 40%; + } + #buttonHome, + #buttonPokedex, + #buttonExtra { + display: flex; + display: inline-block; + font-size: 2rem; + text-align: center; + margin-left: 3%; + width: 26%; + } + #order-select { + display: inline-block; + width: 30%; + padding: 7px 15px; + height: 40%; + outline: 0; + border: 0; + border-radius: 0; + margin-left: 33%; + margin-top: 3%; + font-size: 2em; + border-radius: 12px; + position: center; + } + + +} + + diff --git a/test/data.spec.js b/test/data.spec.js index 09b1f23..a2a4848 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,23 +1,109 @@ -import { example, anotherExample } from '../src/data.js'; +import { pokemonData, sortPokemon, computeStats } from "../src/data.js"; +//test tipo +describe('pokemonData', () => { + const data = [ + { + id: 1, + name: 'Bulbasaur', + type: ['Grass', 'Poison'], + }, + { + id: 2, + name: 'Charmander', + type: ['Fire'], + }, + { + id: 3, + name: 'Squirtle', + type: ['Water'], + }, + ]; -describe('example', () => { - it('is a function', () => { - expect(typeof example).toBe('function'); + it('Devuelve solo pokemon tipo "Grass" cuando el algumento sea hierba ', () => { + const GrassResult = [{ id: 1, name: 'Bulbasaur', type: ['Grass', 'Poison'] }]; + expect(pokemonData(data, 'Grass')).toEqual(GrassResult); }); - it('returns `example`', () => { - expect(example()).toBe('example'); + it('Devuelve una array vacía cuando se pasa un tipo no válido como argumento', () => { + const emptyResult = []; + expect(pokemonData(data, 'Electric')).toEqual(emptyResult); + }); + + it('devuelve solo pokemon tipo "Water" cuando el algumento sea agua', () => { + const waterResult = [{ id: 3, name: 'Squirtle', type: ['Water'] }]; + expect(pokemonData(data, 'Water')).toEqual(waterResult); }); }); +//test ordenar +describe('sortPokemon', () => { + const pokemones = [ + { name: 'Charmander' }, + { name: 'Squirtle' }, + { name: 'Bulbasaur' }, + ]; + + it('ordena los pokemones en orden ascendente por nombre', () => { + const ordenAscendente = 'asc'; + const pokemonesOrdenados = sortPokemon(pokemones, ordenAscendente); + expect(pokemonesOrdenados).toEqual([ + { name: 'Bulbasaur' }, + { name: 'Charmander' }, + { name: 'Squirtle' }, + ]); + }); -describe('anotherExample', () => { - it('is a function', () => { - expect(typeof anotherExample).toBe('function'); + it('ordena los pokemones en orden descendente por nombre', () => { + const ordenDescendente = 'desc'; + const pokemonesOrdenados = sortPokemon(pokemones, ordenDescendente); + expect(pokemonesOrdenados).toEqual([ + { name: 'Squirtle' }, + { name: 'Charmander' }, + { name: 'Bulbasaur' }, + ]); }); - it('returns `anotherExample`', () => { - expect(anotherExample()).toBe('OMG'); + it('no modifica el array original de pokemones', () => { + const copiaDePokemones = [...pokemones]; + const ordenAscendente = 'asc'; + sortPokemon(pokemones, ordenAscendente); + expect(pokemones).toEqual(copiaDePokemones); }); }); + +//test calcular +describe('computeStats', () => { + const pokemonData = { + pokemon: [ + { + name: 'Bulbasaur', + size: { + weight: '6.9 kg' + } + }, + { + name: 'Charmander', + size: { + weight: '8.5 kg' + } + }, + { + name: 'Squirtle', + size: { + weight: '9.0 kg' + } + } + ] + } + + it('Deberia calcular el peso promedio, el minimo y el maximo', () => { + const stats = computeStats(pokemonData) + expect(stats.averageWeight).toEqual(8.133333333333333) + expect(stats.lightest).toEqual(6.9) + expect(stats.heaviest).toEqual(9.0) + expect(stats.lightestPokemon.name).toEqual('Bulbasaur') + expect(stats.heaviestPokemon.name).toEqual('Squirtle') + expect(stats.closestPokemon.name).toEqual('Charmander') + }) +}) \ No newline at end of file