diff --git a/7-Objetivos-de-aprendizaje b/7-Objetivos-de-aprendizaje new file mode 100644 index 00000000..e69de29b diff --git a/README.md b/README.md index 04706ddd..919c1d4d 100644 --- a/README.md +++ b/README.md @@ -1,641 +1,102 @@ -# Data Lovers +![logo](src/data/pokemon/Readme/Logo-Pokemon.png) -## Í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 - -Según [Forbes](https://www.forbes.com/sites/bernardmarr/2018/05/21/how-much-data-do-we-create-every-day-the-mind-blowing-stats-everyone-should-read), -el 90% de la data que existe hoy ha sido creada durante los últimos dos años. -Cada día generamos 2.5 millones de terabytes de datos, una cifra sin -precedentes. - -No obstante, los datos por sí mismos son de poca utilidad. Para que esas -grandes cantidades de datos se conviertan en **información** fácil de leer para -los usuarios, necesitamos entender y procesar estos datos. Una manera simple de -hacerlo es creando _interfaces_ y _visualizaciones_. - -En la siguiente imagen, podrás ver cómo con la data que que se ve en la parte -izquierda se puede construir una interfaz amigable y entendible por las -usuarias, al lado derecho. - -![pokemon-data-to-ui](https://user-images.githubusercontent.com/12631491/218505816-c6d11758-9de4-428f-affb-2a56ea4d68c4.png) - -## 2. Resumen del proyecto - -En este proyecto **construirás una _página web_ para visualizar un -_conjunto (set) de datos_** que se adecúe a lo que descubras que tu usuario -necesita. - -Como entregable final tendrás una página web que permita **visualizar la data, -filtrarla, ordenarla y hacer algún cálculo agregado**. Con cálculo agregado -nos referimos a distintos cálculos que puedes hacer con la data para mostrar -información aún más relevante para los usuarios (promedio, el valor máximo -o mínimo, etc). - -Esta vez te proponemos una serie de datos de diferentes _temáticas_ para que -explores y decidas con qué temática te interesa trabajar. Hemos elegido -específicamente estos sets de datos porque creemos que se adecúan bien a esta -etapa de tu aprendizaje. - -Una vez que definas tu área de interés, buscar entender quién es tu usuario -y qué necesita saber o ver exactamente; luego podrás construir la interfaz que -le ayude a interactuar y entender mejor esos datos. - -Estos son datos que te proponemos: - -* [Pokémon](src/data/pokemon/pokemon.json): - En este set encontrarás una lista con los 251 Pokémon de la región de Kanto - y Johto, junto con sus respectivas estadísticas usadas en el juego - [Pokémon GO](http://pokemongolive.com). - - [Investigación con jugadores de Pokémon Go](src/data/pokemon/README.md) - -* [League of Legends - Challenger leaderboard](src/data/lol/lol.json): - Este set de datos muestra la lista de campeones en una liga del - juego League of Legends (LoL). - - [Investigación con jugadores de LoL](src/data/lol/README.md) - -* [Rick and Morty](src/data/rickandmorty/rickandmorty.json). - Este set nos proporciona la lista de los personajes de la serie Rick and - Morty. [API Rick and Morty](https://rickandmortyapi.com). - - [Investigación con seguidores de Rick and Morty](src/data/rickandmorty/README.md) - -* [Juegos Olímpicos de Río de Janeiro](src/data/athletes/athletes.json). - Este set nos proporciona la lista de los atletas que ganaron medallas en las - olímpiadas de Río de Janeiro. - - [Investigación con interesados en juegos olímpicos de Río de Janeiro](src/data/athletes/README.md) - -* [Studio Ghibli](src/data/ghibli/ghibli.json). - En este set encontrarás una lista de las animaciones y sus personajes del - [Studio Ghibli](https://ghiblicollection.com/). - - [Investigación con seguidores de las animaciones del Studio Ghibli](src/data/ghibli/README.md) - -* [Countries](src/data/countries/countries.json). - En este set encontrarás la informacion de varios paises - - [Investigación](src/data/countries/README.md) - -* [Tarot](src/data/tarot/tarot.json). - En este set encontrarás la informacion acerca de algunas cartas de tarot. - - [Investigación](src/data/tarot/README.md) - -* [Breaking Bad](src/data/breakingbad/breakingbad.json). - En este set encontrarás la informacion sobre los personajes de la serie breakingbad. - - [Investigación con los seguidores de la serie Breaking Bad](src/data/breakingbad/README.md) - -* [Juego de Tronos](src/data/got/got.json). - En este set encontrarás la informacion sobre algunos de los personajes de la serie GOT. - - [Investigación con los seguidores de la serie GOT](src/data/got/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. - -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

+# ¡Data-Lovers Pokémon! - * [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** +## Índice -### Investigación +* [1. Introducción](#1-introducción) +* [2. Elaboracíon ](#2-elaboración) +* [3. Historias de usuario](#3-historias-de-usuario) +* [4. Alta Fidelidad](#4-alta-fidelidad) +* [5. Responsive](#5-responsive) +* [6. Testeos de usabilidad](#6-testeos-de-usabilidad)e +* [7. Objetivos de aprendizaje](#7-objectivos-de-aprendizaje) +* [8. Checklist](#8-checklist) -- [ ] **Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad** -
Links

+## 1. Introducción - * [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) -

+Según [Pokemon Wiki](https://pokemon.fandom.com/es/wiki/Generaciones_Pok%C3%A9mon) +Las Generaciones I y II de Pokémon, representadas por los juegos "Pokémon Rojo y Azul" y "Pokémon Oro y Plata", respectivamente, son los pilares fundamentales que dieron origen y continuidad a la icónica franquicia Pokémon. Estas generaciones no solo introdujeron a los jugadores al emocionante mundo de los entrenadores Pokémon, sino que también expandieron y mejoraron significativamente la experiencia de juego. Desde la captura de los 151 Pokémon originales en Kanto hasta la introducción de 100 nuevas criaturas en Johto, estas dos generaciones marcaron el comienzo de un fenómeno cultural que ha perdurado durante décadas. Acompáñanos en un viaje a través de estas dos eras que dieron forma a la forma en que millones de personas en todo el mundo experimentan el universo Pokémon. -## 4. Consideraciones generales +## 2. Elaboración -* 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/). +Lo primero que desarrollamos fue la planeacion y organización de nuetro proyecto con la aplicaccion trello. -## 5. Criterios de aceptación mínimos del proyecto +![Trello](src/data/pokemon/Readme/Trello.png) -Los criterios para considerar que has completado este proyecto son: +## 3. Historias de usuario -### Definición del producto +Se han creado los primeros bocetos sugeridos por nuestros usuarios para el diseño inicial de la interfaz, comenzando con la imagen inicial del logo, seguida de los principales Pokémon. -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. +![Historia 1](src/data/pokemon/Readme/poke%201.1.jpg) +![Historia ](src/data/pokemon/Readme/poke%204.4.jpg) -### Historias de usuario +En la página de inicio, se encuentra un botón en forma de Pokébola junto al logo de Pokémon y una imagen de los Pokémon más populares. Al hacer clic en este botón, se accede a la segunda página. -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. +En la segunda página, los datos se presentan en forma de tarjetas. Estas tarjetas representan a los Pokémon del 1 al 251, en orden ascendente. Cuando el usuario se sitúa sobre una tarjeta de un Pokémon específico, se despliega la información relacionada con ese Pokémon. -Asegúrate de incluir la definición de terminado (_definition of done_) y los -Criterios de Aceptación para cada una. +## 4 Alta Fidelidad -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). +La aplicación permitirá: Ordenar Pokémon de diversas formas, filtrar por tipo, buscar por nombre, calcula el promedio de la efectividad de los ataques por tipo. -### Diseño de la Interfaz de Usuario +![Historia ](src/data/pokemon/Readme/interfaz.png) +![Historia ](src/data/pokemon/Readme/interfaz%202.png) + +* [Figma](https://www.figma.com/file/tumuHLKHR7Twk7Nu6InR5B/Untitled?type=whiteboard&node-id=507-247&t=chMtxgcWdjlMdycb-0): En esta aplicación encontrara toda la documentación generada en cada etapa del proceso. -#### Prototipo de baja fidelidad +## 5 Responsive -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`. +Se refiere a la capacidad de un sitio web o una aplicación para adaptarse de manera dinámica y eficiente a diferentes tamaños de pantalla y dispositivos. Esto garantiza que la experiencia del usuario sea óptima, ya sea que estén navegando en una computadora de escritorio, una tableta o un teléfono móvil. Un diseño web o una aplicación "responsive" se ajusta automáticamente para mostrar y organizar el contenido de manera legible y funcional en cualquier dispositivo, lo que mejora la accesibilidad y la usabilidad, y evita que los usuarios tengan que hacer zoom o desplazarse excesivamente para ver o interactuar con la información. -#### Prototipo de alta fidelidad +![Responsive](src/data/pokemon/Readme/responci.jpg) -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. +* [Figma](https://www.figma.com/file/tumuHLKHR7Twk7Nu6InR5B/Untitled?type=whiteboard&node-id=507-247&t=chMtxgcWdjlMdycb-0): En esta aplicación encontrara toda la documentación generada en cada etapa del proceso. -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](https://coda.io/d/Bootcamp-UX-Contenido_dqkqk2rV9Z2/Diseno-de-interfaces_suOT7#_luWsQ)_. +## 6 Testeos de usabilidad -#### Testeos de usabilidad +Son evaluaciones sistemáticas que se realizan en productos, como sitios web, aplicaciones móviles o productos físicos, para medir la facilidad con la que los usuarios pueden interactuar con ellos. Estos test se llevan a cabo con usuarios reales o representativos del público objetivo. -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. +El objetivo principal de los testeos de usabilidad es identificar problemas en la experiencia del usuario, como dificultades de navegación, diseño confuso o funciones poco intuitivas. Estos test suelen incluir tareas específicas que los usuarios deben realizar mientras se registran sus interacciones y comentarios. -### Implementación de la Interfaz de Usuario (HTML/CSS/JS) +![Testeo ](src/data/pokemon/Readme/test1.png) -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 +* [Figma](https://www.figma.com/file/tumuHLKHR7Twk7Nu6InR5B/Untitled?type=whiteboard&node-id=507-247&t=chMtxgcWdjlMdycb-0): En esta aplicación encontrara toda la documentación generada en cada etapa del proceso. -Como mínimo, tu implementación debe: +## 7 Objectivos de aprendizaje -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_. +En esta ocacion logramos entender mas sobre las siguientes funciones: -### Pruebas unitarias +# HTML -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. +* Comprender los conceptos básicos y su estructura. +* Conocer la importancia de utilizar elementos semánticos en HTML para mejorar la accesibilidad y la optimización de motores de búsqueda. +* Identificar y utilizar correctamente los elementos semánticos, como: header, article, section, footer, entre otros. -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). +# CSS +* Entender los conceptos básicos de CSS, incluyendo selectores, propiedades y valores. +* Aprender a aplicar estilos a elementos HTML para controlar el diseño y la apariencia de una página web. +* Conocer las diferentes unidades de medida y cómo se aplican en CSS (píxeles, porcentajes, etc.). +* Dominar la creación de reglas CSS para modificar colores, fuentes, márgenes, bordes y fondos -## 6. Hacker edition +# Javascript -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. +* Aprender a manipular el DOM (Document Object Model) con JavaScript para interactuar con elementos HTML. +* Comprender la programación orientada a objetos en JavaScript, incluyendo objetos, métodos y propiedades. +* Conocer cómo trabajar con eventos y controladores de eventos para crear interacciones en una página web. -Features/características extra sugeridas: +## 8 Checklist -* 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 + + + + + Logo de Pokémon +
+
+ +
+ Imagen de pokemones +
+
+ diff --git a/src/main.js b/src/main.js index 71c59f2d..f5e005e9 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,152 @@ -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 { + filterPokemonsByName, + filterPokemonsByType, + generateQuickMoveNames, + generateResistantList, + generateWeaknessesList, + sortPokemonsByNameAscending, + sortPokemonsByNameDescending, + sortPokemonsByNumberAscending, + calculateAverageAttack, + +} from "./data.js"; -console.log(example, data); +import pokemonData from "./data/pokemon/pokemon.js"; + +// Obtiene los datos de los pokémones +const pokemons = pokemonData.pokemon; + +// Genera una tarjeta HTML para un Pokémon dado +function generatePokemonCard(pokemon) { + + const card = document.createElement("div"); + card.classList.add("card"); + + // Genera listas de movimientos, resistencias y debilidades + const quickMoveNames = generateQuickMoveNames(pokemon["quick-move"]); + const resistantList = generateResistantList(pokemon.resistant); + const weaknessesList = generateWeaknessesList(pokemon.weaknesses); + + // Llena la tarjeta con información del Pokémon + card.innerHTML = ` + ${pokemon.name} +

#${pokemon.num}

+

${pokemon.name}

+
+ About: ${pokemon.about}

+ Rarity: ${pokemon["pokemon-rarity"]}

+ Type: ${pokemon.type.join(", ")}

+ ${pokemon.generation.num}

+ Quick move: ${quickMoveNames}

+ Resistant: ${resistantList}

+ Weaknesses: ${weaknessesList}

+ Attack: ${pokemon.stats["base-attack"]}

+ Defense: ${pokemon.stats["base-defense"]} +
+ `; + + return card; +} + +function showPokemons(selectedType, nameFilter, sortedPokemons, sortedPokemons2, sortedPokemonsByNumber) { + const pokemonContainer = document.getElementById("pokemon-container"); + const averageAttackElement = document.getElementById("average-attack"); // Nuevo elemento para mostrar el promedio + pokemonContainer.innerHTML = ""; // Limpia el contenedor antes de agregar tarjetas + + let filteredPokemons = [...pokemons]; // Crear una copia de pokemons para no modificar la lista original + + if (nameFilter) { + // Filtrar por nombre si se escribe + filteredPokemons = filterPokemonsByName(filteredPokemons, nameFilter); + } + + if (selectedType !== "") { + // Filtrar por tipo si se selecciona un tipo + filteredPokemons = filterPokemonsByType(filteredPokemons, selectedType); + + // Calcular el promedio de ataque de los pokémones filtrados por tipo + const averageAttack = calculateAverageAttack(filteredPokemons); + averageAttackElement.textContent = `Average Attack: ${averageAttack.toFixed(2)}`; + } else { + averageAttackElement.textContent = "Average Attack: "; + } + + if (sortedPokemons) { + // Ordenar por nombre ascendente si el botón de orden ascendente está activo + filteredPokemons = sortPokemonsByNameAscending(filteredPokemons); + } + + if (sortedPokemons2) { + // Ordenar por nombre descendente si el botón de orden descendente está activo + filteredPokemons = sortPokemonsByNameDescending(filteredPokemons); + } + + if (sortedPokemonsByNumber) { + // Ordenar por número ascendente si el botón de orden ascendente por número está activo + filteredPokemons = sortPokemonsByNumberAscending(filteredPokemons); + } + + // Mostrar los pokémones filtrados y ordenados + for (const pokemon of filteredPokemons) { + const card = generatePokemonCard(pokemon); + pokemonContainer.appendChild(card); + } +} + +const typeSelect = document.getElementById("type-select"); +const nameInput = document.getElementById("name-input"); +const ascendButton = document.getElementById("ascend-button"); +const descendButton = document.getElementById("descend-button"); +const ascendNumberButton = document.getElementById("ascend-number-button"); + + +// Agrega un evento para detectar cambios en la selección de tipos +typeSelect.addEventListener("change", (event) => { + const selectedType = event.target.value; + const nameFilter = nameInput.value; + const sortedPokemons = sortPokemonsByNameAscending(pokemons); + const sortedPokemons2 = sortPokemonsByNameDescending(pokemons); + showPokemons(selectedType, nameFilter,sortedPokemons, sortedPokemons2); +}); + +// Agregar evento para detectar cambios en el campo de nombre +nameInput.addEventListener("input", () => { + const selectedType = typeSelect.value; + const nameFilter = nameInput.value; + const sortedPokemons = ascendButton.classList.contains("active"); // Verificar si el botón de orden ascendente está activo + const sortedPokemons2 = descendButton.classList.contains("active"); // Verificar si el botón de orden descendente está activo + showPokemons(selectedType, nameFilter, sortedPokemons, sortedPokemons2); +}); + +// Agregar evento para el botón "Ascendente" +ascendButton.addEventListener("click", () => { + const selectedType = typeSelect.value; + const nameFilter = nameInput.value; + const sortedPokemons = true; // Establecer orden ascendente + const sortedPokemons2 = false; // Establecer orden descendente a falso + showPokemons(selectedType, nameFilter, sortedPokemons, sortedPokemons2); + +}); + +// Agregar evento para el botón "Descendente" +descendButton.addEventListener("click", () => { + const selectedType = typeSelect.value; + const nameFilter = nameInput.value; + const sortedPokemons = false; // Establecer orden ascendente a falso + const sortedPokemons2 = true; // Establecer orden descendente + showPokemons(selectedType, nameFilter, sortedPokemons, sortedPokemons2); + +}); +// Agregar evento para el botón "Ascendente" por número +ascendNumberButton.addEventListener("click", () => { + const selectedType = typeSelect.value; + const nameFilter = nameInput.value; + const sortedPokemons = false; // Establecer orden ascendente por nombre a falso + const sortedPokemons2 = false; // Establecer orden descendente por nombre a falso + const sortedPokemonsByNumber = true; // Establecer orden ascendente por número + showPokemons(selectedType, nameFilter, sortedPokemons, sortedPokemons2, sortedPokemonsByNumber); + +}); + +// Mostrar todos los pokémones al cargar la página inicialmente +showPokemons("", "", false, false); // Mostrar todos los pokémones al principio diff --git a/src/pokemon.html b/src/pokemon.html new file mode 100644 index 00000000..d6fdf984 --- /dev/null +++ b/src/pokemon.html @@ -0,0 +1,64 @@ + + + + + Data Lovers + + + + + Logo de Pokémon +
+
+
+
+ +

Average Attack:

+ +
+
+ + + +
+
+
+
+
+ +
+
+
+ +
+ + + diff --git a/src/style.css b/src/style.css index e69de29b..4effdd7d 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,309 @@ +/* Estilos generales del cuerpo de la página */ +body { + /* Configuración del fondo, margen y alineación del cuerpo */ + background-image: url('https://assets.pokemon.com/static2/_ui/img/chrome/container_bg.png'); + margin: 0; /* Sin márgenes alrededor del cuerpo */ + display: flex; /* Utiliza el modelo de caja flexible */ + flex-direction: column; /* Los elementos se apilan en columna */ + align-items: center; /* Centra horizontalmente los elementos */ + min-height: 100vh; /* Altura mínima de la ventana gráfica */ + background-color: #f0f0f0; /* Color de fondo de la página */ + font-family: Arial, sans-serif; /* Fuente predeterminada */ +} + +/* Estilos para el contenedor de imágenes, botón y logo */ +.container { + /* Configuración de espaciado y alineación del contenedor */ + margin-top: 5px; + display: flex; /* Utiliza el modelo de caja flexible */ + flex-direction: column; /* Los elementos se apilan en columna */ + justify-content: center; /* Centra verticalmente los elementos */ + align-items: center; /* Centra horizontalmente los elementos */ + text-align: center; /* Alinea el contenido al centro horizontalmente */ +} + +/* Estilos para las imágenes en el contenedor */ +.container img { + /* Ajusta las imágenes para que se ajusten al contenedor */ + max-width: 100%; /* Imagen no debe exceder el ancho del contenedor */ + height: auto; /* Altura automática para mantener la proporción */ + margin: 0; /* Sin márgenes alrededor de las imágenes */ +} + +/* Estilos para el botón */ +.form { + /* Configuración de alineación y espaciado del botón */ + display: flex; /* Utiliza el modelo de caja flexible */ + justify-content: center; /* Centra horizontalmente el contenido */ + align-items: center; /* Centra verticalmente el contenido */ + margin-bottom: 5px; /* Espacio inferior */ +} + +/* Estilos para el botón de imagen */ +.image-button { + /* Apariencia del botón de imagen */ + background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Pokebola-pokeball-png-0.png/769px-Pokebola-pokeball-png-0.png'); + background-size: cover; /* Ajusta la imagen para cubrir el área del botón */ + background-position: center; /* Centra la imagen en el botón */ + border: none; /* Sin borde */ + width: 50px; /* Ancho del botón */ + height: 50px; /* Altura del botón */ + cursor: pointer; /* Cambia el cursor al pasar por encima */ + border-radius: 50%; /* Borde redondeado para hacer un círculo */ +} +/* Media Query para pantallas más pequeñas */ +@media screen and (max-width: 768px) { + .imagen-button { + width: 10px; /* Reducir el ancho del botón en pantallas pequeñas */ + height: 10px; /* Reducir la altura del botón en pantallas pequeñas */ + } +} + +/* Estilos para la imagen pokemon */ +#pokemon1{ + /* Configuración de tamaño y alineación de la imagen */ + width: 35%; /* Ancho de la imagen */ + height: auto; /* Altura automática para mantener la proporción */ + display: block; /* Elimina el espacio extra debajo de la imagen */ + margin-top: 2px; /* Margen arriba */ + margin-bottom: 10px; /* Margen abajo */ + +} +#pokemon2{ + /* Configuración de tamaño y alineación de la imagen */ + width: 25%; /* Ancho de la imagen */ + height: auto; /* Altura automática para mantener la proporción */ + display: block; /* Elimina el espacio extra debajo de la imagen */ + + +} +#imaPokemonInicio{ + /* Configuración de tamaño y alineación de la imagen */ + width: 50%; /* Ancho de la imagen */ + height: auto; /* Altura automática para mantener la proporción */ + display: block; /* Elimina el espacio extra debajo de la imagen */ + margin: 10%; /* Centra la imagen horizontalmente y le da un margen gral */ + } + +/* Estilos para el boton pokebola abierta*/ +.imagen-button2 { + background-image: url('https://www.pngall.com/wp-content/uploads/4/Pokemon-Pokeball-Transparent.png'); /* Imagen de fondo del botón */ + background-size: cover; /* Ajusta la imagen para cubrir el área del botón */ + background-position: center; /* Centra la imagen en el botón */ + border: none; /* Sin borde */ + width: 40px; /* Ancho del botón */ + height: 40px; /* Altura del botón */ + cursor: pointer; /* Cambia el cursor al pasar por encima */ + border-radius: 50%; /* Borde redondeado para hacer un círculo */ +} + + +/* Media Query para pantallas más pequeñas */ +@media screen and (max-width: 768px) { + .imagen-button2 { + width: 20px; /* Reducir el ancho del botón en pantallas pequeñas */ + height: 20px; /* Reducir la altura del botón en pantallas pequeñas */ + } +} +/* Estilos para el contenedor de las tarjetas */ +.card-container { + display: flex; /* Muestra los elementos como una fila */ + flex-wrap: wrap; /* Permite que las tarjetas se envuelvan si no caben en una línea */ + justify-content: center; /* Centra horizontalmente las tarjetas */ + margin: 20px auto; /* Margen en la parte superior e inferior, y margen lateral automático para centrar horizontalmente */ + max-width: 1200px; /* Ancho máximo para el contenedor de tarjetas */ + padding: 0 20px; /* Espaciado lateral para evitar que las tarjetas lleguen demasiado cerca de los bordes de la pantalla */ +} + +/* Estilos para cada tarjeta individual */ +.card { + text-align: center; /* Alineación del contenido al centro */ + background-color: rgb(242, 242, 247); /* Color de fondo de la tarjeta */ + border-radius: 10px; /* Redondea las esquinas de la tarjeta */ + border: 3px solid rgb(229, 229, 232); /* Borde de 3px sólido con color */ + margin: 20px; /* Margen alrededor de la tarjeta */ + padding: 20px; /* Espaciado interno de la tarjeta */ + width: 100%; /* Ancho del 100% para adaptarse al contenedor */ + max-width: 250px; /* Ancho máximo de cada tarjeta */ + font-family: ADLaM Display; /* Fuente del texto */ +} + +/* Estilos para las imágenes dentro de las tarjetas */ +.card img { + width: 70%; /* Ancho del 100% para ocupar el espacio disponible */ + height: auto; /* Altura automática para mantener la proporción */ + margin: 10px auto; /* Centra verticalmente la imagen dentro de la tarjeta */ +} + +.card h2::first-letter { /* Primera letra del nombre del Pokémon */ + text-transform: uppercase; /* Convierte la primera letra en mayúscula */ + margin-top: 10px; /* Margen superior */ + font-size: 1.2em; /* Tamaño de fuente aumentado */ +} + +.card p1 { + text-align: justify; /* Alineación justificada del texto */ + margin: 10px 0; /* Márgenes superior e inferior */ + font-size: 1.2em; /* Tamaño de fuente */ + color: black; /* Color de texto */ + background-color: #eff1f5; /* Color de fondo del párrafo */ +} +/* Unificación de estilos para los párrafos p2 a p8 */ +.card p2, +.card p3, +.card p4, +.card p5, +.card p6, +.card p7, +.card p8 { + text-transform: capitalize; /* Convierte la primera letra en mayúscula */ + text-align: justify; /* Alineación justificada del texto */ + margin: 10px 0; /* Márgenes superior e inferior */ + font-size: 1.2em; /* Tamaño de fuente */ +} + +.card h3 { + text-align: center;/* Alineación centrada del texto */ + font-size: 1.2em; /* Tamaño de fuente */ +} + +.card .additional-info{ + text-align: justify; /* Alineación justificada del texto */ + display: none; /* Ocultar información adicional por defecto */ +} + +.card:hover .additional-info { + display: block; /* Mostrar información adicional en hover */ +} + +.image-button::after{ +content: "GO"; /* Agregar el texto "IR" como contenido después del botón */ +opacity: 0; /* Ocultar el texto */ +transition: opacity 0.3s ease-in-out; /* Agregar una transición suave */ +color: #fbcb04; /* color para el texto de GO que aparece al piner el cursor */ +font-size: 25px; /* Tamano del texto */ +} + +.image-button:hover::after { + opacity: 1; /* Mostrar el texto "GO" cuando el cursor está sobre el botón */ + font-size: 25px;/* Tamano del texto */ + font-weight: bold; /* Fuente en negrita */ +} + +@media screen and (max-width: 768px) { + header img { + max-width: 70%; /* Reducir el tamaño del logo en pantallas más pequeñas */ + } + .form { + margin-bottom: 10px; /* Espaciado más pequeño en pantallas más pequeñas */ + } + .card { + width: calc(75% - 30px); /* Ancho de las tarjetas en pantallas más pequeñas */ + } +} + +input { + color: rgb(17, 4, 87); /* Color de texto */ + padding: 3px 10px; /* Espaciado interno de 3px arriba/abajo y 10px izquierda/derecha */ + border: powderblue 5px solid; /* Borde sólido de 5px de color */ + border-top-left-radius: 20px; /* Borde redondeado superior izquierdo*/ + border-bottom-right-radius: 20px; /* Borde redondeado inferior derecho*/ + background-color: white; /* Color de fondo */ + font-size: 17px; /* Tamaño de fuente de 17px */ + font-family: Broadway; /* Fuente del texto */ + cursor: pointer; /* Cambia el cursor al pasar por encima */ + + } + +/* Estilos base para lista desplegable del select*/ +select { + color: rgb(17, 4, 87); /* Color de texto en formato RGB */ + padding: 3px 10px; /* Espaciado interno de 3px arriba/abajo y 10px izquierda/derecha */ + border: powderblue 5px solid; /* Borde sólido de 5px de color */ + border-top-left-radius: 20px; /* Borde redondeado superior izquierdo de 20px */ + border-bottom-right-radius: 20px; /* Borde redondeado inferior derecho de 20px */ + background-color: white; /* Color de fondo */ + font-size: 17px; /* Tamaño de fuente de 17px */ + font-family: Broadway; /* Fuente del texto */ + cursor: pointer; /* Cambia el cursor al pasar por encima */ +} +/* Estilos base para los botones */ +button { + color: rgb(17, 4, 87); /* Color de texto en formato RGB */ + padding: 3px 10px; /* Espaciado interno de 3px arriba/abajo y 10px izquierda/derecha */ + border: PowderBlue 5px solid; /* Borde sólido de 5px de color */ + border-top-left-radius: 20px; /* Borde redondeado superior izquierdo de 20px */ + border-bottom-right-radius: 20px; /* Borde redondeado inferior derecho de 20px */ + background-color: white; /* Color de fondo */ + font-size: 17px; /* Tamaño de fuente de 17px */ + font-family: Broadway; /* Fuente del texto */ + cursor: pointer; /* Cambia el cursor al pasar por encima */ +} + +/* Estilos para el elemento con ID "average-attack" */ +#average-attack { + color: rgb(17, 4, 87); /* Color de texto en formato RGB */ + padding: 3px 10px; /* Espaciado interno de 3px arriba/abajo y 10px izquierda/derecha */ + border: PowderBlue 5px solid; /* Borde sólido de 5px de color */ + border-top-left-radius: 20px; /* Borde redondeado superior izquierdo de 20px */ + border-bottom-right-radius: 20px; /* Borde redondeado inferior derecho de 20px */ + background-color: white; /* Color de fondo */ + font-size: 17px; /* Tamaño de fuente de 17px */ + font-family: Broadway; /* Fuente del texto */ +} + +/* Contenedor de filtro */ +.filter-container { + display: flex; /* Muestra los elementos como una fila */ + flex-direction: column; /* Los elementos se apilan en columna */ + align-items: center; /* Centra horizontalmente los elementos */ + justify-content: center; /* Centra verticalmente los elementos */ + gap: 10px; /* Espacio entre elementos */ + margin-top: 10px; /* Margen superior de 10px */ +} + +/* Contenedor de botones */ +.button-container { + display: flex; /* Muestra los elementos como una fila */ + align-items: center; /* Centra horizontalmente los elementos */ + gap: 10px; /* Espacio entre elementos */ +} + +/* Contenedor de campos de entrada */ +.input-container { + display: flex; /* Muestra los elementos como una fila */ + flex-direction: column; /* Los elementos se apilan en columna */ + align-items: center; /* Centra horizontalmente los elementos */ + gap: 10px; /* Espacio entre elementos */ +} + +/* Fila de campos de entrada */ +.input-row { + display: flex; /* Muestra los elementos como una fila */ + align-items: center; /* Centra horizontalmente los elementos */ + gap: 10px; /* Espacio entre elementos */ +} +/* Media Query para pantallas más pequeñas */ +@media screen and (max-width: 768px) { + .filter-container { + align-items: center; /* Alinea los elementos al centro en pantallas pequeñas */ + } + + .input-container { + align-items: center; /* Alinea los elementos al centro en pantallas pequeñas */ + } + + .input-row { + flex-direction: column; /* Cambia la dirección a columna en pantallas pequeñas */ + } + + /* Ajusta el tamaño de fuente y el espaciado para pantallas pequeñas */ + .filter-container button, + .filter-container select, + .filter-container input, + #average-attack { + font-size: 12px; + padding: 2px 8px; + max-width: 100%; + } +} diff --git a/test/data.spec.js b/test/data.spec.js index 09b1f23f..8a5ac690 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,23 +1,238 @@ -import { example, anotherExample } from '../src/data.js'; +import { + filterPokemonsByName, + filterPokemonsByType, + generateQuickMoveNames, + generateResistantList, + generateWeaknessesList, + sortPokemonsByNameAscending, + sortPokemonsByNameDescending, + sortPokemonsByNumberAscending, + calculateAverageAttack, + +} from "../src/data"; +// PRIMER TEST NOMBRE ASCEDENTE +describe('sortPokemonsByNameAscending', () => { + it('is a function', () => { + expect(typeof sortPokemonsByNameAscending).toBe('function'); + }); + + it('returns an array of Pokemon sorted by name in ascending order', () => { + const unsortedPokemons = [ + { name: "Charmander" }, + { name: "Bulbasaur" }, + { name: "Pikachu" }, + ]; + const sortedPokemons = sortPokemonsByNameAscending(unsortedPokemons); -describe('example', () => { + expect(sortedPokemons[0].name).toBe("Bulbasaur"); + expect(sortedPokemons[1].name).toBe("Charmander"); + expect(sortedPokemons[2].name).toBe("Pikachu"); + }); +}); + +// SEGUNDO TEST NOMBRE DESCEDENTE +describe('sortPokemonsByNameDescending', () => { it('is a function', () => { - expect(typeof example).toBe('function'); + expect(typeof sortPokemonsByNameDescending).toBe('function'); }); - it('returns `example`', () => { - expect(example()).toBe('example'); + it('returns an array of Pokemon sorted by name in descending order', () => { + const unsortedPokemons = [ + { name: "Charmander" }, + { name: "Bulbasaur" }, + { name: "Pikachu" }, + ]; + + const sortedPokemons = sortPokemonsByNameDescending(unsortedPokemons); + + expect(sortedPokemons[0].name).toBe("Pikachu"); + expect(sortedPokemons[1].name).toBe("Charmander"); + expect(sortedPokemons[2].name).toBe("Bulbasaur"); }); }); +//TERCER TEST NUMERO ASCEDENTE +describe('sortPokemonsByNumberAscending', () => { + it('is a function', () => { + expect(typeof sortPokemonsByNumberAscending).toBe('function'); + }); + + it('returns an array of Pokemon sorted by num in ascending order', () => { + const unsortedPokemons = [ + { num: "002" }, + { num: "251" }, + { num: "100" }, + ]; + + const sortedPokemons = sortPokemonsByNumberAscending(unsortedPokemons); -describe('anotherExample', () => { + expect(sortedPokemons[0].num).toBe("002"); + expect(sortedPokemons[1].num).toBe("100"); + expect(sortedPokemons[2].num).toBe("251"); + }); +}); + +//CUARTO TEST FILTRO POR NOMBRE +describe('filterPokemonsByName', () => { it('is a function', () => { - expect(typeof anotherExample).toBe('function'); + expect(typeof filterPokemonsByName).toBe('function'); }); - it('returns `anotherExample`', () => { - expect(anotherExample()).toBe('OMG'); + it('returns Pokemon sorted by name', () => { + const unfilteredPokemons = [ + { name: "Charmander" }, + { name: "Bulbasaur" }, + { name: "Pikachu" }, + ]; + + const searchText = 'char'; // Texto para filtrar + + const filteredPokemons = filterPokemonsByName(unfilteredPokemons, searchText); + + expect(filteredPokemons[0].name).toBe("Charmander"); + }); }); + +//QUINTO TEST POR TIPO +describe('filterPokemonsByType', () => { + it('is a function', () => { + expect(typeof filterPokemonsByType).toBe('function'); + }); + + it('returns Pokemon sorted by type', () => { + const unfilteredPokemonsbyType = [ + { type: "bug" }, + { type: "grass" }, + { type: "rock" }, + ]; + + const searchText = 'bug'; // Texto para filtrar + + const filteredPokemons = filterPokemonsByType(unfilteredPokemonsbyType, searchText); + + expect(filteredPokemons[0].type).toBe("bug"); + + }); +}); +//SEXTO TEST PROMEDIO DE ATAQUE +describe('calculateAverageAttack', () => { + it('is a function', () => { + expect(typeof calculateAverageAttack).toBe('function'); + }); + + it('returns average attack for a list of Pokemon', () => { + const pokemonList = [ + { stats: { "base-attack": "112" } }, + { stats: { "base-attack": "118" } }, + { stats: { "base-attack": "100" } }, + ]; + + const averageAttack = calculateAverageAttack(pokemonList); + + expect(averageAttack).toBe(110); + }); + +}); + + +//SEPTIMO TEST MOSTRAR QUICK MOVES +describe('generateQuickMoveNames', () => { + it('is a function', () => { + expect(typeof generateQuickMoveNames).toBe('function'); + }); + + it('generates a list of quick move names', () => { + const quickMoves = [ + { + "name": "vine whip" + }, + { + "name": "razor leaf" + } + ]; + + const result = generateQuickMoveNames(quickMoves); + + expect(result).toBe("vine whip, razor leaf"); + }); +}); + +//OCTAVO TEST RESISTENCIA +describe('generateResistantList', () => { + it('is a function', () => { + expect(typeof generateResistantList).toBe('function'); + }); + + it('returns a list of resistant names', () => { + const resistantData = [ + { + "resistant": [ + "water", + "electric", + "grass", + "fighting", + "fairy" + ] + }, + { + "resistant": [ + "fire", + "grass", + "fighting", + "bug", + "steel" + ] + } + ]; + + const generatedResistantList1 = generateResistantList(resistantData[0].resistant); + const generatedResistantList2 = generateResistantList(resistantData[1].resistant); + + expect(generatedResistantList1).toBe("water, electric, grass, fighting, fairy"); + expect(generatedResistantList2).toBe("fire, grass, fighting, bug, steel"); + }); +}); + + +//NOVENO TEST DEBILIDADES +describe('generateWeaknessesList', () => { + it('is a function', () => { + expect(typeof generateWeaknessesList).toBe('function'); + }); + + it('returns a list of weaknesses names', () => { + const weaknessesData = [ + { + "weaknesses": [ + "water", + "electric", + "rock" + ] + }, + { + "weaknesses": [ + "fire", + "flying", + "psychic", + "rock" + ] + } + ]; + + const generatedWeaknessesList1 = generateWeaknessesList(weaknessesData[0].weaknesses); + const generatedWeaknessesList2 = generateWeaknessesList(weaknessesData[1].weaknesses); + + expect(generatedWeaknessesList1).toBe("water, electric, rock"); + expect(generatedWeaknessesList2).toBe("fire, flying, psychic, rock"); + }); +}); + + + + + + + +