diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..c8c1e197 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,7 @@ +{ +<<<<<<< HEAD + "liveServer.settings.port": 5501 +======= + "liveServer.settings.port": 5503 +>>>>>>> d6cabd0e1c2c9ccf17997f8e1ca7ba6a1a84ea85 +} \ No newline at end of file diff --git a/README.md b/README.md index 7825c572..32113550 100644 --- a/README.md +++ b/README.md @@ -1,617 +1,181 @@ -# Data Lovers +# Proyecto dataLovers - Laboratoria +Logo +
+
+
+ Autora +
+Yesenia- Peche Vergaray y Genesis Voiser / https://github.com/LizetPV +

+ +
## Í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. Resumen](#1-Resumen) +* [2. funcionalidades](#2-Funcionalidades) +* [3. Tecnologias utilizadas](#3-Tecnologias-utilizadas) +* [4. Funciones utilizadas](#4-Funciones-utilizadas) +* [5. Como utilizar](#5-como-utilizar) +* [6. Pruebas](#6-Pruebas) +* [7. Historias de usuario](#7-PHistorias-de-usuario) +* [8. Prototipo de baja y alta fidelidad](#8-Prototipo-de-baja-y-alta-fidelidad) *** -## 1. Preámbulo +## 1. Resumen -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. +Este proyecto es una página web que permite visualizar y manipular un conjunto de datos sobre 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. +La interfaz de usuario de la página web es altamente intuitiva y fácil de navegar, lo que facilitará el acceso a la información de los Pokemones por parte de los usuarios. +Para acceder a la aplicación debe dirigirse a: (página de github desplegada). -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_. -## 2. Resumen del proyecto +## 2. Funcionalidades: +* Visualización de datos de Pokémon. +* Filtrado de datos por tipo de Pokémon, estadísticas y nombre de Pokémon. +* Ordenamiento de datos por nombre y estadísticas. +* Cálculo de la media de los 10 pokémon más fuertes. -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. +## 3. Tecnologías utilizadas: +* HTML. +* CSS. +* JavaScript. -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). +## 4. Funciones utilizadas: -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. +Las funciones utilizadas en este proyecto son: +* filter(): permite filtrar los datos de los pokémon según su tipo. +* sort(): ordena los datos en orden alfabético ascendente y descendente. +* top10(): compara la fuerza de cada pokémon para determinar los 10 más fuertes. -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. +## 5. Cómo utilizar: -Estos son datos que te proponemos: +1. Clonar el repositorio en su computadora. +2. Abrir el archivo index.html en un navegador web. +3. Explorar la página y visualizar los datos de Pokémon. +4. Utilizar las opciones de filtrado y ordenamiento para encontrar los datos deseados. +5. Hacer clic en los botones de cálculo para ver las estadísticas agregadas. -* [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) +## 6. Pruebas: -* [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) +Con el fin de verificar la calidad del código, se llevaron a cabo pruebas utilizando una herramienta de análisis de código denominada "Eslint". Los resultados de estas pruebas no reportaron ningún tipo de error al finalizar el desarrollo. Además, el proyecto ha sido sometido a pruebas unitarias para evaluar la funcionalidad de las funciones de filtrado, comparación y cálculo. +Las pruebas unitarias cubren un mínimo del 70% de statements, functions, lines y branches. -* [Rick and Morty](src/data/rickandmorty/rickandmorty.json). - Este set nos proporciona la lista de los personajes de la serie Rick and - Morty. - - [Investigación con seguidores de Rick and Morty](src/data/rickandmorty/README.md) +## 7. Historias de usuario: -* [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) +## Historia de usuario 1: -* [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) +Yo como usuario nuevo, quiero poder ver la lista de todos los pokemones para conocer el poder de los pokemones. -* [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) +### `Criterios de aceptación:` -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. +* Que sea visible la lista de pokemones. -## 3. Objetivos de aprendizaje +* Que el diseño sea igual al boceto. -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. +* Que cuando pase el mouse la ficha se gire y se vea la informacion del pokemon. -### HTML +### `Definición de terminado:` -- [ ] **Uso de HTML semántico** +* Que debe pasar correctamente los test. -

Links

+* Que sea responsive. - * [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) -

+* Dos usuarios nos dieron el feedback -### CSS +#### `Tareas:` -- [ ] **Uso de selectores de CSS** +* [ ] Prototipo de baja fidelidad: +* [ ] Investigar como exportar la data de pokemon +* [ ] (Ordenar) Se ve la lista de pokemones en una tabla de cuatro filas. +* [ ] Diseño en CSS: fondo, colores, etc. +* [ ] Que sea responsive. -
Links

+## Historia de usuario 2: - * [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) -

+Yo como usuario nuevo, quiero poder ver la lista de pokemones y poder filtrarlo por tipo de cada pokemon. -- [ ] **Modelo de caja (box model): borde, margen, padding** +### `Criterios de aceptación:` -
Links

+* Que sea visible la lista de pokemones. - * [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/) -

+* Que sea responsive -- [ ] **Uso de flexbox en CSS** +* Que tenga botones de filtro por tipo de cada pokemon. -
Links

+* Prototipo de alta fidelidad. - * [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) -

+### `Definición de terminado:` -### Web APIs +* Que debe pasar correctamente los test. -- [ ] **Uso de selectores del DOM** +* Que dos usuarios nos den feedback. -
Links

+* Que este desplegado en git hub. - * [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) -

+#### `Tareas:` -- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)** +* [ ] Investigar cómo agregar un filtro a nuestra base de datos. +* [ ] Implementar el filtro por tipo de cada pokemon +* [ ] Prototipo de alta fidelidad: boceto de balsemiq -
Links

+## Historia de usuario 3: - * [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) -

+Yo como usuario nuevo, quiero poder visualizar la lista de pokemones, asi como tambirn tener dos tipos de filtros por tipo de pokemon y por orden de la lista en forma ascendente y descendente. -- [ ] **Manipulación dinámica del DOM** +### `Criterios de aceptación:` -
Links

+* Que sea visible la lista de pokemones y que se pueda tener el filtro de ordenar de ascendente y descenden. - * [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) -

+### `Definición de terminado:` -### JavaScript +* Que debe pasar correctamente los test. -- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos** +* Que este desplegado en git hub. -- [ ] **Arrays (arreglos)** +#### `Tareas:` -
Links

+* [ ] Crear función que permita ordenar los nombres de los pokemones desde la A-Z y desde la Z-A. +* [ ] Ordenar el código, mejorar estilos de la página. +* [ ] Escribir una prueba unitaria para la función filtro y ordenamiento. - * [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) -

+## Historia de usuario 4: -- [ ] **Objetos (key, value)** +Yo como usuario al navegar la pagina debe permitirnos mostrarnos los 10 pokemones mas fuertes. -
Links

+### `Criterios de aceptación:` - * [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/05-objects/01-objects) -

+* Que sea visible la lista de pokemones. +* Crear una funcion de calculo basica para sacar el promedio de los pokemones mas fuertes. +* Se debe mostrar unicamente 10 pokemones mas fuertes. -- [ ] **Variables (declaración, asignación, ámbito)** +### `Definición de terminado:` -
Links

+* Que debe pasar correctamente los test. - * [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) -

+* Que este desplegado en git hub. -- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)** +* Debe pasar los test unitarios al 100% -
Links

+#### `Tareas:` - * [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) -

+* [ ] Crear un cálculo que nos permita mostrar los 10 mejores pokemones en fuerza. +* [ ] Hacer un calculo utilizando un bucle que recorra todo el array y/o objeto. +* [ ] Darle la funcionalidad al código del cálculo. +* [ ] Mostrar al usuario los 10 pokemones más fuertes. +* [ ] correr los test unitarios. -- [ ] **Uso de bucles/ciclos (while, for, for..of)** +[![Whats-App-Image-2023-03-13-at-5-38-18-PM.jpg](https://i.postimg.cc/MpSctfFn/Whats-App-Image-2023-03-13-at-5-38-18-PM.jpg)](https://postimg.cc/VdKLkv1w) -
Links

+## 8. Diseño de interfaz del usuario - * [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) -

+### Prototipo de baja fidelidad: +[![prototipo-de-baja-fidelidad.jpg](https://i.postimg.cc/13sxvycm/prototipo-de-baja-fidelidad.jpg)](https://postimg.cc/QH4ntGyw) -- [ ] **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](https://coda.io/d/Bootcamp-UX-Contenido_dqkqk2rV9Z2/Diseno-Visual_suOT7#_luWsQ)** - -### 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 proyecto será entregado subiendo tu código a GitHub (commit/push) y la - interfaz será desplegada usando [GitHub Pages](https://pages.github.com/). -* Tiempo para completarlo: Toma como referencia 4 semanas. - -## 5. Criterios de aceptación mínimos del proyecto - -Los criterios para considerar que has completado este proyecto son: - -### Definición del producto - -Documenta brevemente tu trabajo en el archivo `README.md` de tu repositorio, -contándonos cómo fue tu proceso de diseño y cómo crees que el producto resuelve -el problema (o problemas) que tiene tu usuario. - -### Historias de usuario - -Una vez que entiendas las necesidades de tus usuarios, escribe las [Historias -de Usuario](https://es.wikipedia.org/wiki/Historias_de_usuario) que representen -todo lo que el usuario necesita hacer/ver. Las **Historias de Usuario** deben -ser el resultado de tu proceso de investigación o _research_ de tus usuarios. - -Asegúrate de incluir la definición de terminado (_definition of done_) y los -Criterios de Aceptación para cada una. - -En la medida de lo posible, termina una historia de usuario antes de pasar -a la siguiente (Cumple con Definición de Terminado + Criterios de Aceptación). - -### 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. Ser _responsive_, es decir, debe visualizarse sin problemas desde distintos - tamaños de pantallas: móviles, tablets y desktops. -3. 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). - -### Checklist - -* [ ] Usa VanillaJS. -* [ ] Pasa linter (`npm run pretest`) -* [ ] Pasa tests (`npm test`) -* [ ] Pruebas unitarias cubren un mínimo del 70% de statements, functions y - lines y branches. -* [ ] Incluye _Definición del producto_ clara e informativa en `README.md`. -* [ ] Incluye historias de usuario en `README.md`. -* [ ] Incluye _sketch_ de la solución (prototipo de baja fidelidad) en - `README.md`. -* [ ] Incluye _Diseño de la Interfaz de Usuario_ (prototipo de alta fidelidad) - en `README.md`. -* [ ] Incluye el listado de problemas que detectaste a través de tests de - usabilidad en el `README.md`. -* [ ] UI: Muestra lista y/o tabla con datos y/o indicadores. -* [ ] UI: Permite ordenar data por uno o más campos (asc y desc). -* [ ] UI: Permite filtrar data en base a una condición. -* [ ] UI: Es _responsive_. - -## 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 ` - - + + + Pokedex.com + + + +
+
+ Logo +
+ +
+
    • +
    + +
    +
    +
    +
    +
    +
    +
    + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 71c59f2d..6c4e4934 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,73 @@ -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'; - -console.log(example, data); +import dataPokemon from "./data/pokemon/pokemon.js"; +import { filter, ordenar, pokemonesPromedio } from "./data.js"; +const data = dataPokemon.pokemon; +const divTarjeta = document.getElementById("dataHtml"); +const botonesHeader = document.querySelectorAll(".btn-header"); +const mostrarData = (pokemones) => { + divTarjeta.innerHTML = ""; + pokemones.forEach((pokemon) => { + const card = document.createElement("div"); + const name = document.createElement("name"); + name.innerHTML = pokemon.name; + const numbers = document.createElement("h1"); + numbers.innerHTML = pokemon.num; + const type = document.createElement("type"); + type.innerHTML = pokemon.type; + const image = document.createElement("img"); + image.setAttribute("src", pokemon.img); + name.setAttribute("class", "name"); + image.setAttribute("class", "imagenPokemones"); + type.setAttribute("class", "typePokemon"); + divTarjeta.appendChild(card); + card.appendChild(image); + card.appendChild(numbers); + card.appendChild(name); + card.appendChild(type); + }); +}; +mostrarData(data); +botonesHeader.forEach((boton) => + boton.addEventListener("click", (event) => { + const botonFilter = event.currentTarget.value; + const pokemones = document.getElementById("dataHtml"); + pokemones.innerHTML = ""; + const dataFiltrada = filter(botonFilter, data); + mostrarData(dataFiltrada); + }) +); +const selectOrdenar = document.getElementById("selectOrdenar"); +selectOrdenar.addEventListener("change", () => { + const dataOriginal = [...data]; + const opcionElegida = selectOrdenar.value; + if (opcionElegida === "all") { + mostrarData(dataOriginal); + } else { + const dataOrdenadaAZ = ordenar(opcionElegida, dataOriginal); + mostrarData(dataOrdenadaAZ); + } +}); +const top10 = pokemonesPromedio(data) +const pokemonesFuertes = document.getElementById("divTop10"); +const result = document.getElementById("top10"); +pokemonesFuertes.addEventListener("click", () => { + result.innerHTML = ""; + top10.forEach((pokemon) => { + const card = document.createElement("div"); + const name = document.createElement("name"); + name.innerHTML = pokemon.name; + const numbers = document.createElement("h1"); + numbers.innerHTML = pokemon.power; + const type = document.createElement("type"); + type.innerHTML = pokemon.type; + const image = document.createElement("img"); + image.setAttribute("src", pokemon.img); + name.setAttribute("class", "name"); + image.setAttribute("class", "imagenPokemones"); + type.setAttribute("class", "typePokemon"); + divTarjeta.appendChild(card); + card.appendChild(image); + card.appendChild(numbers); + card.appendChild(name); + card.appendChild(type); + }); +}); diff --git a/src/style.css b/src/style.css index e69de29b..0be68215 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,238 @@ +ul { + list-style-type: none; + display: flexbox; +} +button { + border: 0; + display: flexbox; +} +body { + background: linear-gradient(to right, #DA70D6, #FFFF00); + margin: 0%; + display: flexbox; + cursor: url("https://cdn.custom-cursor.com/db/pointer/32/Pokemon_Pikachu_Pointer.png"), auto; +} + +.nav{ + display: flexbox; + padding-inline: 1rem; +} +header{ + box-sizing: border-box; + width: 100%; + padding: 15px; +} +main{ + display: flexbox; +} +.img-container { + text-align: center; + width: 100%; + display: flexbox; + box-sizing: border-box; + /* text-align: center; */ + padding: 15px; +} +.imagenPokemones { + /* imagen logo */ + padding-inline: 1rem; + display: flexbox; + width: 100%; + max-width: 10rem; + align-items: center; +} +:root { + --clr-black: #1C1C1C; + --clr-gray: #FFC300; + --clr-white: #F7F7F7; + --Type-ver: #D2B4DE; + --Type-normal: #98FB98; + --Type-fire: #F67B45; + --Type-water: #ABDEE6; + --Type-grass: #B4CFA4; + --Type-electric: #F4D35E; + --Type-ice: #8FCACA; + --Type-fighting: #C559AF; + --Type-poison: #B6ADE5; + --Type-ground: #DAA520; + --Type-flying: #81B2D9; + --Type-psychic: #DCDCDC; + --Type-bug: #62866C; + --Type-rock: #CB7876; + --Type-ghost: #F0FFF0; + --Type-dark: #A9A9A9; + --Type-dragon: #FFA500; + --Type-steel: #E0FFFF; + --Type-fairy: #7CFC00; + --Type-topTen: #F7ECD3; +} +.nav-list { /* disposición de los botones "tipo pokemon" */ + display: flex; + flex-wrap: wrap; + gap: 5%; + padding-block: 2ram; + align-content: center; +} +.btn-header { /* diseño de los botones de tipo pokemon*/ + padding: .8rem; + border-radius: 50vmax; + cursor: pointer; + text-transform: uppercase; + font-weight: 600; + transition: .2s; + border: 3px solid rgb(100, 68, 32); + margin: 1px; + cursor: url("https://cdn.custom-cursor.com/db/11281/32/pokemon-ditto-pointer.png"), auto; +} +.btn-header:hover { /* dan efecto a los botones al pasar el cursor sobre ellos */ + transform: scale(1.1); + box-shadow: 0 0 2rem rgba(black, 0, 0, .25); +} +#dataHtml { /* da estructura a la página HTML */ + display: flex; + justify-content: space-around; + align-items: center; + background: #FFE4C4; + background: -webkit-linear-gradient(to right, #87CEFA, #90EE90); + background: linear-gradient(to right, #DA70D6, #FFFF00); + flex-wrap: wrap; + width: 100%; +} +.selectOrdenar { /* Diseño para el botón seleccionar A-Z y Z-A */ + background: #2F3640; + border-radius: 8px; + color: #F5F6FA; + border: none; + font-size: 14px; + height: 30px; + padding: 5px; + width: 100px; +} +.selectOrdenar .option { /* tamaño botón opción */ + height: 30px; +} +div { /* div tarjeta de fondo del pokemon */ + border-radius: 1rem; + background-color: #FFE4C4; + padding-block: 1rem; + text-transform: uppercase; + margin: 15px; +} +h1 { /* texto dentro de la tarjeta pokemon */ + transform: translateY(-50%); + color: var(--clr-gray); + display: flex; + justify-content: center; +} +.name { /* Nombre del pokemon*/ + display: flex; + justify-content: center; + font-weight: bold; +} +.typePokemon { /* Diseño del tipo de pokemon */ + border-radius: 100vmax; + display: flex; + font-size: .75rem; + justify-content: center; + padding: .25rem .5rem; + background-color: #C3C600; +} +.pokemon-stats { + display: flex; + gap: 1rem; + font-size: .85rem; +} +.stats { + background-color: var(--clr-gray); + padding: .25rem .5rem; + border-radius: 100vmax; +} +.ver { + background-color: var(--Type-ver); + color: var(--clr-black) +} +.normal { + background-color: var(--Type-normal); + color: var(--clr-black); +} +.fire { + background-color: var(--Type-fire); + color: var(--clr-black) +} +.water { + background-color: var(--Type-water); + color: var(--clr-black) +} +.grass { + background-color: var(--Type-grass); + color: var(--clr-black) +} +.electric { + background-color: var(--Type-electric); + color: var(--clr-black) +} +.ice { + background-color: var(--Type-ice); + color: var(--clr-black) +} +.fighting { + background-color: var(--Type-fighting); + color: var(--clr-black) +} +.poison { + background-color: var(--Type-poison); + color: var(--clr-black) +} +.ground { + background-color: var(--Type-ground); + color: var(--clr-black) +} +.flying { + background-color: var(--Type-flying); + color: var(--clr-black) +} +.psychic { + background-color: var(--Type-psychic); + color: var(--clr-black) +} +.bug { + background-color: var(--Type-bug); + color: var(--clr-black) +} +.rock { + background-color: var(--Type-rock); + color: var(--clr-black) +} +.ghost { + background-color: var(--Type-ghost); + color: var(--clr-black) +} +.dark { + background-color: var(--Type-dark); + color: var(--clr-black) +} +.dragon { + background-color: var(--Type-dragon); + color: var(--clr-black) +} +.steel { + background-color: var(--Type-steel); + color: var(--clr-black) +} +.fairy { + background-color: var(--Type-fairy); + color: var(--clr-black); +} +.topTen{ + background-color: var(--Type-topTen); + color: var(--clr-black); + margin-left: 50%; + transform: translateX(-50%); +} +.divTop10{ + width: 100%; + background-color: transparent; +} +#top10{ + opacity: 0; +} \ No newline at end of file diff --git a/test/data.spec.js b/test/data.spec.js index 09b1f23f..e3e0194c 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,23 +1,147 @@ -import { example, anotherExample } from '../src/data.js'; - - -describe('example', () => { - it('is a function', () => { - expect(typeof example).toBe('function'); +//import { example, anotherExample } from '../src/data.js'; +import { filter, ordenar, pokemonesPromedio } from "../src/data.js"; +// Pruebas unitarias para el "filter" +describe("Filter", () => { + //1° criterio para las pruebas: la función existe + it("filter deberia ser una funcion", () => { + expect(typeof filter).toBe("function"); }); - - it('returns `example`', () => { - expect(example()).toBe('example'); + //2° criterio para las pruebas: validar el comportamiento deseado de la funcion + const data = [ + { + num: "001", + name: "bulbasaur", + type: ["grass", "poison"], + }, + { + num: "002", + name: "ivysaur", + type: ["grass", "poison"], + }, + { + num: "003", + name: "venusaur", + type: ["grass", "poison"], + }, + { + num: "004", + name: "charmander", + type: ["fire"], + }, + { + num: "005", + name: "charmeleon", + type: ["fire"], + }, + ]; + it("filter deberia filtra por tipo", () => { + expect(filter("grass", data)).toStrictEqual([ + { num: "001", name: "bulbasaur", type: ["grass", "poison"] }, + { num: "002", name: "ivysaur", type: ["grass", "poison"] }, + { num: "003", name: "venusaur", type: ["grass", "poison"] }, + ]); + }); + //3° criterio para las pruebas: estresar la función + it("filter deberia retornar algo", () => { + // expect(filter('', data)).toBe(false) + expect(filter("", data)).toBeFalsy(); + expect(filter("water", [])).toBeFalsy(); }); }); - -describe('anotherExample', () => { - it('is a function', () => { - expect(typeof anotherExample).toBe('function'); +describe("Ordenar", () => { + // funcion existe + it("Ordenar los pokemones alfabéticamente Ascendente", () => { + expect(typeof ordenar).toBe("function"); }); + // comportamiento deseado de la funcion + const dataPokemon = [ + { name: "venusaur" }, + { name: "ivysaur" }, + { name: "charmeleon" }, + { name: "charmander" }, + { name: "bulbasaur" }, + ]; + it("ordenar deberia organizar a los pokemones de forma ascendente", () => { + expect(ordenar("nameAsc", dataPokemon)).toStrictEqual([ + { name: "bulbasaur" }, + { name: "charmander" }, + { name: "charmeleon" }, + { name: "ivysaur" }, + { name: "venusaur" }, + ]); + }); + it("ordenar deberia organizar a los pokemones de forma ascendente", () => { + expect(ordenar("name", dataPokemon)).toStrictEqual([ + { name: "venusaur" }, + { name: "ivysaur" }, + { name: "charmeleon" }, + { name: "charmander" }, + { name: "bulbasaur" }, + ]); + }); + it("Ordenar deberia retornar algo", () => { + // estrese la funcion + // expect(filter('', data)).toBe(false) + expect(ordenar("", dataPokemon)).toBeFalsy(); + expect(ordenar("water", [])).toBeFalsy(); + }); +}); - it('returns `anotherExample`', () => { - expect(anotherExample()).toBe('OMG'); +describe("pokemonesPromedio", () => { + const data = [ + { + stats: { + "base-attack": "118", + "base-defense": "111", + "base-stamina": "128", + }, + }, + { + stats: { + "base-attack": "151", + "base-defense": "143", + "base-stamina": "155", + }, + }, + { + stats: { + "base-attack": "198", + "base-defense": "189", + "base-stamina": "190", + }, + }, + ]; + const resultadoEsperado = [ + { + power: 192, + stats: { + "base-attack": "198", + "base-defense": "189", + "base-stamina": "190", + }, + }, + { + power: 150, + stats: { + "base-attack": "151", + "base-defense": "143", + "base-stamina": "155", + }, + }, + { + power: 119, + stats: { + "base-attack": "118", + "base-defense": "111", + "base-stamina": "128", + }, + }, + ]; + it("pokemonesPromedio deberia ser una funcion", () => { + expect(typeof pokemonesPromedio).toBe("function"); + }); + it("Deberia retornar los promedios y ordena los pokemones", () => { + expect(pokemonesPromedio(data)).toStrictEqual(resultadoEsperado); }); });