diff --git a/.gitignore b/.gitignore index 072a15bb..6f32c588 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ *.swp coverage/ node_modules/ +.hintrc +package-lock.json diff --git a/README.md b/README.md index a45b7d55..b111f7c2 100644 --- a/README.md +++ b/README.md @@ -1,623 +1,70 @@ -# Data Lovers +# PROYECTO POKÉMON -## Índice +## Índice +1. Introducción. +1. Descripción del proyecto. +1. Estado del proyecto. +1. Prototipo baja fidelidad. +1. Prototipo de alta fidelidad. +1. Link a Zeplin. +1. Problemas detectados en los test de usabilidad. +1. Autores del proyecto -* [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) +## Descripción del Proyecto -*** +Este proyecto está enfocado en usuarios que van desde los 10 a los 40 años de edad, para usuarios que les guste, fanáticos y para aquellos que no tienen mucha información del mundo Pokémon pero que tengan un interés en descubrirlo, los datos más relevantes que pueden encontrar en la interfaz son; tipo de pokemon, evolución, fortalezas y debilidades -## 1. Preámbulo +La pagina consta de cuatro secciones: +- Pagina de inicio donde encontraran un carrusel de imagenes informativo de lo que puedes encontrar en la pagina. +- Sección Tipos de pokémon donde se puede filtrar por tipo de pokemon, ordenar la información alfabeticamente de forma ascendente y descendente, buscar por nombre de pokémon, en la opción ver más que se encuentra en cada una de las cards, podrás obtener información detallada del pokemón. +- En la sección mencionada anteriormente tienes la opción de elegir al pokemon, solo haciendo click en la pokebola que viene incluida en cada uno de los pokemones. +- En la sección "Tu equipo" aparecera la información con los tipos de pokemones seleccionados" +- En la sección "Otros Jugadores" podras intercambiar experiencias con otros jugadores, tecnicas, descubrimientos,etc. +- En la sección "Noticias y curiosidades" tendras acceso a las nuevas generaciones e información actualizada de mundo pokémon. -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. +## Estado del proyecto -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_. +Actualmente se encuentra funcionando la sección de inicio y la de tipos de pokémon. -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. +## Prototipo de baja fidelidad -![pokemon-data-to-ui](https://user-images.githubusercontent.com/12631491/218505816-c6d11758-9de4-428f-affb-2a56ea4d68c4.png) +El prototipo se baso principalmente en las compatibilidades de los usuarios entrevistados, este se hizo en papel. -## 2. Resumen del proyecto +![Prototipo Baja Fidelidad!](/src/img/prototipoBajafidelidad.jpeg) -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 de alta fidelidad -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). +Este proyecto se realizo en cinco etapas tomando en consideración cinco HU, los prototipos de alta fidelidad se realizaron para varias screen, los resultados se muestran a continuación: -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. +1. HU1 Carrusel de imagenes informativas +![HU1!](/src/img/HU1SINERROR.png) +1. HU2 Despliegue de la data y filtrado por tipo de pokemon +![HU2!](/src/img/HU2.png) +1. HU3 Al hacer click en la card del pokemon aparece una ventana modal con la información detallada. +![HU3!](/src/img/HU3.png) +1. HU4 Ordenar información alfabéticamente +![HU4!](/src/img/HU4.png) +1. HU5 Seleccionar y almacenar pokemones en una pokebola +![HU5!](/src/img/HU5.png) -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. +## Link a Zeplin -Estos son datos que te proponemos: +https://scene.zeplin.io/project/644fe2890586d025f6fdee45 -* [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) +## Problemas detectados en los test de usabilidad -* [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) +1. En los test de usuabilidad los usuarios que no conocen pokémon no ubicaban para que servia la información presentada en las secciones, por lo que se toma la decisión de colocar un carrusel informativo. +1. El usuario menciona que la pagina donde se encuentra el carrusel no se puede visualizar correctamente ya que el texto donde se indica que puede encontrar en página tiene un fondo de imagen y las letras no son suficientemente grandes. +1. El usuario menciona que los botones de filtrado y ordenado no se ven, además de que el color en los mismo hace que se pierdan entre tantas tarjetitas. -* [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) +## Autores del proyecto -* [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) +Este proyecto fue elaborado por Valentina Paraguatey y Montserrat Poblano -* [Studio Ghibli](src/data/ghibli/ghibli.json). - En este set encontrarás una lista de las animaciones y sus personajes del - [Studio Ghibli](https://ghiblicollection.com/). - - [Investigación con seguidores de las animaciones del Studio Ghibli](src/data/ghibli/README.md) -* [Harry Potter](src/data/harrypotter/harry.json). - En este set encontrarás una lista de los personajes,libros pociones - y hechizos de toda la saga de - [Harry Potter](https://harrypotter.fandom.com). - - [Investigación con seguidoras de Harry Potter](src/data/harrypotter/README.md) -El objetivo principal de este proyecto es que aprendas a diseñar y construir una -interfaz web donde se pueda visualizar y manipular data, entendiendo lo que el -usuario necesita. -## 3. Objetivos de aprendizaje -Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo. -### HTML -- [ ] **Uso de HTML semántico** -
Links

- - * [HTML semántico](https://curriculum.laboratoria.la/es/topics/html/02-html5/02-semantic-html) - * [Semantics - MDN Web Docs Glossary](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML) -

- -### CSS - -- [ ] **Uso de selectores de CSS** - -
Links

- - * [Intro a CSS](https://curriculum.laboratoria.la/es/topics/css/01-css/01-intro-css) - * [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors) -

- -- [ ] **Modelo de caja (box model): borde, margen, padding** - -
Links

- - * [Box Model & Display](https://curriculum.laboratoria.la/es/topics/css/01-css/02-boxmodel-and-display) - * [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) - * [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) - * [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display) - * [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/) -

- -- [ ] **Uso de flexbox en CSS** - -
Links

- - * [A Complete Guide to Flexbox - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - * [Flexbox Froggy](https://flexboxfroggy.com/#es) - * [Flexbox - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) -

- -### Web APIs - -- [ ] **Uso de selectores del DOM** - -
Links

- - * [Manipulación del DOM](https://curriculum.laboratoria.la/es/topics/browser/02-dom/03-1-dom-methods-selection) - * [Introducción al DOM - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) - * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) -

- -- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)** - -
Links

- - * [Introducción a eventos - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Events) - * [EventTarget.addEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener) - * [EventTarget.removeEventListener() - MDN](https://developer.mozilla.org/es/docs/Web/API/EventTarget/removeEventListener) - * [El objeto Event](https://developer.mozilla.org/es/docs/Web/API/Event) -

- -- [ ] **Manipulación dinámica del DOM** - -
Links

- - * [Introducción al DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) - * [Node.appendChild() - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/appendChild) - * [Document.createElement() - MDN](https://developer.mozilla.org/es/docs/Web/API/Document/createElement) - * [Document.createTextNode()](https://developer.mozilla.org/es/docs/Web/API/Document/createTextNode) - * [Element.innerHTML - MDN](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML) - * [Node.textContent - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/textContent) -

- -### JavaScript - -- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos** - -- [ ] **Arrays (arreglos)** - -
Links

- - * [Arreglos](https://curriculum.laboratoria.la/es/topics/javascript/04-arrays) - * [Array - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/) - * [Array.prototype.sort() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) - * [Array.prototype.forEach() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) - * [Array.prototype.map() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map) - * [Array.prototype.filter() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) - * [Array.prototype.reduce() - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) -

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

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

- -- [ ] **Variables (declaración, asignación, ámbito)** - -
Links

- - * [Valores, tipos de datos y operadores](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/01-values-variables-and-types) - * [Variables](https://curriculum.laboratoria.la/es/topics/javascript/01-basics/02-variables) -

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

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

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

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

- -- [ ] **Funciones (params, args, return)** - -
Links

- - * [Funciones (control de flujo)](https://curriculum.laboratoria.la/es/topics/javascript/02-flow-control/03-functions) - * [Funciones clásicas](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/01-classic) - * [Arrow Functions](https://curriculum.laboratoria.la/es/topics/javascript/03-functions/02-arrow) - * [Funciones — bloques de código reutilizables - MDN](https://developer.mozilla.org/es/docs/Learn/JavaScript/Building_blocks/Functions) -

- -- [ ] **Pruebas unitarias (unit tests)** - -
Links

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

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

- - * [import - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import) - * [export - MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/export) -

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

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

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

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

- -## 4. Consideraciones generales - -* Este proyecto se debe resolver en duplas. -* El rango de tiempo estimado para completar el proyecto es de 3 a 4 Sprints. -* El proyecto será entregado subiendo tu código a GitHub (commit/push) y la - interfaz será desplegada usando [GitHub Pages](https://pages.github.com/). - -## 5. Criterios de aceptación mínimos del proyecto - -Los criterios para considerar que has completado este proyecto son: - -### Definición del producto - -Documenta brevemente tu trabajo en el archivo `README.md` de tu repositorio, -contándonos cómo fue tu proceso de diseño y cómo crees que el producto resuelve -el problema (o problemas) que tiene tu usuario. - -### Historias de usuario - -Una vez que entiendas las necesidades de tus usuarios, escribe las [Historias -de Usuario](https://es.wikipedia.org/wiki/Historias_de_usuario) que representen -todo lo que el usuario necesita hacer/ver. Las **Historias de Usuario** deben -ser el resultado de tu proceso de investigación o _research_ de tus usuarios. - -Asegúrate de incluir la definición de terminado (_definition of done_) y los -Criterios de Aceptación para cada una. - -En la medida de lo posible, termina una historia de usuario antes de pasar -a la siguiente (Cumple con Definición de Terminado + Criterios de Aceptación). - -### Diseño de la Interfaz de Usuario - -#### Prototipo de baja fidelidad - -Durante tu trabajo deberás haber hecho e iterado bocetos (_sketches_) de tu -solución usando papel y lápiz. Te recomendamos tomar fotos de todas las -iteraciones que hagas, que las subas a tu repositorio y las menciones en tu -`README.md`. - -#### Prototipo de alta fidelidad - -Lo siguiente es diseñar tu Interfaz de Usuario (UI por sus siglas en inglés - -_User Interface_). Para eso debes aprender a utilizar alguna herramienta de -diseño visual. Nosotros te recomendamos [Figma](https://www.figma.com/) que es -una herramienta que funciona en el navegador y, además, puedes crear una cuenta -gratis. Sin embargo, eres libre de utilizar otros editores gráficos como -Illustrator, Photoshop, PowerPoint, Keynote, etc. - -El diseño debe representar el _ideal_ de tu solución. Digamos que es lo que -desearías implementar si tuvieras tiempo ilimitado para trabajar. Además, tu -diseño debe seguir los fundamentos de _visual design_. - -#### Testeos de usabilidad - -Durante el reto deberás hacer _tests_ de usabilidad con distintos usuarios, y -en base a los resultados, deberás iterar tus diseños. Cuéntanos -qué problemas de usabilidad detectaste a través de los _tests_ y cómo los -mejoraste en tu propuesta final. - -### Implementación de la Interfaz de Usuario (HTML/CSS/JS) - -Luego de diseñar tu interfaz de usuario deberás trabajar en su implementación. -**No** es necesario que construyas la interfaz exactamente como la diseñaste. -Tu tiempo de hacking es escaso, así que deberás priorizar - -Como mínimo, tu implementación debe: - -1. Mostrar la data en una interfaz: puede ser un card, una tabla, una lista, - etc. -2. Permitir al usuario interactuar para obtener la infomación que necesita. -3. Ser _responsive_, es decir, debe visualizarse sin problemas desde distintos - tamaños de pantallas: móviles, tablets y desktops. -4. Que la interfaz siga los fundamentos de _visual design_. - -### Pruebas unitarias - -El _boilerplate_ de este proyecto no incluye Pruebas Unitarias (_tests_), así es -que tendrás que escribirlas tú para las funciones encargadas de _procesar_, -_filtrar_ y _ordenar_ la data, así como _calcular_ estadísticas. - -Tus _pruebas unitarias_ deben dar una cobertura del 70% de _statements_ -(_sentencias_), _functions_ (_funciones_), _lines_ (_líneas_), y _branches_ -(_ramas_) del archivo `src/data.js` que contenga tus funciones y está detallado -en la sección de [Consideraciones técnicas](#srcdatajs). - -## 6. Hacker edition - -Las secciones llamadas _Hacker Edition_ son **opcionales**. Si **terminaste** -con todo lo anterior y te queda tiempo, intenta completarlas. Así podrás -profundizar y/o ejercitar más sobre los objetivos de aprendizaje del proyecto. - -Features/características extra sugeridas: - -* En lugar de consumir la data estática brindada en este repositorio, puedes - consumir la data de forma dinámica, cargando un archivo JSON por medio de - `fetch`. La carpeta `src/data` contiene una versión `.js` y una `.json` de - de cada set datos. -* Agregarle a tu interfaz de usuario implementada visualizaciones gráficas. Para - ello te recomendamos explorar librerías de gráficas como - [Chart.js](https://www.chartjs.org/) - o [Google Charts](https://developers.google.com/chart/). -* 100% Coverage - -## 7. Consideraciones técnicas - -La lógica del proyecto debe estar implementada completamente en JavaScript -(ES6), HTML y CSS. En este proyecto NO está permitido usar librerías o -frameworks, solo [vanilla JavaScript](https://medium.com/laboratoria-how-to/vanillajs-vs-jquery-31e623bbd46e), -con la excepción de librerías para hacer gráficas (charts); ver -[_Parte opcional_](#6-hacker-edition) más arriba. - -El _boilerplate_ contiene una estructura de archivos como punto de partida así -como toda la configuración de dependencias: - -```text -. -├── EXTRA.md -├── README.md -├── package.json -├── src -| ├── data (según con qué data trabajes) -| | ├── lol -| | | ├── lol.js -| | | ├── lol.json -| | | └── README.md -| | ├── pokemon -| | | ├── pokemon.js -| | | ├── pokemon.json -| | | └── README.md -| | └── rickandmorty -| | | ├── rickandmorty.js -| | | ├── rickandmorty.json -| | | └── README.md -| | └── athletes -| | | ├── athletes.js -| | | ├── athletes.json -| | | └── README.md -| | └── ghibli -| | | ├── ghibli.js -| | | ├── ghibli.json -| | | └── README.md -| ├── data.js -| ├── index.html -| ├── main.js -| └── style.css -└── test - └── data.spec.js - -directory: 7 file: 20 -``` - -### `src/index.html` - -Como en el proyecto anterior, existe un archivo `index.html`. Como ya sabes, -acá va la página que se mostrará al usuario. También nos sirve para indicar -qué scripts se usarán y unir todo lo que hemos hecho. - -### `src/main.js` - -Recomendamos usar `src/main.js` para todo tu código que tenga que ver con -mostrar los datos en la pantalla. Con esto nos referimos básicamente a la -interacción con el DOM. Operaciones como creación de nodos, registro de -manejadores de eventos (_event listeners_ o _event handlers_), .... - -Esta no es la única forma de dividir tu código, puedes usar más archivos y -carpetas, siempre y cuando la estructura sea clara para tus compañeras. - -En este archivo encontrarás una serie de _imports_ _comentados_. Para _cargar_ -las diferentes fuentes de datos tendrás que _descomentar_ la línea -correspondiente. - -Por ejemplo, si "descomentamos" la siguiente línea: - -```js -// import data from './data/lol/lol.js'; -``` - -La línea quedaría así: - -```js -import data from './data/lol/lol.js'; -``` - -Y ahora tendríamos la variable `data` disponible en el script `src/main.js`. - -### `src/data.js` - -El corazón de este proyecto es la manipulación de datos a través de arreglos -y objetos. - -Te recomendamos que este archivo contenga toda la funcionalidad que corresponda -a obtener, procesar y manipular datos (tus funciones). Por ejemplo: - -* `filterData(data, condition)`: esta función `filter` o filtrar recibiría la - data, y nos retornaría aquellos datos que sí cumplan con la condición. - -* `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 ` + + diff --git a/src/main.js b/src/main.js index 71c59f2d..9264bbc9 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,133 @@ -import { example } from './data.js'; +import { mostrarPokemon, ordenar,ordenarZa,busquedaName,filtradoPorTipo,datosTarjeta } from './data.js'; // import data from './data/lol/lol.js'; -import data from './data/pokemon/pokemon.js'; +import {Objetos} from './data/pokemon/pokemon.js'; // import data from './data/rickandmorty/rickandmorty.js'; -console.log(example, data); + + +let pokemonPantalla=Objetos.pokemon + + +const btnFiltro = document.querySelectorAll('.filtro-tipo'); +const btnData = document.getElementById('ver-todos'); +const btnAz=document.getElementById('filtrarAz'); +const btnZa=document.getElementById('filtrarZa'); +const listaPokemon = document.getElementById('listaPokemon'); +const iconobusqueda=document.getElementById("icono-busqueda"); +const navburger=document.querySelector(".nav-burger"); +const navMenu2=document.querySelector(".menu-nav2"); +navburger.addEventListener("click", ()=> + navMenu2.classList.toggle("nav-menu_visible")); +const contenedorPoke=document.querySelector("#lista-pokebola") +const vaciarPokebola=document.querySelector("#vaciar-pokebola") + + + +document.addEventListener('DOMContentLoaded', mostrarPokemon); + +// hay un error en nuestra funcion de mostrar todos solo funciona una vez +btnData.addEventListener('click', () => { + listaPokemon.innerHTML = " "; + mostrarPokemon() +}) + + +btnFiltro.forEach(boton => boton.addEventListener ('click', (e)=> { + listaPokemon.innerHTML=" "; + const type=e.currentTarget.id + pokemonPantalla=filtradoPorTipo(Objetos.pokemon,type) + mostrarPokemon(pokemonPantalla) +})); + +btnAz.addEventListener("click", ()=>{ + listaPokemon.innerHTML=" "; + const ordenarAzz = ordenar(pokemonPantalla) + mostrarPokemon(ordenarAzz) + + +}); + +btnZa.addEventListener("click", ()=>{ + listaPokemon.innerHTML = " "; + const ordenarZaa = ordenarZa(pokemonPantalla) + mostrarPokemon(ordenarZaa) + +}); + + +iconobusqueda.addEventListener("click", ()=>{ + listaPokemon.innerHTML = " "; + pokemonPantalla = busquedaName(); + mostrarPokemon(pokemonPantalla) +}) + + +listaPokemon.addEventListener("click",agregarPokemon) +let articulosCarrito=[]; +let tipos2=[]; +function agregarPokemon(e){ + + if(e.target.classList.contains("pokebola")){ + const ident=e.target.id + tipos2=[...tipos2,ident] + console.log(tipos2) + const pokebo=e.target.parentElement.parentElement; + const datitos=datosTarjeta(pokebo); + + const existeEnCarrito=articulosCarrito.some(elemento=>elemento.nombre===datitos.nombre) + if(existeEnCarrito){ + const pokemones=articulosCarrito.map(elemento=>{ + + if(elemento.nombre===datitos.nombre){ + elemento.cantidad++; + return elemento + }else{ + return elemento; + } + }); + articulosCarrito=[...pokemones] + }else{ + articulosCarrito=[...articulosCarrito,datitos] + + } + + console.log(articulosCarrito) + + carritoHTML() + + + } + +} + + +function carritoHTML() { + contenedorPoke.innerHTML = " "; + + articulosCarrito.forEach(pokebo => { + const row = document.createElement('tr'); + row.innerHTML = ` + + + + + ${pokebo.nombre} + ${pokebo.cantidad} + ${pokebo.tipo} + `; + + contenedorPoke.appendChild(row); + }); + + } + + vaciarPokebola.addEventListener("click",()=>{ + + articulosCarrito.filter + }) + + + + + + diff --git a/src/noticiasycuriosidades.html b/src/noticiasycuriosidades.html new file mode 100644 index 00000000..a4026c9b --- /dev/null +++ b/src/noticiasycuriosidades.html @@ -0,0 +1,86 @@ + + + + + + Data Lovers + + + + + + + + + +
+ + + +
+ +
+ + +
+ + + +
+
+ + + + + diff --git a/src/style.css b/src/style.css index e69de29b..bc55d64c 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,1018 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body{ + + font-family: 'Limelight'; + + +} + +html{ + font-size: 16px; +} + + +/*Barra de navegación*/ + + + +.navegacion { + + background-color:#292929; + display: flex; + justify-content: center; +} + +.navegacion ul { + list-style: none; +} + +.navegacion a { + text-decoration: none; +} + +.menu-nav { + box-sizing: border-box; + min-width: 80%; + display: flex; + justify-content: center; + height: 70px; + background-color: rgba(0, 0, 80.39, 0.1); + box-shadow: 0 0 3rem -1rem rgba(0, 0, 80.39, 0.4); +} + +.menu-nav li{ + flex-basis: 0; + flex-grow: 1; + position: relative; + border-right: 1px solid #41414a; +} + +.menu-nav li a { + display: flex; + flex-direction: column; + text-align: center; + font-size:16px; + font-family: 'Limelight'; +} + +.menu-nav .itemImagen { + width: 0%; + z-index: 2; + position: absolute; + bottom: 0; + transition: .4s ease-in; +} + +.menu-nav li a .texto-item { + margin-top: 28px; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + color:#fff; + position: absolute; + z-index: 1; + transition: .4s ease-out; + text-transform: uppercase; +} + +.menu-nav li a .down-item { + position: absolute; + top: 0%; + width: 100%; + height:auto; + box-shadow: 0 0 3rem -1rem rgba(4, 25, 216, 0.4); + transition: .3s ease-in; +} + + +.menu-nav li:hover .down-item, .menu-nav li:hover .texto-item{ +top: 95%; +max-height: 110%; +} + +.menu-nav li:hover .itemImagen{ + width: 20%; + right: 80px; +} + +.u-pull-right { + float: right; +} + +.u-pull-right ul { + list-style: none; +} + +.submenu { + position: relative; +} + +#img-carrito { +max-width: 38px; +max-height: 32px; +position: absolute; +top: 20px; +left: 50px; +} + +.submenu #carrito { + display: none; +} + +.submenu:hover #carrito{ + display: block; + position: absolute; + right:0; + top:100%; + z-index: 1; + background-color: white; + padding: 20px; + min-height: 400px; + min-width: 300px; +} + +table { + border-collapse: collapse; + border-spacing: 0; + border-color: gray; +} + +thead { + display: table-header-group; + vertical-align: middle; + border-color: inherit; +} + +tr { + display: table-row; + vertical-align: inherit; + border-color: inherit; +} + +th { + display: table-cell; + vertical-align: inherit; + font-weight: bold; + text-align: -internal-center; + padding: 12px 15px; + text-align: left; + border-bottom: 1px solid #E1E1E1; +} + +#carrito a { + border-radius: 20px; + border: 2px solid #292929; + text-align: center; + background-color: #292929; + color: #fff; + font-size: 16px; + font-weight: bold; + font-family: Limelight; + font-weight: lighter; +} + +#carrito a:hover { +box-shadow: 0 10px 10px 0 rgba(4, 25, 216, 0.5); +} + +.navegacion2{ + display: none; +} + + +@media screen and (max-width:768px) { + .navegacion{ + display: none; + + } + + header{ + height: 60px; + background-color: #292929; + width: 100%; + top:0; + left:0; + position: fixed; + } + + .navegacion2{ + display: block; + display: flex; + justify-content: space-between; + max-width: 992px; + margin:0 auto; + + } + + .menu{ + font-size: 12px; + padding: 10px 10px; + color:#fff; + line-height: 40px; + } + + .nav-burger{ + border: none; + background: none; + color:#fff; + font-size: 30px; + padding: 10px 20px; + display: flex; + + } + + + a{ + text-decoration: none; + color: #fff; + + } + + .menu-nav2{ + display: flex; + flex-direction: column; + list-style: none; + margin-right: 40px; + position:fixed; + left:0; + top: 50px; + width: 50%; + align-items: center; + background-color: #292929; + padding: 10px 0; + height: calc(100%-50px); + overflow-y: auto; + left:100% + } + + .lista-menu{ + font-size: 13px; + text-transform: uppercase; + margin:0 10px; + line-height: 50px; + width: max-content; + } + + .link-menu:hover { + color:white; + transition: 0.5s; + } + + .nav-menu_visible{ + left:0%; + transition:left 0.3s; + } + + +} + +@media screen and (max-width:576px) { + + .navegacion{ + display: none; + + } + + header{ + height: 40px; + background-color: #292929; + width: 100%; + top:0; + left:0; + position: fixed; + } + + .navegacion2{ + display: block; + display: flex; + justify-content: space-between; + max-width: 992px; + margin:0 auto; + + } + + .menu{ + font-size: 12px; + padding: 10px 10px; + color: #fff; + line-height: 25px; + } + + .nav-burger{ + border: none; + background: none; + color:#fff; + font-size: 20px; + padding: 10px 20px; + display: flex; + + } + + + .menu-nav2{ + display: flex; + flex-direction: column; + list-style: none; + margin-right: 40px; + position:fixed; + left:0; + top: 40px; + width: 50%; + align-items: center; + background-color: #292929; + padding: 10px 0; + height: calc(100%-40px); + overflow-y: auto; + left:100% + } + + .lista-menu{ + font-size: 10px; + text-transform: uppercase; + margin:0 5px; + line-height: 35px; + width: max-content; + } + + .link-menu:hover { + color:white; + transition: 0.5s; + } + + .nav-menu_visible{ + left:0%; + transition:left 0.3s; + } + + + } + + + + +.titulo-principal { +display: flex; +flex-direction: column; +align-items: center; +} + +.titulo-principal img { + max-width: 100%; + max-height: auto; + object-fit: cover; + margin-top: 3%; +} + +#conteItemsCarrusel { + box-sizing: border-box; + width: 100%; + height: 520px; + overflow: hidden; +} + +.itemCarrusel { + height: 100%; + position: relative; + margin: 20px 0; + flex-direction: column; + justify-content: center; + overflow: contain; +} + +.tarjetaCarrusel { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.tarjetaCarrusel .texto-Foto h3{ + font-size:18px; + text-align: center; + color:#41414a; + font-weight:lighter; + padding-top: 10px; + text-transform: uppercase; +} + + +.tarjetaCarrusel img { + max-width: 90%; + max-height: 75%; + object-fit: cover; +} + +.flechasCarrusel { + height: 50%; + position: absolute; + top: 20%; + width: 100%; + display: flex; + align-items: center; + justify-content:space-between; +} + +.flechasCarrusel i{ + font-size: 35px; +} + + +footer { + text-align: center; + font-weight: lighter; + font-size: 10px; + color:grey; +} + +@media screen and (max-width:768px) { + + .titulo-principal img { + margin-top: 13%; + } + + #conteItemsCarrusel { + box-sizing: border-box; + height: 400px; + } + + .itemCarrusel { + height: 95%; + position: relative; + } + + .tarjetaCarrusel { + height: 95%; + } + + .tarjetaCarrusel .texto-Foto h3{ + font-size:13px; + } + + .tarjetaCarrusel img { + max-width: 100%; + max-height: 70%; + object-fit: cover; + + } + + + .flechasCarrusel i{ + font-size: 30px; + } + + footer { + + font-size: 8px; + } + +} + + +@media screen and (max-width:576px) { + + .titulo-principal img { + max-width: 100%; + max-height: auto; + object-fit: cover; + + } + + #conteItemsCarrusel { + box-sizing: border-box; + max-width: 100%; + max-height: 300px; + overflow: hidden; + } + + + .itemCarrusel { + min-height: 90%; + position: relative; + flex-direction: column; + justify-content: center; + overflow: cover; + } + + .tarjetaCarrusel { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + + } + + .tarjetaCarrusel .texto-Foto h3{ + font-size:7px; + text-align: center; + color: #41414a; + font-weight:lighter; + padding-top: 20px; + } + + + .tarjetaCarrusel img { + max-width: 85%; + max-height: 60%; + object-fit: cover; + } + + .flechasCarrusel { + height: 30%; + position: absolute; + top: 25%; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + + + } + + .flechasCarrusel i{ + font-size: 20px; + } + + footer { + text-align: center; + font-weight: lighter; + font-size: 8px; + color:grey; + + } + +} + +*/ + +/*SEGUNDA PAGINA*/ +article > section:nth-child(1){ + margin: 0 0; + width: 100%; + height:auto; + background-color: #8BD9D1; +} + + +#seccion1 h1{ + max-width: 100%; + font-size: 40px; + text-align: center; + color: #41414a; + padding-top: 70px; + padding-bottom: 10px; + background-color: #8BD9D1; + +} + + + + #seccion1 #campoBusqueda { + max-width:100%; + display: flex; + align-items: center; + justify-content: center; + margin-top: 0px; + background-color: #8BD9D1; + color: #41414a; + + + + +} + +#busqueda { + min-width: 40%; + height: 5%; + margin: 15px 20px; + padding: 15px 12px ; + border-radius: 10px 10px; + border-color:#8BD9D1; + font-family: "Limelight"; + font-size: 12px; + border:none + + +} + +#icono-busqueda{ + cursor: pointer; +} + + +.filtro{ + display:none; +} + + +article > section:nth-child(2){ + margin: 0 0; + background-color: #8BD9D1; +} + +#seccion2 { + display: grid; + grid-template-columns: auto; + max-width: 100%; + justify-content: center; + text-align: center; + padding-top: 50px; + align-content: center; + + + +} + +#seccion2 img { + + + max-width: 5%; + height: auto; + border-radius: 50%; + left:10px; + +} + +#seccion2 img:hover { + box-shadow: 0 10px 10px 0 rgba(4, 25, 216, 0.5); +} + +#seccion2 button { + width: 70px; + height: 50px; + border-radius: 20px; + border: 2px solid #292929; + text-align: center; + background-color: #292929; + color: #fff; + font-size: 16px; + font-weight: bold; + font-family: Limelight; + font-weight: lighter; + margin-top: 15px; +} + +#seccion2 button:hover { + box-shadow: 0 10px 10px 0 rgba(4, 25, 216, 0.5); +} + + +article > section:nth-child(3){ + padding: 4rem; + background-color: #8BD9D1; + max-width:100%; + display:flex; + flex-direction: column; + justify-content: center; + + + +} +.pokemon-todos { + display: grid; + grid-template-columns: 0.18fr 0.18fr 0.18fr 0.18fr; + gap: 1rem; + justify-content: center; + +} + +.pokemon { + border-radius: 1rem; + /*background-color: rgba(4, 25, 216, .17); + box-shadow: 0 0 3rem -1rem rgba(4, 25, 216, 0.4);*/ + background-color: #9ae5f3; + padding-block: 1rem; + text-transform: uppercase; + + + +} + +.pokemonImagen{ + padding-inline: 1rem; + display: flex; + justify-content: center; +} + +.pokemon-info { + display: flex; + flex-direction: column; + gap: .5rem; + padding-inline: 1.5rem; + align-items: center; + text-align: center; + +} + +.nombre-contenedor { + display: flex; + align-items: center; + column-gap: .5rem; + flex-wrap: wrap; + justify-content: center; +} + +.pokemon-id { + + background-color: #8BD9D1; + padding: .25rem .5rem; + border-radius: 1rem; + font-size: .75rem; + font-weight: bold; + width: 30%; +} + +.pokemon-nombre { + font-size: 1.3rem; +} + +.pokemon button{ + width: 70px; + height: 35px; + background-color: #41414a; + /*background-color: rgba(4,25,216,.17); + box-shadow: 0 0 3rem -1rem rgba(4, 25, 216, 0.4);*/ + border-radius: 20px; + border:white; + color:white; + font: size 12px; + font-weight: bold; + margin-top: 10px; + font-family: Limelight; + font-size: 12px; + font-weight: lighter; +} + +.pokemon button:hover{ + background-color: #8BD9D1; + color:black; + +} + +.contenedorModal{ + opacity: 0; + visibility: hidden; + position:fixed; + z-index:1; + width: 100%; + height: 100%; + top:0; + left:0; + background-color: rgba(0,0,0,0.5); + display: flex; + justify-content: center; + align-items: center; + +} + +.modal{ + width: 60%; + height: 60%; + background-color:#9ae5f3; + border-radius:30px; + text-align: center; + display:grid; + grid-template-columns: 250px auto; + left: 20%; + position:relative; + transition:transform 0.8s; + transform:translateY(0%); + +} + +.modal-close{ + display:none; +} + +.close{ + + width: 25px; + height: 25px; + /* margin-top: 10px;*/ + position: absolute; + top:5px; + right:5px; + display: inline-block; + cursor: pointer; + +} + +/*.modal .caja1{ + display:flex; + justify-content: space-between; + margin: top 20px; + padding: 40px 10px; + border: 1px solid red; + +}*/ + +.modal .imagen-pokemon{ + + max-width: 100%; + height: 100%; + object-fit: cover; + +} + +.modal img{ + width: 70%; + height:auto; + object-fit: cover; +} + +.modal .imagen-pokemon .num-size{ + + font-size:15px; + color:#41414a; + font-weight: bold; + text-transform: capitalize; + max-width: 100%; + max-height: auto; +} + +.caja1 h3{ + font-size: 18px; + text-align:left; + padding-top: 5px; + padding-left: 10px; + color: #41414a; + +} + +.caja1 p{ + color:#293462; + +} + + + +/*.modal .infoGeneral { + display:flex; + justify-content: center; + align-items: center; + max-width: 50%; + height: 10%; + border: 1px solid salmon; + overflow: hidden; + +}*/ +/* + +.modal .infoGeneral p{ + font-size: 15px; + color:#292929; + text-align: center; +}*/ + +/*.modal .infoGeneral .fa-solid{ + color:#FFD700 +} + +/*.modal .caja-alineada{ +display: flex; +justify-content: space-around; +margin-top:20px; +border: 1px solid green; +}*/ + +/*.caja-alineada .baseDefensa .fa-solid{ + color:#FFD700 +} + +.caja-alineada .baseDefensa{ + margin-top: 22px; + padding-top: 30px; +}*/ + +/*.modal .resistant{ + border:4px solid #19e938; + border-radius: 30px; + width: 50%; + height: auto; + border:#19e938 + +} + +.modal .weaknesses{ + border:4px solid #d20906; + border-radius: 30px; + width: 180px; + height: 200px; + +} + +/*.modal .caja-alineada2{ + display: flex; + justify-content: space-around; + +}*/ +.baseDefensa{ + width: 100%; + grid-column: 2 / 3; + grid-row: 1 / 3; +} + +.baseDefensa p.about{ + padding-top: 25px; + font-size: 15px; + color: #293462; + text-align: left; + padding-bottom: 5px; + margin-bottom: 0px; +} + +.contenedorResistencia{ + display: grid; + grid-template-columns: auto auto; + height: 100px; + +} + +.resistencia,.weakness,.stats,.specialAtack{ + padding-top: 10px; + text-align: center; + +} + +.resistencia h3,.weakness h3{ + font-size: 18px; + padding-top: 15px; + color: #41414a; + text-align: center; + +} + +.resistencia p,.weakness p{ + font-size: 15px; + color: #293462; +} + + +.weakness p{ + + padding-top: 10px; +} + +.contenedorStats{ + display: grid; + grid-template-columns: auto auto; + + +} + +.stats h3{ + text-align: left; + font-size: 18px; + padding-left: 25px; + color: #41414a; + +} + +.specialAtack h3{ + text-align: center; + font-size: 18px; + padding-right: 5px; + color: #41414a; + +} + +.stats p{ + font-size: 15px; + text-align: left; + color: #293462; +} + + +.specialAtack li{ + font-size: 15px; + text-align: left; + margin-left: 50px; + color: #293462; + list-style: none; +} + +.stats .fa-solid,.specialAtack .fa-solid{ + color: #f2b90f; + font-size: 10px; +} + + +.evolution h3{ + font-size: 18px; + text-align: center; + padding-top: 10px; + color: #41414a; +} + +p.evolucion{ + font-size: 13px; + color: #293462; +} \ No newline at end of file diff --git a/src/tiposPoquemon.html b/src/tiposPoquemon.html new file mode 100644 index 00000000..2b0d2853 --- /dev/null +++ b/src/tiposPoquemon.html @@ -0,0 +1,212 @@ + + + + + + Data Lovers + + + + + + + + +
+ + + +
+
+
+
+

TIPOS DE POKÉMON

+
+ + + +
+ +
+ +
+
+ bug + dragon + electric + fairy + fighting + fire + flying + ghost + grass + ground + ice + normal + poison + psychic + rock + steel + water +
+
+ + + +
+
+ +
+
+
+ +
+
+ +
+ +
+ +
+ +
+
+ + + + + + + + + diff --git a/test/data.spec.js b/test/data.spec.js index 09b1f23f..b8956b5e 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,23 +1,255 @@ -import { example, anotherExample } from '../src/data.js'; +import { filtradoPorTipo, ordenar, ordenarZa } from '../src/data.js'; -describe('example', () => { - it('is a function', () => { - expect(typeof example).toBe('function'); - }); +describe('filtradoPorTipo', () => { + + it('Devuelve un array solo con los elementos del tipo especificado', () => { + + //Datos de prueba + const data = [ + { id: 1, type: 'fire' }, + { id: 2, type: 'water' }, + { id: 3, type: 'grass' }, + { id: 4, type: 'fire' } + + ]; + + //Tipo a filtrar + const tipo = 'fire'; + + //Mando a llamar la función con los datos de prueba y el tipo a filtrar + const resultado = filtradoPorTipo(data, tipo); - it('returns `example`', () => { - expect(example()).toBe('example'); + //Se comprueba que el resultado es un array con los elementos del tipo especificado + expect(resultado).toEqual([ + { id: 1, type: 'fire' }, + { id: 4, type: 'fire' } + + ]); }); + + it('Devuelve un array vacío si no se especifica un tipo', () => { + + //Daros prueba + const data = [ + { id: 1, type: 'fire' }, + { id: 2, type: 'water' }, + { id: 3, type: 'grass' } + ]; + + // Tipo no especificado + const tipo = undefined; + + //Llamar a la función con los datos de prueba y el tipo no especificado + const resultado = filtradoPorTipo(data, tipo); + + //Comprobar que el resultado es un array vacio + expect(resultado).toEqual([]); + }) + }); -describe('anotherExample', () => { - it('is a function', () => { - expect(typeof anotherExample).toBe('function'); - }); - it('returns `anotherExample`', () => { - expect(anotherExample()).toBe('OMG'); +const entrada = [{ + "num": "004", + "name": "charmander", + "generation": { + "num": "generation i", + "name": "kanto" + }, + "about": "The flame that burns at the tip of its tail is an indication of its emotions. The flame wavers when Charmander is enjoying itself. If the Pokémon becomes enraged, the flame burns fiercely.", + "img": "https://www.serebii.net/pokemongo/pokemon/004.png", + "size": { + "height": "0.61 m", + "weight": "8.5 kg" + }, + "pokemon-rarity": "normal", + "type": [ + "fire" + ] +}, +{ + "num": "001", + "name": "bulbasaur", + "generation": { + "num": "generation i", + "name": "kanto" + }, + "about": "Bulbasaur can be seen napping in bright sunlight. There is a seed on its back. By soaking up the sun's rays, the seed grows progressively larger.", + "img": "https://www.serebii.net/pokemongo/pokemon/001.png", + "size": { + "height": "0.71 m", + "weight": "6.9 kg" + }, + "pokemon-rarity": "normal", + "type": [ + "grass", + "poison" + ] +}, +{ + "num": "002", + "name": "ivysaur", + "generation": { + "num": "generation i", + "name": "kanto" + }, + "about": "There is a bud on this Pokémon's back. To support its weight, Ivysaur's legs and trunk grow thick and strong. If it starts spending more time lying in the sunlight, it's a sign that the bud will bloom into a large flower soon.", + "img": "https://www.serebii.net/pokemongo/pokemon/002.png", + "size": { + "height": "0.99 m", + "weight": "13.0 kg" + }, + "pokemon-rarity": "normal", + "type": [ + "grass", + "poison" + ] +}, +] + + +const salida = [{ + "num": "001", + "name": "bulbasaur", + "generation": { + "num": "generation i", + "name": "kanto" + }, + "about": "Bulbasaur can be seen napping in bright sunlight. There is a seed on its back. By soaking up the sun's rays, the seed grows progressively larger.", + "img": "https://www.serebii.net/pokemongo/pokemon/001.png", + "size": { + "height": "0.71 m", + "weight": "6.9 kg" + }, + "pokemon-rarity": "normal", + "type": [ + "grass", + "poison" + ] +}, +{ + "num": "004", + "name": "charmander", + "generation": { + "num": "generation i", + "name": "kanto" + }, + "about": "The flame that burns at the tip of its tail is an indication of its emotions. The flame wavers when Charmander is enjoying itself. If the Pokémon becomes enraged, the flame burns fiercely.", + "img": "https://www.serebii.net/pokemongo/pokemon/004.png", + "size": { + "height": "0.61 m", + "weight": "8.5 kg" + }, + "pokemon-rarity": "normal", + "type": [ + "fire" + ] +}, { + "num": "002", + "name": "ivysaur", + "generation": { + "num": "generation i", + "name": "kanto" + }, + "about": "There is a bud on this Pokémon's back. To support its weight, Ivysaur's legs and trunk grow thick and strong. If it starts spending more time lying in the sunlight, it's a sign that the bud will bloom into a large flower soon.", + "img": "https://www.serebii.net/pokemongo/pokemon/002.png", + "size": { + "height": "0.99 m", + "weight": "13.0 kg" + }, + "pokemon-rarity": "normal", + "type": [ + "grass", + "poison" + ] +}, + +] + +const salidaAz = [ + { + "num": "002", + "name": "ivysaur", + "generation": { + "num": "generation i", + "name": "kanto" + }, + "about": "There is a bud on this Pokémon's back. To support its weight, Ivysaur's legs and trunk grow thick and strong. If it starts spending more time lying in the sunlight, it's a sign that the bud will bloom into a large flower soon.", + "img": "https://www.serebii.net/pokemongo/pokemon/002.png", + "size": { + "height": "0.99 m", + "weight": "13.0 kg" + }, + "pokemon-rarity": "normal", + "type": [ + "grass", + "poison" + ] + }, + { + "num": "004", + "name": "charmander", + "generation": { + "num": "generation i", + "name": "kanto" + }, + "about": "The flame that burns at the tip of its tail is an indication of its emotions. The flame wavers when Charmander is enjoying itself. If the Pokémon becomes enraged, the flame burns fiercely.", + "img": "https://www.serebii.net/pokemongo/pokemon/004.png", + "size": { + "height": "0.61 m", + "weight": "8.5 kg" + }, + "pokemon-rarity": "normal", + "type": [ + "fire" + ] + }, { + "num": "001", + "name": "bulbasaur", + "generation": { + "num": "generation i", + "name": "kanto" + }, + "about": "Bulbasaur can be seen napping in bright sunlight. There is a seed on its back. By soaking up the sun's rays, the seed grows progressively larger.", + "img": "https://www.serebii.net/pokemongo/pokemon/001.png", + "size": { + "height": "0.71 m", + "weight": "6.9 kg" + }, + "pokemon-rarity": "normal", + "type": [ + "grass", + "poison" + ] + }, +] + +describe("ordenar", () => { + it("ordenar debe recibir un array como argumento", () => { + const newArray = ["a", "b", "c"]; + expect(ordenar(newArray)); + }) + it("is a function", () => { + expect(typeof ordenar).toBe("function"); }); + + it("funcion entrega un array con nombres organizados de la A a la Z", () => { + expect(ordenar(entrada)).toEqual(salida) + }) }); + +describe("ordenar de la Z a la A", () => { + it("ordenar debe recibir un array como argumento", () => { + const newArray = ["a", "b", "c"]; + expect(ordenarZa(newArray)); + }) + it("is a function", () => { + expect(typeof ordenarZa).toBe("function"); + }); + + it("funcion entrega un array con nombres organizados de la Z a la A", () => { + expect(ordenarZa(entrada)).toEqual(salidaAz) + }) +}); \ No newline at end of file