diff --git a/Prototipo.drawio.png b/Prototipo.drawio.png new file mode 100644 index 00000000..5a4f9172 Binary files /dev/null and b/Prototipo.drawio.png differ diff --git a/README.md b/README.md index 0e78340d..325536c6 100644 --- a/README.md +++ b/README.md @@ -1,625 +1,128 @@ -# Data Lovers +# Pokémon go! -## Í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 para solicitar PF](#9-checklist-para-solicitar-pf) +¡Bienvenido a nuestro sitio web dedicado a Pokémon GO! -*** + ![visual_Desktops](image-3.png) + +*Descripción general* -## 1. Preámbulo +En nuestro sitio web, te sumergirás en el emocionante mundo de Pokémon GO, el juego de realidad aumentada que te permite capturar, entrenar y batallar con tus Pokémon favoritos en el mundo real. -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. +Explora nuestra extensa base de datos de Pokémon, donde podrás encontrar información detallada sobre cada especie, incluyendo su número, evoluciones, generación y descripción. -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. +*Funcionalidades:* -![pokemon-data-to-ui](https://user-images.githubusercontent.com/12631491/218505816-c6d11758-9de4-428f-affb-2a56ea4d68c4.png) +- Permite ordenar la data de manera ascendente y descentente por letras y números, es decir, de la A-Z, de la Z-A, del número mayor al número menor y del número mayor al número menor. -## 2. Resumen del proyecto +- Permite buscar los nombres por su nombre. -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. +- calcula el valor agregado de los pokémones mediante un porcentaje (promedio). -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). +- Muestra la data completa de los pokémones, con su nombre, número, tipo, generación, tamaño, peso y descripció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. -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. +*Guía de uso:* -Estos son datos que te proponemos: +La página de Pokemón go, es de fácil uso, solo debes hacer "click" en el menú desplegable para encontrar a los pokemones ordenados y escribir en la barra del buscador para encontrar a tu Pokemón. -* [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) +Podrás encontrar la página web de "Pokemón go" con este link: http://localhost:3000/ -* [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) +*Preguntas generales* -* [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) +- ¿Quiénes son los principales usuarios del producto? -* [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) +Los principales usuarios de esta aplicación, son personas de un rango de edad de 12-26 años, que crean una comunidad entre si, para atrapar y buscar pokemones. -* [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) +Pokémon Go también ha atraído a muchos jugadores adultos, incluidos los fanáticos de Pokémon de larga data. Muchos adultos disfrutan de revivir la nostalgia de su infancia yendo tras los Pokémon y compitiendo en gimnasios. -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. +Es importante tener en cuenta que esta lista no es exhaustiva y que Pokémon Go ha atraído a una amplia gama de usuarios con diferentes intereses y motivaciones. El juego ha logrado una amplia popularidad y ha mantenido una base de jugadores activos desde su lanzamiento -## 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 +- ¿Cuáles son los objetivos de estos usuarios en relación con el producto? -- [ ] **Uso de HTML semántico** +Uno de los principales objetivos para muchos usuarios de Pokémon Go es completar su Pokédex, que es una colección de todos los Pokémon disponibles en el juego. Los jugadores se esfuerzan por atrapar la mayor cantidad posible de Pokémon para completar su colección. -
Links

+Uno de los aspectos distintivos es su enfoque en la realidad aumentada y la exploración del mundo real. Los jugadores se motivan a salir y explorar su entorno en busca de Pokémon, Poképaradas y gimnasios. El juego fomenta el ejercicio físico y la interacción con lugares de interés en el mundo real. - * [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** +- ¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué? -
Links

+Los datos más relevantes que desean ver los usuarios son las evoluciones por tipo. - * [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) -

+La presentación clara y accesible de esta información les ayuda a tomar decisiones informadas mientras juegan y a aprovechar al máximo su experiencia en el juego. -- [ ] **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/) -

+- ¿Cuándo utilizan o utilizarían el producto? -- [ ] **Uso de flexbox en CSS** +Cuando deseen hacer comparaciones y conocer más a detalle los pokemones de la generación I y II. -
Links

+Con una descripción detallada de los pokémones los usuarios sabrán cual y cuando usar, o atrapar. - * [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) -

+*historias de usuari@s* -### Web APIs +- Historia 1: +Como: usari@ -- [ ] **Uso de selectores del DOM** +Quiero: Conocer la cantidad de pokémones que hay en la generación I y II. -
Links

+Para: saber la diversidad de los diferentes pokemones. - * [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) -

+- Historia 2: +Como: usuari@ de entre 12-26 años -- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)** +Quiero: buscar a los pokemos por su nombre en tiempo real, es decir, mientras vaya tecleando vayan saliendo los diferentes pokemones que existan, hasta llegar al que deseo. -
Links

+Para: poder visualizar solo al pokemon que busque, y observar mejor sus características y evoluciones. - * [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) -

+- Historia 3: +Como: usuari@ -- [ ] **Manipulación dinámica del DOM** +Quiero: poder filtrar los pokemones en orden ascendente y descendente, ya sea por letras o números. -
Links

+Para: ordenarlos y poder clasificarlos. - * [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) -

+![vista-ascendente](image-7.png) -### JavaScript +- historias 4: +Como: nuevo usuari@ -- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos** +Quiero: ver el promedio total de los tipos de pokemones, es decir, por cada tipo deseo ver el porcentaje de pokemones hay. -- [ ] **Arrays (arreglos)** +Para: conocer el tipo de pokemon predominante. -
Links

+![Vista-promedio](image-5.png) - * [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) -

+*Cómo la página web resuelve las historias de usuari@s?* -- [ ] **Objetos (key, value)** +Creamos una página web sencilla, pero que cumpla con todos los requisitos visuales, para que el usuario pueda tener una interacción eficaz en la web. Enfocándonos en las historias de usuari@s, y poder dar respuesta a las necesidades dadas. -
Links

+ *Proceso de diseño* + - Dimos respuesta a las preguntas generales. + - Creamos 4 historias de usuarios. + - Creamos un prototipo de baja fidelidad, como boceto. - * [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/05-objects/01-objects) -

+![Prototipo-baja](image-4.png) -- [ ] **Variables (declaración, asignación, ámbito)** -
Links

+ - Creamos un prototipo de alta fidelidad, donde pautamos como deseamos que se viera nuestra web de una manera dinámica. - * [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)** + ![Prototipo-alta](prototipo_alta.png) -
Links

+ - Utilizamos javaScript vanilla, para poder crear una página completamente dinámica, conjunto al html semántico, test de prueba, y css. - * [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) -

+Desafíos: +- + - Al momento de crear los test, tuvimos que refactorizar las funciones, ya que muchas de ellas eran redundantes. + - Notamos que debemos indicarle al test como entrar al array de objetos, para ellos creamos nuevas constantes para que pudiera analizar correctamente. + - Concluimos que es mejor ir creando las funciones y los test a la par, ya que así aseguramos que las funciones cumplan con el objetivo desde el inicio. -- [ ] **Uso de bucles/ciclos (while, for, for..of)** +Por último la página logro ser responsive para mobile,tablet y desktop. -
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 ` - - + + + + + ⚡️Pokemon go⚡️ + + + + +
+
+ + Promedio por tipo +
+

¡Aquí podrás encontrar las increíbles dos primeras generaciónes del juego Pokémon go!

+ +
+ +

+
+ +
+ + +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 71c59f2d..9b35e2de 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,58 @@ -import { example } from './data.js'; -// import data from './data/lol/lol.js'; +//import { filtername} from './data.js'; + import data from './data/pokemon/pokemon.js'; -// import data from './data/rickandmorty/rickandmorty.js'; +import { sortName, sortNum, promPokemonEveryType, resultName } from './data.js'; +const dataPokemon = data.pokemon; +const container = document.getElementById("targets"); + +//mostrar en el dom todos los pokemones + +const display = (pokemones) => { + container.innerHTML = "" + pokemones.forEach(element => { + const target = document.createElement('article') + target.classList.add('cards'); + target.innerHTML += `imagen de ${element.name} +

${element.name}

+

Número: ${element.num}

+

${element.generation.num}

+

Tipo: ${element.type}

+

Tamaño: ${element.size.height}

+

Peso: ${element.size.weight}

+

${element.about}

` + container.appendChild(target) + }); +} +display(dataPokemon); + +//añadir un add event listener al menu +const menu = document.getElementById("menu"); +//const targets = document.querySelector(".cards"); + +menu.addEventListener("change", () => { + const element = menu.options[menu.selectedIndex].value + if (element === "az" || element === "za") { + display(sortName(dataPokemon, element)) + } else if (element === "numberMayor" || element === "numberMenor") { + display(sortNum(dataPokemon, element)) + } +}); + + +//filtro de buscar por nombre +document.getElementById('pokeNames').addEventListener('keyup', () => { + const filterName = document.getElementById('pokeNames').value; + const results = resultName(dataPokemon, filterName) + display(results) +}); -console.log(example, data); +//FILTRO PORCENTAJE POR TIPO +document.getElementById('best').addEventListener('click', () => { + document.getElementById('best').value; + const objtypes = promPokemonEveryType(dataPokemon) // objeto + container.innerHTML = "" + for (const property in objtypes) { + const p = `

${property}: ${objtypes[property]}%

` + container.innerHTML += p; + } +}); \ No newline at end of file diff --git a/src/style.css b/src/style.css index e69de29b..8255dc93 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,230 @@ +body { + min-height: 100vh; + background-color: #022973; + display: flex; + flex-direction: column; + font-family: Arial, Helvetica, sans-serif; +} + +img { + height: 100px; + width: 350px; + display: block; + margin-left: auto; + margin-right: auto; +} + +input { + width: 600px; + height: 45px; + border: 3px solid #c81a1a; + border-radius: 14px; + text-align: center; + align-items: center; +} + +.contenedor { + display: flex; + align-items: center; + flex-direction: column; +} + +.Genebest { + display: block; + padding: 10px 20px; + width: 20%; + background-color: #FFA500; + text-align: center; + font-weight: bold; + border-radius: 18px; +} + +.Genebest:hover { + background-color: #CB1D0E; + color: #FFFFFF; + +} + +main { + flex: 1; +} + +.interview { + text-align: center; + font-size: 22px; + margin: 20px; + color: #FFFFFF; + text-align: center; + +} + +#searchs, +#contOrder { + margin: 20px; + display: flex; + justify-content: center; + +} + +#orderfor { + margin: 10px; + color: #ffffff; +} + +footer { + border: solid #CB1D0E; + background-color: #CB1D0E; + text-align: center; + padding: center; +} + +main#targets { + margin: auto; + padding: auto; + grid-template-columns: 1fr 1fr 1fr ; + justify-content: center; + +} + +#targets { + padding: center; + display: grid; + width: 330px; + height: 500px; + margin: 300px; + gap: 7px; + +} + +.content-filters { + display: flex; + width: 100%; + background-color: #CB1D0E; +} + +.cards { + border: solid 2px #ea0404; + background: #FFFFFF; + border-radius: 10px; + + +} + +.cards:hover { + border: solid 2px #006400; + background: #E7FAD0; +} + +article img { + width: 150px; + height: 150px; + border: solid 2px #9ce6b0; + border-radius: 85px; + margin-left: 0; + margin-right: 0; + padding: 10px; + background-image: radial-gradient(circle at 50.28% 51.61%, #f27cff 0, #a261ff 25%, #4c42d4 50%, #002495 75%, #00065e 100%); +} + +article.cards { + height: 565px; + width: 180px; + padding: 10px; + margin: 10px; +} + +h2, +h4, +#about { + margin: 10px; +} + +h2 { + border: 2px solid #191970; + color: #191970; + border-radius: 3px; + text-align: center; + background-color: #FFA500; +} + +p#porcent { + border: 3px solid #FFCB08; + background: #FFCB08; + display: grid; + align-items: center; + padding: 10px; + width: 115px; + border-radius: 5px; + grid-template-columns: repeat(6,1fr); + +} + +select#menu { + border-radius: 8px; + width: 170px; + text-align: center; + border: 3px solid #FFA500; +} + +@media (max-width: 768px) { + .interview { + text-align: center; + font-size: 18px; + margin: 20px; + color: #FFFFFF; + + } + + main#targets { + margin: auto; + padding: auto; + grid-template-columns: 1fr; + justify-content: center; + background-color: #CB1D0E; + height: auto; + width: auto; + +} + +.Genebest { + display: block; + padding: 10px 20px; + width: 150px; + background-color: #FFA500; + text-align: center; + font-weight: bold; + border-radius: 18px; +} + +.Genebest:hover { + background-color: #CB1D0E; + color: #FFFFFF; + +} +#searchs, +#contOrder { + margin: 18px 25px 18px 18px; + display: flex; + justify-content:center; + +} +} +@media (min-width: 769px) and (max-width: 1024px){ + .interview { + text-align: center; + font-size: 20px; + margin: 20px; + color: #FFFFFF; + text-align: center; + } + main#targets { + margin: auto; + padding: auto; + grid-template-columns: 1fr 1fr; + justify-content: center; + background-color: #CB1D0E; + height:auto ; + width: auto; + +} +} \ No newline at end of file diff --git a/test/data.spec.js b/test/data.spec.js index 09b1f23f..8b1f248d 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,23 +1,95 @@ -import { example, anotherExample } from '../src/data.js'; +import { sortName, sortNum, resultName, deleteDuplicate, concatType, promPokemonEveryType} from '../src/data.js'; +const Pokemons = [{ + "num": "002", + "name": "ivysaur", + "type": [ + "grass", + "poison" + ] +}, +{ + "num": "007", + "name": "squirtle", + "type": [ + "water" + ] +}, +{ + "num": "024", + "name": "arbok", + "type": [ + "poison" + ] +} +]; -describe('example', () => { - it('is a function', () => { - expect(typeof example).toBe('function'); +const pokemonsTypeRepeat = ['grass', 'poison', 'fire', 'fire', 'poison','rock', 'grass']; +const resultDeletePokemonsTypeDuplicate= ['grass', 'poison', 'fire', 'rock']; +const resultConcatType = [ 'water','grass', 'poison', 'poison'] +const resultPromPokemonEveryType = {grass:'25.00', poison:'50.00',water:'25.00'} + +describe('sortNum', () => { + it('deberia retornar los nombres de los pokemones ordenados del 251 al 1', () => { + expect(sortNum(Pokemons, "numberMayor")).toEqual([ + { num: '024', name: 'arbok', type: ['poison'] }, + { num: '007', name: 'squirtle', type: ['water'] }, + { num: '002', name: 'ivysaur', type: ['grass', 'poison'] } + + ]); + }); + it('deberia retornar los nombres de los pokemones ordenados del 1 al 251 ', () => { + expect(sortNum(Pokemons, "numberMenor")).toEqual([ + { num: '002', name: 'ivysaur', type: ['grass', 'poison'] }, + { num: '007', name: 'squirtle', type: ['water'] }, + { num: '024', name: 'arbok', type: ['poison'] } + ]); + }); +}); + +describe('sortName', () => { + it('deberia retornar los nombres de los pokemones ordenados de A-Z ', () => { + expect(sortName(Pokemons, "az")).toEqual([ + { num: '024', name: 'arbok', type: ['poison'] }, + { num: '002', name: 'ivysaur', type: ['grass', 'poison'] }, + { num: '007', name: 'squirtle', type: ['water'] } + ]); }); - it('returns `example`', () => { - expect(example()).toBe('example'); + it('deberia retornar los nombres de los pokemones ordenados de la Z-A`', () => { + expect(sortName(Pokemons, "za")).toEqual([ + { num: '007', name: 'squirtle', type: ['water'] }, + { num: '002', name: 'ivysaur', type: ['grass', 'poison'] }, + { num: '024', name: 'arbok', type: ['poison'] } + ]); + }); +}); + +describe('resultName', () => { + it('deberia retornar los nombres de los pokemones los nombres de los pokemones' , () => { + const filtroIvy = resultName(Pokemons, "iv") + expect(filtroIvy).toEqual([ { num: '002', name: 'ivysaur', type: [ 'grass', 'poison' ] }]); }); }); -describe('anotherExample', () => { - it('is a function', () => { - expect(typeof anotherExample).toBe('function'); +describe('concatType', () => { + it('deberia retornar en un array todos los tipos de pokemones por cada objeto de pokemon pokemon' , () => { + const calculator = concatType(Pokemons) + expect(calculator).toEqual(resultConcatType); }); +}); - it('returns `anotherExample`', () => { - expect(anotherExample()).toBe('OMG'); +describe('deleteDuplicate', () => { + it('deberia retornar el calculo los todos los tipos de pokemones sin repetirse' , () => { + const calculator = deleteDuplicate(pokemonsTypeRepeat) + expect(calculator).toEqual(resultDeletePokemonsTypeDuplicate); }); }); + +describe('promPokemonEveryType', () => { + it('deberia retornar el calculo agregado de los tipos de los pokemones' , () => { + const calculator = promPokemonEveryType(Pokemons) + expect(calculator).toEqual(resultPromPokemonEveryType); + }); +});