diff --git a/README.md b/README.md index a45b7d55..0c93f182 100644 --- a/README.md +++ b/README.md @@ -1,623 +1,125 @@ # Data Lovers ## Índice +Definición del producto +Historias de usuario +Prototipo de alta y baja fidelidad +Criterios minimos de aceptación -* [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. Definición del producto + El objetivo de la página web es permitirle a los usuarios de LOL visualizar la información acerca de los campeones y sus roles. + Dánde en la página principal encontraran todos los campeones los cuales podran organizarlos alfabéticamente y en la sección de buscar se filtran por nombre y el resultado te traera la card de dicho campeon. También pueden interactuar con el boton de "Percentage of roles" para el fan de LOL que tenga curiosidad por saber cual es la cantidad total de cada Rol existente. + + Todo el diseño fue pensado para que el usuario se sienta comodo al navegar en la pagina, se usaron colores semejantes al juego y su tipografia para que tenga armonia visual. + + -*** -## 1. Preámbulo +2. Historias de Usuario -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. +Historia #1: La primera historia de usuario tiene como publico objetivo las personas interesadas a comenzar a jugar LOL, y que deseen familiarizarse con los campeones y aprender a reconocerlos en pantalla. La visualizacion se realizará por medio de tarjetas que contengan el nombre, el titulo, la image, la descripción y características del campeó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_. + HU1="Yo como persona interesada en comenzar a jugar lol, quiero poder ver las imágenes nombres y blurbs de los personajes para aprender a reconocerlos en pantalla." -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. + Historia #2: Esta historia se enfoca en aquellas usuarias que ya son jugadoras de LOL y que quieran visualizar los personajes que ya conocen alfabéticamente, ya sea A-Z o Z-A. -![pokemon-data-to-ui](https://user-images.githubusercontent.com/12631491/218505816-c6d11758-9de4-428f-affb-2a56ea4d68c4.png) + HU2="Yo como jugadora quiero ordenar los campeones de abajo hacia arriba mediante un botón que me permita ordenarlos alfabéticamente para no tener que hacer scroll hasta el final." -## 2. Resumen del proyecto +Historia #3: La historia numero 3, también se enfoca en una usuario que ya es jugadora. En este caso, la necesidad que tiene la usuaria es conocer las características especiales de un campeón específico, de manera que lo pueda buscar por su nombre en un recuadro de búsqueda. -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. + HU3="Yo como jugadora de lol quiero poder buscar por nombre a los personajes para poder ver su nivel de defensa,ataque magia y dificultad y no tener que buscarlo manualmente." + +Historia #4: La última historia de usuario creada, tiene como publico objetivo una persona aficionada al juego y sus personajes. Esta persona desea conocer el porcentaje de campeones que cumplen cierto rol en el juego y así conocer más sobre el universo de LOL. -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). + HU4="Yo como fan de lol quiero saber el porcentaje de campeones en cada rol para conocer las estadísticas de los roles." + + -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. +3. Prototipos de alta y baja fidelidad + Producto final -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. +**HISTORIAS DE USUARIO 1,2 y 3** Para las tres primeras historias se realizó un solo prototipo ya que nuestro objetivo es que las necesidades de las primeras 3 usuarias fueran satisfechas en una sola página. -Estos son datos que te proponemos: +A continuación se muestran los prototipos de baja fidelidad a mano, se realizaron dos versiones: -* [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) + ![Baja1](https://user-images.githubusercontent.com/116685936/234927681-ab282f00-0df3-4f57-a739-734f205e51ea.jpg) -* [League of Legends - Challenger leaderboard](src/data/lol/lol.json): - Este set de datos muestra la lista de campeones en una liga del - juego League of Legends (LoL). - - [Investigación con jugadores de LoL](src/data/lol/README.md) -* [Rick and Morty](src/data/rickandmorty/rickandmorty.json). - Este set nos proporciona la lista de los personajes de la serie Rick and - Morty. [API Rick and Morty](https://rickandmortyapi.com). - - [Investigación con seguidores de Rick and Morty](src/data/rickandmorty/README.md) + ![Baja2](https://user-images.githubusercontent.com/116685936/234928022-63aa1c8e-de77-41b8-b8cc-e858ec9c2b8c.jpg) -* [Juegos Olímpicos de Río de Janeiro](src/data/athletes/athletes.json). - Este set nos proporciona la lista de los atletas que ganaron medallas en las - olímpiadas de Río de Janeiro. - - [Investigación con interesados en juegos olímpicos de Río de Janeiro](src/data/athletes/README.md) -* [Studio Ghibli](src/data/ghibli/ghibli.json). - En este set encontrarás una lista de las animaciones y sus personajes del - [Studio Ghibli](https://ghiblicollection.com/). - - [Investigación con seguidores de las animaciones del Studio Ghibli](src/data/ghibli/README.md) +Posteriormente se tomaron las mejores caracteristicas de cada una para crear un prototipo de baja fidelidad digital: -* [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) + ![image](https://user-images.githubusercontent.com/116685936/234928342-24709378-bf21-4a88-93dd-da9e5d07d44f.png) -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. + ![image](https://user-images.githubusercontent.com/116685936/234928840-d19e326f-c4a2-448d-9c29-ba3f5307b8f3.png) -## 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. + Al hacer el test de usabilidad de estas 3 primeras historias, se mencionó que la barra de busqueda se encontraba muy corta y que eso podia ser visualemnte incomodo para el usuario. Tambien se recomendó usar una paleta de colores oscura ya que las imagenes de los personajes resaltan. -### HTML -- [ ] **Uso de HTML semántico** + Finalmente se creo el prototipo de alta fidelidad para las primeras 3 historias de usuario: -
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) -

+ ![image](https://user-images.githubusercontent.com/116685936/234933569-f6cd29c2-7232-4d70-9719-d7e0f5dee124.png) -### CSS + ![image](https://user-images.githubusercontent.com/116685936/234930302-817b2953-5669-4e01-8f50-46edbc9f5aac.png) -- [ ] **Uso de selectores de CSS** +En el test de usabilidad para esta etapa se habló de hacer un menú desplegable para el responsive, también tener en cuenta que toda la data a manipular esta en inglés y por lo tanto todos los botones y extras de la página debe estar en inglés. -
Links

+A continuación el prototipo para la versión responsive: - * [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) -

+ ![image](https://user-images.githubusercontent.com/116685936/234933763-63875ef6-d09c-44cb-aef0-c713c0a8d82a.png) -- [ ] **Modelo de caja (box model): borde, margen, padding** -
Links

+**HISTORIA DE USUARIO 4**: Para la historia de usuario 4, se creó un nuevo html que desplegara la información acordada. +A continuación se muestran los prototipos de baja fidelidad a mano, se realizaron dos versiones: - * [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/) -

+![IMG_0469](https://user-images.githubusercontent.com/116685936/234936260-4c27d492-3236-4b31-bf0b-defb0dfb9f8c.jpg) -- [ ] **Uso de flexbox en CSS** +![IMG_5649 (1)](https://user-images.githubusercontent.com/116685936/234936338-161b0e18-a104-4842-8ddc-6374e6ee1421.jpg) -
Links

+Al hacer el test de usabilidad se habló de cambiar la imagen de la pagina principal para que no se viera repetitivo, y este fue el resultado del prototipo de alta fidelidad para la 4ta historia: - * [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) -

+![image](https://user-images.githubusercontent.com/127060183/234938440-bf7c86fb-9243-47df-8f67-e2ea159f421b.png) -### Web APIs +Responsive +![image](https://user-images.githubusercontent.com/127060183/234936862-e4bda829-e68d-4f1c-b620-a1eeff9f26a7.png) -- [ ] **Uso de selectores del DOM** -
Links

+Al realizar el test de usabilidad de las 4 historias se cambió: - * [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) -

+- El despliegue de las tarjetas. Antes: abarcaba toda la pagina cada vez que se pasaba por encima de una tarjeta Ahora: Se hace una transformación de escala a 1.5, sin abarcar una gran parte de la pantalla. +- El boton de "sort" se movió debajo de los botones de "search" y "clear" para que el usuario pudiera tenerlo cerca. +-Para el responsive el despliegue del menu hamburguesa se realizó en la parte superior de la imagen. -- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)** +**PRODUCTO FINAL HISTORIAS 1,2 y 3** +Version escritorio +![image](https://user-images.githubusercontent.com/127060183/234939570-60aa7de0-6687-4f79-82ad-832c75205a76.png) +![image](https://user-images.githubusercontent.com/127060183/234940156-00ea1228-825b-45e1-b736-74b457a7a387.png) +![image](https://user-images.githubusercontent.com/127060183/234941730-33704896-fde3-42e3-a827-407bbc53a30f.png) -
Links

+Responsive +![image](https://user-images.githubusercontent.com/127060183/234942903-1c082344-0059-40af-a9a6-2bc520ada773.png) +![image](https://user-images.githubusercontent.com/127060183/234943142-92bef609-a745-4fa4-933a-328615460727.png) +![image](https://user-images.githubusercontent.com/127060183/234943479-b016887a-3969-4986-a0b5-aca863b7fb9c.png) - * [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) -

+**PRODUCTO FINAL HISTORIA 4** -- [ ] **Manipulación dinámica del DOM** +Version escritorio +![image](https://user-images.githubusercontent.com/116685936/234940093-fc0e19e1-33ab-4664-8f4b-bcb15874bb8e.png) +![image](https://user-images.githubusercontent.com/116685936/234940409-841f26c5-5b67-4f96-977d-708f8b881883.png) -
Links

+Responsive +![image](https://user-images.githubusercontent.com/116685936/234940726-fcf6f654-a7f3-497e-a2a0-71912ae9af4f.png) +![image](https://user-images.githubusercontent.com/116685936/234940888-7dd1eb24-936d-471e-8bb4-75a1dafc67eb.png) - * [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 ` + + + + Document + + + +
+
+ ☰ +
+ +
+ +
+
+

FIGHTERS

+

Fighters (also known as Bruisers) are a diverse group of short-ranged combatants who excel at both + dealing and surviving damage. With easy access to heavy, continuous damage (or DPS) and a host of innate + defenses, fighters thrive in extended fights as they seek out enemies to take down, but their limited + range puts them at constant risk of being kept at bay (or kited) by their opponents via crowd control, + range and mobility.

+ +
+
+
+

ASSASSIN

+

Slayers (formerly "Assassins") are fragile but agile damage-focused melee champions that look to swiftly + take down their targets.

+ +
+
+
+

TANK

+

Tanks are tough melee champions who sacrifice damage in exchange for powerful crowd control. While able + to engage enemies in combat, a tank's purpose isn't usually to kill opponents; rather, tanks excel at + disrupting enemies and diverting focus to themselves, allowing them to lock down specific targets (or + several targets at once), as well as remove (or peel) threats from their allies.

+ +
Hola
+
+
+

MAGE

+

Mages are champions who typically possess great reach, ability-based area of effect damage and crowd + control, and who use all of these strengths in tandem with each other to trap and destroy enemies from a + distance. Specializing in magic damage, often burst damage, and therefore investing heavily in items + that allow them to cast stronger and faster spells.

+ +
+
+
+

SUPPORT

+

Within a drafted team, the Support is one of the two champions assigned to the bottom lane alongside the + Bottom icon.png Bottom Carry. This role's initial goal is to assist their more vulnerable team mate + through the earliest stages of the game, and is a position that suits champions with either utility, + disengage or high base damage.

+ +
+
+
+

MARKSMEN

+

Marksmen are ranged champions whose power almost exclusively revolves around their basic attacks: using + their reach to land massive continuous damage from a distance, marksmen are capable of taking down even + the toughest of opponents when positioned behind the safety of their team, and excel at securing map + objectives such as Dragon Dragon, Baron Nashor Baron Nashor and turrets.

+ +
+
+
+ + + + \ No newline at end of file diff --git a/src/calculo.js b/src/calculo.js new file mode 100644 index 00000000..60c80bd6 --- /dev/null +++ b/src/calculo.js @@ -0,0 +1,18 @@ +/* eslint-disable no-console */ + + +document.addEventListener('DOMContentLoaded', () => { + const btMenuc = document.querySelector('.bt-menuc'); + const ulc = document.querySelector('.contenidoc'); + + btMenuc.addEventListener('click', () => { + ulc.classList.toggle('contenidoc'); + console.log(btMenuc) + }); + +}); + + + + + diff --git a/src/data.js b/src/data.js index 6291453d..cfc4d2bc 100644 --- a/src/data.js +++ b/src/data.js @@ -1,9 +1,147 @@ -// estas funciones son de ejemplo +/* eslint-disable no-console */ +import data from './data/lol/lol.js'; + + +//VISUALIZADOR + +const contenedor = document.querySelector('.contenedor'); + +const champion = Object.keys(data.data) + + + + +for (let i = 0; i < champion.length; i++) { + const key = champion[i] + const card = data.data[key]; + + + const name = card.name; + const img = card.img; + const blurb = card.blurb; + const title = card.title; + const infoObject = card.info; + + const championCard = document.createElement("div"); + championCard.classList.add("champion-card"); + + + + for (const subKey in infoObject) { + // eslint-disable-next-line no-prototype-builtins + if (infoObject.hasOwnProperty(subKey)) { + const subValue = infoObject[subKey]; + const statElement = document.createElement("h5"); + statElement.innerHTML = `${subKey}: ${subValue}`; + championCard.appendChild(statElement); + statElement.classList.add("info") + } + + + + } + + const championImgContainer = document.createElement("div"); + championImgContainer.classList.add("champion-img-container"); + + const championImg = document.createElement("img"); + championImg.src = img; + //championImg.setAttribute("src",img) + championImg.alt = name; + championImg.classList.add("champion-img"); + + // creación h2 para ingresar nombre + const championName = document.createElement("h2"); + // toma el primer caracter del nombre para que sea en mayuscula y juntarlo con slice para devolver el resto de caracteres. + championName.textContent = name.charAt(0).toUpperCase() + name.slice(1); + championName.classList.add("champion-name"); + + const championBlurb = document.createElement("p"); + championBlurb.textContent = blurb.charAt(0).toUpperCase() + blurb.slice(1); + championBlurb.textContent = blurb.replace('

', ' ') + championBlurb.classList.add("blurb"); + + + const championTitle = document.createElement("h4"); + championTitle.textContent = title.charAt(0).toUpperCase() + title.slice(1); + championTitle.classList.add("title") + -export const example = () => { - return 'example'; -}; -export const anotherExample = () => { - return 'OMG'; + + + + championImgContainer.appendChild(championImg); + championCard.appendChild(championName); + championCard.appendChild(championImgContainer); + contenedor.appendChild(championCard); + championCard.appendChild(championTitle) + championCard.appendChild(championBlurb); + + + card.championCard = championCard; + + card.championCard.style.display = 'block'; + + +} + +//ORGANIZADOR + + +const allChampions = Object.keys(data.data); +let currentChampions = allChampions + +const sortBy = (sortOrder) => { + currentChampions.sort((a, b) => sortOrder === 'asc' ? a.localeCompare(b) : b.localeCompare(a)); + contenedor.innerHTML = ''; + currentChampions.forEach(key => { + const champion = data.data[key]; + const championCard = champion.championCard; + championCard.style.display = 'block'; + contenedor.appendChild(championCard); + }); + console.log(champion) }; + + +//BUSQUEDA + +const buscar = document.querySelector('#buscar'); +//const botonBuscar = document.querySelector('#botonBuscar'); +//const botonLimpiar = document.querySelector('#botonLimpiar') +const resultados = document.querySelector('#resultados') +const notFound = "Champion not found" + +const filtrar = () => { + currentChampions = []; + resultados.innerHTML = ''; + + const texto = buscar.value.toLowerCase(); + + for (const key in data.data) { + const card = data.data[key]; + const name = card.name.toLowerCase(); + + if (name.includes(texto)) { + resultados.appendChild(card.championCard); + card.championCard.style.display = 'block'; + currentChampions.push(card.id) + } else { + card.championCard.style.display = 'none'; + } + + } + + if (resultados.innerHTML === '') { + resultados.innerHTML += ` +

${notFound}

+ ` + // eslint-disable-next-line no-undef + } + //buscar.value = ""; +} + + + +export { sortBy, filtrar }; diff --git a/src/data/lol/lol.js b/src/data/lol/lol.js index 1b7f1911..8bd518bd 100644 --- a/src/data/lol/lol.js +++ b/src/data/lol/lol.js @@ -217,7 +217,7 @@ export default { splash: "http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Amumu_0.jpg", blurb: - "''Solitude can be lonelier than death.''

A lonely and melancholy soul from ancient Shurima, Amumu roams the world in search of a friend. Cursed by an ancient spell, he is doomed to remain alone forever, as his touch is death and his affection ...", + "''Solitude can be lonelier than death. A lonely and melancholy soul from ancient Shurima, Amumu roams the world in search of a friend. Cursed by an ancient spell, he is doomed to remain alone forever, as his touch is death and his affection ...", info: { attack: 2, defense: 6, @@ -676,7 +676,7 @@ export default { splash: "http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Braum_0.jpg", blurb: - "''Would you like a bedtime story?''

''Grandma, I'm too old for that.''

''You're never too old to be told a story.''

The girl reluctantly crawls into bed and waits, knowing she won't win this battle. A bitter wind howls outside, ...", + "''Would you like a bedtime story?''

''Grandma, I'm too old for that.''

''You're never too old to be told a story.''The girl reluctantly crawls into bed and waits, knowing she won't win this battle. A bitter wind howls outside, ...", info: { attack: 3, defense: 9, @@ -727,7 +727,7 @@ export default { splash: "http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Caitlyn_0.jpg", blurb: - "''Go ahead, run. I'll give you a five minute head start.''

One of the reasons Piltover is known as the City of Progress is because it has an extraordinarily low crime rate. This hasn't always been the case; brigands and thieves of all sorts ...", + "''Go ahead, run. I'll give you a five minute head start.''One of the reasons Piltover is known as the City of Progress is because it has an extraordinarily low crime rate. This hasn't always been the case; brigands and thieves of all sorts ...", info: { attack: 8, defense: 2, @@ -5267,7 +5267,7 @@ export default { splash: "http://ddragon.leagueoflegends.com/cdn/img/champion/splash/TahmKench_0.jpg", blurb: - "''The whole world's a river, and I'm its king.''
Tahm Kench travels Runeterra's waterways, feeding his insatiable appetite with the misery of the unsuspecting. The singularly charming gourmand savors every moment of his victims' suffering. A deal ...", + "''The whole world's a river, and I'm its king.''Tahm Kench travels Runeterra's waterways, feeding his insatiable appetite with the misery of the unsuspecting. The singularly charming gourmand savors every moment of his victims' suffering. A deal ...", info: { attack: 3, defense: 9, @@ -5279,9 +5279,9 @@ export default { sprite: "champion3.png", group: "champion", x: 0, - y: 48, - w: 48, - h: 48 + y: 0, + w: 0, + h: 0 }, tags: ["Support", "Tank"], partype: "MP", @@ -5522,7 +5522,7 @@ export default { splash: "http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Thresh_0.jpg", blurb: - "''The mind is a wondrous thing to tear apart.''

Sadistic and cunning, Thresh is a restless spirit who prides himself on tormenting mortals and breaking them with slow, excruciating inventiveness. His victims suffer far beyond the point of death,...", + "''The mind is a wondrous thing to tear apart.''Sadistic and cunning, Thresh is a restless spirit who prides himself on tormenting mortals and breaking them with slow, excruciating inventiveness. His victims suffer far beyond the point of death,...", info: { attack: 5, defense: 6, @@ -5777,7 +5777,7 @@ export default { splash: "http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Twitch_0.jpg", blurb: - "H.I.V.E. Incident Report
Code Violation: Industrial Homicide
Casefile Status: Unsolved
Investigating Agent: Rol, P.

Team responded to report of suspicious character, criminal activity; proceeded to Sump Works, Sector 90TZ. Sector 90TZ ...", + "H.I.V.E. Incident Report Code Violation: Industrial Homicide Casefile Status: Unsolved Investigating Agent: Rol, P. Team responded to report of suspicious character, criminal activity; proceeded to Sump Works, Sector 90TZ. Sector 90TZ ...", info: { attack: 9, defense: 2, @@ -6283,7 +6283,7 @@ export default { key: "106", name: "Volibear", title: "the Thunder's Roar", - img: "https://ddragon.leagueoflegends.com/cdn/img/champion/splash/Volibear_0.jpg", + img: "https://images3.alphacoders.com/129/1295580.jpg", splash: "http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Volibear_0.jpg", blurb: @@ -6542,7 +6542,7 @@ export default { splash: "http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Yorick_0.jpg", blurb: - "''These isles… How they scream.''
The last survivor of a long-forgotten religious order, Yorick is both blessed and cursed with power over the dead. Trapped on the Shadow Isles, his only companions are the rotting corpses and shrieking spirits that ...", + "''These isles… How they scream.''The last survivor of a long-forgotten religious order, Yorick is both blessed and cursed with power over the dead. Trapped on the Shadow Isles, his only companions are the rotting corpses and shrieking spirits that ...", info: { attack: 6, defense: 6, @@ -6840,3 +6840,4 @@ export default { } } }; + diff --git a/src/fondocalculo.png b/src/fondocalculo.png new file mode 100644 index 00000000..ac242a3b Binary files /dev/null and b/src/fondocalculo.png differ diff --git a/src/funciones.js b/src/funciones.js new file mode 100644 index 00000000..78816b0c --- /dev/null +++ b/src/funciones.js @@ -0,0 +1,62 @@ +/* eslint-disable no-console */ +import data from './data/pokemon/pokemon.js'; + +//filter + +export const datos = data.pokemon; +export const datosNombres = data.pokemon.name; + + +export function filtrado(nombrePokemon) { + const pokemons = datos.filter(pokemon => nombrePokemon === pokemon.name); + if (pokemons.length === 0) { + return "No se encontró"; + + } else { + return pokemons; + } + +} +const resultados = filtrado("hola"); +console.log(resultados) + +//Sort + +export function sortBy(datos, ordenPokemon) { + return datos.sort((a, b) => { + if (ordenPokemon === "asc") { + if (a.name > b.name) { + return 1; + } else if (a.name < b.name) { + return -1; + } + } + if (ordenPokemon === "desc") { + if (a.name < b.name) { + return 1; + } else if (a.name > b.name) { + return -1; + } + } + }); +} +const resultados2 = sortBy([ + { "name": "charmander" }, + { "name": "charmeleon" }, + { "name": "bulbasaur" }, + { "name": "hypno" }, + { "name": "voltorb" } +], "desc") +console.log(resultados2) + +//calculo agregado + +export function contarRol(datos, rol) { + let count = 0; + for (let i = 0; i < datos.length; i++) { + if (datos[i].includes(rol)) { + count++; + } + } + return ((count * 100) / datos.length).toFixed(2) + '%'; +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 5aef81f0..cb992634 100644 --- a/src/index.html +++ b/src/index.html @@ -1,12 +1,68 @@ - - - Data Lovers - - - -
- - - + + + + Data Lovers + + + + + + + + +
+
+
+ +
+
+ +
+
+ ☰ +
+ + +
+ +
+ + + +

+ +
+ + + +
+
+ + +
+ + + \ No newline at end of file diff --git a/src/logo.png b/src/logo.png new file mode 100644 index 00000000..8d7e93d8 Binary files /dev/null and b/src/logo.png differ diff --git a/src/main.js b/src/main.js index 71c59f2d..9d1bb2b7 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,48 @@ -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'; +/* eslint-disable no-console */ + +import { sortBy, filtrar } from './data.js'; + + +//ORGANIZACION A-Z y Z-A + + + +document.addEventListener('DOMContentLoaded', () => { + const selectSort = document.querySelector('.sort'); + selectSort.addEventListener('change', () => { + const sortOrder = selectSort.value === '1' ? 'asc' : 'desc'; + sortBy(sortOrder); + }); +}); + + +//FILTRADO BUSQUEDA + + + +// eslint-disable-next-line no-undef +botonBuscar.addEventListener("click", () => { + // eslint-disable-next-line no-undef + resultados.innerHTML = ''; + filtrar() +}); + +// eslint-disable-next-line no-undef +botonLimpiar.addEventListener("click", function () { + location.reload(); +}); + +document.addEventListener('DOMContentLoaded', () => { + const btMenu = document.querySelector('.bt-menu'); + const ul = document.querySelector('.contenido'); + + btMenu.addEventListener('click', () => { + ul.classList.toggle('contenido'); + console.log('Hace click') + }); +}); + + + + -console.log(example, data); diff --git a/src/style.css b/src/style.css index e69de29b..c3e4c573 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,573 @@ +body { + background-color: #261C2C; + padding: 0; + margin: 0; +} + +.logo { + position: relative; + left: 0px; + top: 0px; + border: none !important; + margin: 0px; + padding: 0px; + width: 1518px; + height: 286px; + line-height: 0%; +} + +.logIn-signUp { + margin-top: 10px; + margin-right: 100px; + top: 500px; + z-index: 2; + display: block; + float: right; +} + +.logIn { + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + color: #FFFFFF; + width: 90px; + height: 40px; + background: #6E85B2; + border-radius: 20px; + border-color: #FFFFFF; + margin-right: 20px; +} + +.SignUp { + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; + color: #FFFFFF; + width: 90px; + height: 40px; + background: #6E85B2; + border-radius: 20px; + border-color: #FFFFFF; +} + +.header { + width: 85%; + margin-left: 9.5%; + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + font-weight: 700; + font-size: 20px; + line-height: 24px; + background: #5C527F; + position: relative; + width: 1518px; + height: 68px; + left: -144px; + top: -25px; + z-index: -3; +} + +.listaheader { + list-style-type: none; + margin: 0; + padding: 0; + /*overflow: hidden;*/ + position: sticky; + top: 5px; + margin-top: 20px; + margin-left: 100px; +} + + +ul { + display: block; + list-style: none; + padding: 0; + margin: 0; +} + +li { + float: left; + position: relative; + top: 22px; +} + +a { + margin-bottom: 10px; + text-align: center; + display: block; + padding-left: 10px; + padding-right: 10px; + text-decoration: none; + color: #ffff; +} + +header nav ul li a:hover { + cursor: pointer; + color: #261C2C; +} + +input[type="text"] { + float: left; + /*padding: 6px;*/ + font-size: 14px; + /*color: F6F7F9;*/ + position: absolute; + width: 200px; + height: 38px; + left: -7px; + top: 341px; + border-radius: 10px; + margin-left: 350px; + margin-top: 100px; +} + +::placeholder { + color: black; +} + +.contenedor { + width: auto; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: -160px; + margin-left: 61px; + gap: 50px; + animation: fade-out 0.5s ease; +} + +.champion-img-container { + /*position: relative;*/ + height: 250px; + width: 220px; + /*background-color: aqua;*/ +} + +.champion-img { + height: 100%; + width: 100%; + position: relative; + bottom: 110px; +} + +.champion-name { + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 29px; + color: white; + position: relative; + bottom: 95px; +} + +.champion-card { + background-color: #6E85B2; + margin-top: 100px; + margin-bottom: 5px; + margin-left: 10px; + display: flex; + flex-direction: column; + text-align: center; + height: 250px; + width: 220px; + overflow: hidden; + +} + +.champion-card:hover { + transform: scale(1.2); + background-color: #6E85B2; + transform-origin: center; + height: 520px; + transition: all .3s ease-in-out; + border-radius: 12px; + /* offset-x | offset-y | blur-radius | color */ + box-shadow: 9px 10px 9px black; +} +/*.contImg { + background-color: #5c527f; + width: 1508px; +}*/ +.blurb { + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + font-weight: 520; + font-size: 11px; + line-height: 15px; + text-align: center; + margin-left: 7px; + margin-right: 10px; + color: #FFFFFF; + z-index: 1; + display: grid; + grid-template-columns: 5.3cm; + grid-template-rows: 6.5cm; + position: relative; + bottom: 130px; + + +} + +.title { + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + font-weight: 600; + font-size: 15px; + text-align: center; + color: #FFFFFF; + position: relative; + bottom: 120px; +} + +/* .info { + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + font-weight: 700; + font-size: 12px; + text-align:justify; + color: #261C2C; + position: relative; + top: 350px; + line-height: -20px; + left: 142px; + background-color:greenyellow; + width: 500px; + height: 40px; +} */ + +#botonBuscar { + margin-top: 0px; + margin-left: 665px; + border-radius: 5px; + width: 80px; + height: 30px; + position: relative; + top: -172px; + left: -105px; +} + + + + +.sort { + margin-top: 210px; + right: -345px; + position: relative; + width: 90px; + height: 33px; + border-radius: 7px; + top: -82px; + +} + +h3 { + color: #FFFFFF; + position: relative; + align-content: baseline; + top: 0px; + left: 450px; + text-decoration: none; + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + font-size: 25px; + opacity: 75%; + width: auto; +} + +#botonLimpiar { + top: -172px; + position: relative; + width: 80px; + height: 30px; + border-radius: 5px; + left: -101px; +} + + +#resultados { + width: auto; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-left: 61px; + margin-top: -160px; + left: 50px; + gap: 50px; + align-content: center; + position: sticky; +} + +h5 { + + line-height: 0px; + color: #261C2C; + flex-wrap: wrap; + position: relative; + top: 440px; + left: 0px; + font-family: sans-serif; + font-style: normal; + font-weight: 700; + font-size: 12px; + text-transform: capitalize; + display: inline-block; + margin-right: 5px; + padding: 10px; + margin-top: 0px; + background-color: rgba(61, 5, 66, 0.2); + +} + +/*.menu-container { + display: flex; + justify-content: space-between; + align-items: center; +}*/ + + + +ul li { + margin: 0; +} + + +.menu_bar { + display: none; +} + +/*.contImg { + background-color: #5C527F; +}*/ + +#calculo{ + margin-top: 0px; + margin-left: 665px; + border-radius: 5px; + width: 211px; + height: 41px; + position: absolute; + top: 441px; + left: 236px; +} +.textCalculo{ + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + font-weight: 530; + font-size: 16px; + color: black; + top: 6px; + position: relative; +} + +/*RESPONSIVE*/ + + +@media screen and (min-width:480px) and (max-width:760px) { + + + + body { + margin: 0; + } + + + .logo { + width: 100%; + height: 201px; + object-fit: cover; + object-position: bottom; + z-index: -10; + } + + /* .menu-container { + display: flex; + flex-direction: column; + width: 150px; +} */ + .header { + width: 105%; + background: #5C527F; + /*position: relative; + width: 1518px;*/ + height: 50px; + left: -69px; + top: -86px; + /*z-index: -3;*/ + + } + + + nav ul { + width: 60%; + height: 271px; + margin: 0; + position: relative; + background-color: #5C527F; + top: -208px; + left: -81px; + padding: 0px; + border: 0px; + margin-top: 21px; + border-radius: 20px; + + } + + /*menu hamburguesa*/ + + nav ul li { + display: block; + float: none; + padding: 0px; + border: 0px; + line-height: 18px; + margin-bottom: 0; + z-index: 2; + top: 49px; + } + + + + .menu_bar { + display: block; + width: 100%; + top: 30px; + } + + .menu_bar .bt-menu { + display: block; + padding: 20px; + /*background:#5C527F;*/ + -moz-box-sizing: border-box; + box-sizing: border-box; + text-align: left; + top: -210px; + position: relative; + } + + .contenido { + display: none; + + } + + .logIn-signUp { + margin-top: 6px; + margin-right: 18px; + float: right; + } + + .logIn { + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + font-weight: 600; + font-size: 12px; + line-height: 24px; + color: #FFFFFF; + width: 80px; + height: 30px; + background: #6E85B2; + border-radius: 13px; + border-color: #FFFFFF; + margin-right: 20px; + } + + .SignUp { + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + font-weight: 600; + font-size: 12px; + line-height: 24px; + color: #FFFFFF; + width: 80px; + height: 30px; + background: #6E85B2; + border-radius: 13px; + border-color: #FFFFFF; + } + + .champion-card { + + position: relative; + margin-left: 100px; + bottom: 200px; + } + + .sort { + top: -151px; + right: -26px; + position: relative; + z-index: 10; + height: 25px; + } + + input[type="text"] { + + left: -325px; + top: 202px; + z-index: 10; + height: 35px; + } + + #botonBuscar { + margin-top: 0px; + left: -638px; + position: relative; + top: -217px; + z-index: 10; + } + + #botonLimpiar { + top: -247px; + left: 116px; + position: relative; + z-index: 10; + + } + + #calculo{ + margin-top: 0px; + margin-left: 665px; + border-radius: 5px; + width: 179px; + height: 35px; + position: absolute; + top: 306px; + left: -390px; + } + .textCalculo{ + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + font-weight: 530; + font-size: 16px; + color: black; + top: 6px; + position: relative; + } + + .contenedor { + width: auto; + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: -101px; + margin-left: 25px; + gap: 5%; + animation: fade-out 0.5s ease; + } + + #resultados{ + top: 400px; + margin-top: -90px; + } + + h3{ + top: -120px; + left: 50px; + } + +} \ No newline at end of file diff --git a/test/data.spec.js b/test/data.spec.js deleted file mode 100644 index 09b1f23f..00000000 --- a/test/data.spec.js +++ /dev/null @@ -1,23 +0,0 @@ -import { example, anotherExample } from '../src/data.js'; - - -describe('example', () => { - it('is a function', () => { - expect(typeof example).toBe('function'); - }); - - it('returns `example`', () => { - expect(example()).toBe('example'); - }); -}); - - -describe('anotherExample', () => { - it('is a function', () => { - expect(typeof anotherExample).toBe('function'); - }); - - it('returns `anotherExample`', () => { - expect(anotherExample()).toBe('OMG'); - }); -}); diff --git a/test/funciones.spec.js b/test/funciones.spec.js new file mode 100644 index 00000000..5d7df522 --- /dev/null +++ b/test/funciones.spec.js @@ -0,0 +1,171 @@ +import { filtrado, sortBy, contarRol } from '../src/funciones.js'; + + +//TEST FILTRADO +const entrada = ("venusaur") + + +const salida = [ + { + "num": "003", + "name": "venusaur", + "generation": { + "num": "generation i", + "name": "kanto" + }, + "about": "There is a large flower on Venusaur's back. The flower is said to take on vivid colors if it gets plenty of nutrition and sunlight. The flower's aroma soothes the emotions of people.", + "img": "https://www.serebii.net/pokemongo/pokemon/003.png", + "size": { + "height": "2.01 m", + "weight": "100.0 kg" + }, + "pokemon-rarity": "normal", + "type": [ + "grass", + "poison" + ], + "encounter": { + "base-flee-rate": "0.05", + "base-capture-rate": "0.05" + }, + "spawn-chance": "0.017", + "stats": { + "base-attack": "198", + "base-defense": "189", + "base-stamina": "190", + "max-cp": "2720", + "max-hp": "162" + }, + "resistant": [ + "water", + "electric", + "grass", + "fighting", + "fairy" + ], + "weaknesses": [ + "fire", + "ice", + "flying", + "psychic" + ], + "quick-move": [ + { + "name": "razor leaf", + "type": "grass", + "base-damage": "13", + "energy": "7", + "move-duration-seg": "1" + }, + { + "name": "vine whip", + "type": "grass", + "base-damage": "7", + "energy": "6", + "move-duration-seg": "0.6" + } + ], + "special-attack": [ + { + "name": "sludge bomb", + "type": "poison", + "base-damage": "80", + "energy": "-50", + "move-duration-seg": "2.3" + }, + { + "name": "petal blizzard", + "type": "grass", + "base-damage": "110", + "energy": "-100", + "move-duration-seg": "2.6" + }, + { + "name": "solar beam", + "type": "grass", + "base-damage": "180", + "energy": "-100", + "move-duration-seg": "4.9" + } + ], + "egg": "not in eggs", + "buddy-distance-km": "3", + "evolution": { + "candy": "bulbasaur candy", + "prev-evolution": [{ + "num": "002", + "name": "ivysaur", + "candy-cost": "100", + "prev-evolution": [{ + "num": "001", + "name": "bulbasaur", + "candy-cost": "25" + }] + }] + } + } +] + + + +describe('probando filtrado', () => { + it('Debe devolver el nombre venusaur', () => { + expect(filtrado(entrada)).toEqual(salida); + }); + + it('Debe devolver no se encontró cuando ingrese un string vacio o un nombre equivocado', () => { + expect(filtrado("hola")).toBe("No se encontró"); + }); +}); + +//TEST ORDENADO + +const entrada2 = [ + { "name": "charmander" }, + { "name": "charmeleon" }, + { "name": "bulbasaur" }, + { "name": "hypno" }, + { "name": "voltorb" } +] +const pokemonesAZ = [ + { "name": "bulbasaur" }, + { "name": "charmander" }, + { "name": "charmeleon" }, + { "name": "hypno" }, + { "name": "voltorb" } +] +const pokemonesZA = [ + { "name": "voltorb" }, + { "name": "hypno" }, + { "name": "charmeleon" }, + { "name": "charmander" }, + { "name": "bulbasaur" } +] + +describe('probando sort', () => { + it('debe organizar los pokemones de la A-Z', () => { + expect(sortBy(entrada2, "asc")).toStrictEqual(pokemonesAZ); + }); + + it('debe orgamizar los pokemones de la Z-A', () => { + expect(sortBy(entrada2, "desc")).toStrictEqual(pokemonesZA); + }); + +}); +//TEST CALCULO AGREGADO + + +const entrada3 = [ ["Assassin"], + ["Assassin", "Mage"], + ["Tank", "Mage"], + ["Support", "Mage"] +]; + +const salida3 = "75.00%"; + +describe('probando calculo agregado', () => { + it('Debe traer el porcentaje de los roles', () => { + expect(contarRol(entrada3, "Mage")).toBe(salida3); + }); +}); +