diff --git a/README.md b/README.md index 7825c572..c9ec2fe8 100644 --- a/README.md +++ b/README.md @@ -1,370 +1,142 @@ -# Data Lovers +# PROYECTO : Data Lovers + +# DATA ELEGIDA: League of Legends (Lol) ## Índice -* [1. Preámbulo](#1-preámbulo) -* [2. Resumen del proyecto](#2-resumen-del-proyecto) -* [3. Objetivos de aprendizaje](#3-objetivos-de-aprendizaje) -* [4. Consideraciones generales](#4-consideraciones-generales) -* [5. Criterios de aceptación mínimos del proyecto](#5-criterios-de-aceptación-mínimos-del-proyecto) -* [6. Hacker edition](#6-hacker-edition) -* [7. Consideraciones técnicas](#7-consideraciones-técnicas) -* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias) -* [9. Checklist](#9-checklist) +* [1. Resumen del proyecto](#1-resumen-del-proyecto) +* [2. Definición del producto](#2-definición-del-producto) +* [3. Historias de usuario](#3-Historias-de-usuario) +* [4. Objetivos de aprendizaje](#4-objetivos-de-aprendizaje) +* [5. Checklist](#5-checklist) *** -## 1. Preámbulo - -Según [Forbes](https://www.forbes.com/sites/bernardmarr/2018/05/21/how-much-data-do-we-create-every-day-the-mind-blowing-stats-everyone-should-read), -el 90% de la data que existe hoy ha sido creada durante los últimos dos años. -Cada día generamos 2.5 millones de terabytes de datos, una cifra sin -precedentes. - -No obstante, los datos por sí mismos son de poca utilidad. Para que esas -grandes cantidades de datos se conviertan en **información** fácil de leer para -los usuarios, necesitamos entender y procesar estos datos. Una manera simple de -hacerlo es creando _interfaces_ y _visualizaciones_. - -## 2. Resumen del proyecto - -En este proyecto **construirás una _página web_ para visualizar un -_conjunto (set) de datos_** que se adecúe a lo que descubras que tu usuario -necesita. - -Como entregable final tendrás una página web que permita **visualizar la data, -filtrarla, ordenarla y hacer algún cálculo agregado**. Con cálculo agregado -nos referimos a distintos cálculos que puedes hacer con la data para mostrar -información aún más relevante para los usuarios (promedio, el valor máximo -o mínimo, etc). - -Esta vez te proponemos una serie de datos de diferentes _temáticas_ para que -explores y decidas con qué temática te interesa trabajar. Hemos elegido -específicamente estos sets de datos porque creemos que se adecúan bien a esta -etapa de tu aprendizaje. - -Una vez que definas tu área de interés, buscar entender quién es tu usuario -y qué necesita saber o ver exactamente; luego podrás construir la interfaz que -le ayude a interactuar y entender mejor esos datos. - -Estos son datos que te proponemos: - -* [Pokémon](src/data/pokemon/pokemon.json): - En este set encontrarás una lista con los 251 Pokémon de la región de Kanto - y Johto, junto con sus respectivas estadísticas usadas en el juego - [Pokémon GO](http://pokemongolive.com). - - [Investigación con jugadores de Pokémon Go](src/data/pokemon/README.md) - -* [League of Legends - Challenger leaderboard](src/data/lol/lol.json): - Este set de datos muestra la lista de campeones en una liga del - juego League of Legends (LoL). - - [Investigación con jugadores de LoL](src/data/lol/README.md) - -* [Rick and Morty](src/data/rickandmorty/rickandmorty.json). - Este set nos proporciona la lista de los personajes de la serie Rick and - Morty. - - [Investigación con seguidores de Rick and Morty](src/data/rickandmorty/README.md) - -* [Juegos Olímpicos de Río de Janeiro](src/data/athletes/athletes.json). - Este set nos proporciona la lista de los atletas que ganaron medallas en las - olímpiadas de Río de Janeiro. - - [Investigación con interesados en juegos olímpicos de Río de Janeiro](src/data/athletes/README.md) - -* [Studio Ghibli](src/data/ghibli/ghibli.json). - En este set encontrarás una lista de las animaciones y sus personajes del - [Studio Ghibli](https://ghiblicollection.com/). - - [Investigación con seguidores de las animaciones del Studio Ghibli](src/data/ghibli/README.md) - -* [Harry Potter](src/data/harrypotter/harry.json). - En este set encontrarás una lista de los personajes,libros pociones - y hechizos de toda la saga de - [Harry Potter](https://harrypotter.fandom.com). - - [Investigación con seguidoras de Harry Potter](src/data/harrypotter/README.md) - -El objetivo principal de este proyecto es que aprendas a diseñar y construir una -interfaz web donde se pueda visualizar y manipular data, entendiendo lo que el -usuario necesita. - -## 3. Objetivos de aprendizaje - -Reflexiona y luego marca los objetivos que has llegado a entender y aplicar en tu proyecto. Piensa en eso al decidir tu estrategia de trabajo. - -### HTML - -- [ ] **Uso de HTML semántico** - -
Links

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

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

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

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

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

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

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

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

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

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

+## 1. Resumen del proyecto - * [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) -

+ La pagina web fue diseñada basandose en la informacion obtenida del juego League of Legends y del tipo d usuario que conoce de este juego.Lol tiene como atractivo principal a sus personajes,los que son conocidos por los jugadores como "campeones",cada uno de ellos tienen ciertas caracteristicas que los diferencian a unos de otros y cada uno de estos detalles son determinantes para el jugador de Lol(invocador) ya que basandose en la informacion que pueda obtener de cada uno de ellos podra decidir quienes serian los campeones que conformarian su equipo para ser llevados a una partida. -- [ ] **Manipulación dinámica del DOM** +# IMAGEN FINAL DEL PROYECTO. +✔ Diseño Responsive +![Captura](https://user-images.githubusercontent.com/107730198/229387304-ace97a19-be2e-4c97-b7df-fdd568ec0d55.PNG) -
Links

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

-### JavaScript +## 2. Definición del producto +Nuestro proceso de diseño hacia el producto final comenzo por entender los hallazgos de la investigacion UX. +Primero debimos conocer y entender que era importante para nuestro usuario y de que manera les seria util nuestra pagina web. -- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos** +### INVESTIGACIÓN : +- ¿Quiénes son los principales usuarios del producto? +Jugadores que ya conocen el concepto principal del juego , y estan interesados en conoceer cada vez mas a cada campeon para tomar decisiones correctas antes del juego. -- [ ] **Arrays (arreglos)** +- ¿Cuáles son los objetivos de estos usuarios en relación con el producto? +Necesitan informacion concisa sobre cada campeon para tener una idea clara y saber con cuales jugar y poder derrotar al enemigo. -
Links

+- ¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué? +Poder conocerlos y saber sus nombres ya que se les hace dificlil recordarlos por la gran cantidad que hay. +Tener la opcion de poder ordenar de manera ascendente o descendente a los campeones, ya que si ya saben a quien estan buscando pero solo recuerdan la inicial de su letra eso les ayudaría un poco a agilizar la busqueda. +Saber quienes son los campeones que pertenecen a determinado rol para poder ubicarlos en cada campo de batalla. - * [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) -

+- ¿Cuándo utilizan o utilizarían el producto? +Antes de iniciar una partida, ya que ellos primero eligen a los campeones para poder definir su estilo de juego. -- [ ] **Objetos (key, value)** +## 3. Historias de usuario +En el Trello confeccionamos columnas que simulaban la metodologia agil(product backlog, sprint backlog, haciendo, bloqueado y concluido) y diseñamos las Historias de Usuarios (#2 H.U en total). -
Links

+Aquí el link : (https://trello.com/b/XOlvRbSQ/lol) - * [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/05-objects/01-objects) -

+Diseñamos distintos prototipos de baja fidelidad (con lapiz y papel) que testeamos con posibles usuarios mediante el testeo de usabilidad, recibiendo feedback que nos ayudo a afinar nuestras HU iniciales y es por ellos que a medida que se fue avanzando con la parte de la funcionalidad, el proyecto fue cambiando visualmente con respecto a como fue concebido inicialmente en los prototipos de baja fidelidad. En las ferias de proyecto obtuvimos feedback tecnico que contribuia a la mejora de la pagina web y ademas se continuo testeando con usuarios potenciales para conocer que tan intuitiva era la pagina web.Adicional al diseño de Interfaz de usuario nuestras historias contienen la implementación requerida(HTML/CSS/JS). +Nuestro proyecto puede MOSTRAR, ORDENAR, FILTRAR y tiene un CÁLCULO. -- [ ] **Variables (declaración, asignación, ámbito)** +### 1° HISTORIA DE USUARIO -
Links

+YO COMO: jugador de LOL, QUIERO: ver a todos los campeones (imagen y nombre), PARA: Conocerlos e identificarme por su apariencia. - * [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) -

+#### ✔ CRITERIOS DE ACEPTACION: +- El usuario podrá observar las imágenes y nombres de los campeones desde cualquier dispositivo. +- El usuario podrá ver la pagina web en Internet (desplegado GitHub). -- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)** +#### ✔ DEFINICION DE TERMINADO: +- Prototipo de alta definición en programa de diseño UX. +- Crear una página Responsive. +- Publicación de proyecto en GitHub. +- Subir detalles al Readme. -
Links

+#### ✔ PROTOTIPO DE BAJA FIDELIDAD: +![boceto](https://user-images.githubusercontent.com/107730198/229387771-4a933fa1-1c6a-492d-bafd-2458f1e1eaf0.jpeg) - * [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) -

+#### ✔ PROTOTIPO DE ALTA FIDELIDAD: +![Captura](https://user-images.githubusercontent.com/107730198/229387800-d1539c9d-0904-431d-9bf8-ebb42a501487.PNG) -- [ ] **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) -

+### 2° HISTORIA DE USUARIO -- [ ] **Funciones (params, args, return)** +YO COMO: jugador de LOL, QUIERO: ver a todos los campeones (imagen y nombre)ordenados alfabéticamente, PARA: que la búsqueda se me haga mas fácil. -
Links

+#### ✔ CRITERIOS DE ACEPTACION: +- El usuario observará dos opciones, uno para ordenar de manera ascendente y descendente. +- El usuario al selecionar un orden podrá ver a todos los campeones alfabeticamente ordenados segun la opcion elegida. +- El usuario observará las imágenes y nombres de los campeones ordenados desde cualquier dispositivo. +- El usuario podrá ver la página web en Internet (desplegado GitHub). - * [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) -

+#### ✔ DEFINICION DE TERMINADO: +- Prototipo de alta definición en programa de diseño UX. +- Crear una página Responsive +- Publicación de proyecto en GitHub +- Subir detalles al Readme. -- [ ] **Pruebas unitarias (unit tests)** +#### ✔ PROTOTIPO DE BAJA FIDELIDAD: +![boceto pantalla inicio lol](https://user-images.githubusercontent.com/107730198/229388134-43579c2c-1dfb-47c8-a5a2-06044561f15b.jpeg) -
Links

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

+#### ✔ PROTOTIPO DE ALTA FIDELIDAD: +![PROTOTIPO ](https://user-images.githubusercontent.com/107730198/229388211-f1bf12e9-70fb-4ee6-ad86-4558395f9460.PNG) -- [ ] **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)** +### HTML y CSS -- [ ] **Diferenciar entre expresiones (expressions) y sentencias (statements)** +- [X] Entender y reconocer por qué es importante el HTML semántico. +- [X] Identificar y entender tipos de selectores en CSS. +- [X] Entender como funciona `flexbox` en CSS. +- [X] Construir tu aplicación respetando el diseño planeado (maquetación). -### Control de Versiones (Git y GitHub) +### DOM -- [ ] **Git: Instalación y configuración** +- [X] Entender y reconocer los selectores del DOM (`querySelector` | `querySelectorAll`). +- [X] Manejar eventos del DOM. (`addEventListener`) +- [X] Manipular dinámicamente el DOM. (`createElement`, `appendchild`, `innerHTML`, `value`) -- [ ] **Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)** +### Javascript -- [ ] **Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)** +- [X] Manipular arrays (`filter` | `map` | `sort` | `reduce`). +- [X] Manipular objects (key | value). +- [X] Entender el uso de condicionales (`if-else` | `switch`). +- [X] Entender el uso de bucles (`for` | `forEach`). +- [X] Entender la diferencia entre expression y statements. +- [X] Utilizar funciones (`parámetros` | `argumentos` | `valor de retorno`). +- [X] Entender la diferencia entre tipos de datos atómicos y estructurados. +- [X] Utilizar ES Modules (`import` | `export`). -- [ ] **GitHub: Creación de cuenta y repos, configuración de llaves SSH** +### Pruebas Unitarias (_testing_) +- [X] Testear funciones (funciones puras). -- [ ] **GitHub: Despliegue con GitHub Pages** +### Git y GitHub +- [X] Ejecutar comandos de git (`add` | `commit` | `pull` | `status` | `push`). +- [X] Utilizar los repositorios de GitHub (`clone` | `fork` | `gh-pages`). +- [X] Colaborar en Github (`pull requests`). -
Links

+### Buenas prácticas de desarrollo +- [X] Organizar y dividir el código en módulos (Modularización). +- [X] Utilizar identificadores descriptivos (Nomenclatura | Semántica). - * [Sitio oficial de GitHub Pages](https://pages.github.com/) -

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

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

- -## 4. Consideraciones generales - -* Este proyecto se debe resolver en duplas. -* El proyecto será entregado subiendo tu código a GitHub (commit/push) y la - interfaz será desplegada usando [GitHub Pages](https://pages.github.com/). -* Tiempo para completarlo: Toma como referencia 4 semanas. - -## 5. Criterios de aceptación mínimos del proyecto - -Los criterios para considerar que has completado este proyecto son: - -### Definición del producto - -Documenta brevemente tu trabajo en el archivo `README.md` de tu repositorio, -contándonos cómo fue tu proceso de diseño y cómo crees que el producto resuelve -el problema (o problemas) que tiene tu usuario. - -### Historias de usuario - -Una vez que entiendas las necesidades de tus usuarios, escribe las [Historias -de Usuario](https://es.wikipedia.org/wiki/Historias_de_usuario) que representen -todo lo que el usuario necesita hacer/ver. Las **Historias de Usuario** deben -ser el resultado de tu proceso de investigación o _research_ de tus usuarios. - -Asegúrate de incluir la definición de terminado (_definition of done_) y los -Criterios de Aceptación para cada una. - -En la medida de lo posible, termina una historia de usuario antes de pasar -a la siguiente (Cumple con Definición de Terminado + Criterios de Aceptación). - -### Diseño de la Interfaz de Usuario - -#### Prototipo de baja fidelidad - -Durante tu trabajo deberás haber hecho e iterado bocetos (_sketches_) de tu -solución usando papel y lápiz. Te recomendamos tomar fotos de todas las -iteraciones que hagas, que las subas a tu repositorio y las menciones en tu -`README.md`. - -#### Prototipo de alta fidelidad - -Lo siguiente es diseñar tu Interfaz de Usuario (UI por sus siglas en inglés - -_User Interface_). Para eso debes aprender a utilizar alguna herramienta de -diseño visual. Nosotros te recomendamos [Figma](https://www.figma.com/) que es -una herramienta que funciona en el navegador y, además, puedes crear una cuenta -gratis. Sin embargo, eres libre de utilizar otros editores gráficos como -Illustrator, Photoshop, PowerPoint, Keynote, etc. - -El diseño debe representar el _ideal_ de tu solución. Digamos que es lo que -desearías implementar si tuvieras tiempo ilimitado para trabajar. Además, tu -diseño debe seguir los fundamentos de _visual design_. - -#### Testeos de usabilidad - -Durante el reto deberás hacer _tests_ de usabilidad con distintos usuarios, y -en base a los resultados, deberás iterar tus diseños. Cuéntanos -qué problemas de usabilidad detectaste a través de los _tests_ y cómo los -mejoraste en tu propuesta final. - -### Implementación de la Interfaz de Usuario (HTML/CSS/JS) - -Luego de diseñar tu interfaz de usuario deberás trabajar en su implementación. -**No** es necesario que construyas la interfaz exactamente como la diseñaste. -Tu tiempo de hacking es escaso, así que deberás priorizar - -Como mínimo, tu implementación debe: - -1. Mostrar la data en una interfaz: puede ser un card, una tabla, una lista, - etc. -2. Ser _responsive_, es decir, debe visualizarse sin problemas desde distintos - tamaños de pantallas: móviles, tablets y desktops. -3. Que la interfaz siga los fundamentos de _visual design_. - -### Pruebas unitarias - -El _boilerplate_ de este proyecto no incluye Pruebas Unitarias (_tests_), así es -que tendrás que escribirlas tú para las funciones encargadas de _procesar_, -_filtrar_ y _ordenar_ la data, así como _calcular_ estadísticas. - -Tus _pruebas unitarias_ deben dar una cobertura del 70% de _statements_ -(_sentencias_), _functions_ (_funciones_), _lines_ (_líneas_), y _branches_ -(_ramas_) del archivo `src/data.js` que contenga tus funciones y está detallado -en la sección de [Consideraciones técnicas](#srcdatajs). - -### Checklist +## 5. Checklist * [ ] Usa VanillaJS. * [ ] Pasa linter (`npm run pretest`) @@ -384,234 +156,3 @@ en la sección de [Consideraciones técnicas](#srcdatajs). * [ ] UI: Permite filtrar data en base a una condición. * [ ] UI: Es _responsive_. -## 6. Hacker edition - -Las secciones llamadas _Hacker Edition_ son **opcionales**. Si **terminaste** -con todo lo anterior y te queda tiempo, intenta completarlas. Así podrás -profundizar y/o ejercitar más sobre los objetivos de aprendizaje del proyecto. - -Features/características extra sugeridas: - -* En lugar de consumir la data estática brindada en este repositorio, puedes - consumir la data de forma dinámica, cargando un archivo JSON por medio de - `fetch`. La carpeta `src/data` contiene una versión `.js` y una `.json` de - de cada set datos. -* Agregarle a tu interfaz de usuario implementada visualizaciones gráficas. Para - ello te recomendamos explorar librerías de gráficas como - [Chart.js](https://www.chartjs.org/) - o [Google Charts](https://developers.google.com/chart/). -* 100% Coverage - -## 7. Consideraciones técnicas - -La lógica del proyecto debe estar implementada completamente en JavaScript -(ES6), HTML y CSS. En este proyecto NO está permitido usar librerías o -frameworks, solo [vanilla JavaScript](https://medium.com/laboratoria-how-to/vanillajs-vs-jquery-31e623bbd46e), -con la excepción de librerías para hacer gráficas (charts); ver -[_Parte opcional_](#6-hacker-edition) más arriba. - -El _boilerplate_ contiene una estructura de archivos como punto de partida así -como toda la configuración de dependencias: - -```text -. -├── EXTRA.md -├── README.md -├── package.json -├── src -| ├── data (según con qué data trabajes) -| | ├── lol -| | | ├── lol.js -| | | ├── lol.json -| | | └── README.md -| | ├── pokemon -| | | ├── pokemon.js -| | | ├── pokemon.json -| | | └── README.md -| | └── rickandmorty -| | | ├── rickandmorty.js -| | | ├── rickandmorty.json -| | | └── README.md -| | └── athletes -| | | ├── athletes.js -| | | ├── athletes.json -| | | └── README.md -| | └── ghibli -| | | ├── ghibli.js -| | | ├── ghibli.json -| | | └── README.md -| ├── data.js -| ├── index.html -| ├── main.js -| └── style.css -└── test - └── data.spec.js - -directory: 7 file: 20 -``` - -### `src/index.html` - -Como en el proyecto anterior, existe un archivo `index.html`. Como ya sabes, -acá va la página que se mostrará al usuario. También nos sirve para indicar -qué scripts se usarán y unir todo lo que hemos hecho. - -### `src/main.js` - -Recomendamos usar `src/main.js` para todo tu código que tenga que ver con -mostrar los datos en la pantalla. Con esto nos referimos básicamente a la -interacción con el DOM. Operaciones como creación de nodos, registro de -manejadores de eventos (_event listeners_ o _event handlers_), .... - -Esta no es la única forma de dividir tu código, puedes usar más archivos y -carpetas, siempre y cuando la estructura sea clara para tus compañeras. - -En este archivo encontrarás una serie de _imports_ _comentados_. Para _cargar_ -las diferentes fuentes de datos tendrás que _descomentar_ la línea -correspondiente. - -Por ejemplo, si "descomentamos" la siguiente línea: - -```js -// import data from './data/lol/lol.js'; -``` - -La línea quedaría así: - -```js -import data from './data/lol/lol.js'; -``` - -Y ahora tendríamos la variable `data` disponible en el script `src/main.js`. - -### `src/data.js` - -El corazón de este proyecto es la manipulación de datos a través de arreglos -y objetos. - -Te recomendamos que este archivo contenga toda la funcionalidad que corresponda -a obtener, procesar y manipular datos (tus funciones). Por ejemplo: - -* `filterData(data, condition)`: esta función `filter` o filtrar recibiría la - data, y nos retornaría aquellos datos que sí cumplan con la condición. - -* `sortData(data, sortBy, sortOrder)`: esta función `sort` u ordenar - recibe tres parámetros. - El primer parámetro, `data`, nos entrega los datos. - El segundo parámetro, `sortBy`, nos dice con respecto a cuál de los campos de - la data se quiere ordenar. - El tercer parámetro, `sortOrder`, indica si se quiere ordenar de manera - ascendente o descendente. - -* `computeStats(data)`: la función `compute` o calcular, nos permitirá hacer - cálculos estadísticos básicos para ser mostrados de acuerdo a la data - proporcionada. - -Estos nombres de funciones y de parámetros son solamente referenciales, lo que -decidas depende de tu propia implementación. - -Estas funciones deben ser [_puras_](https://medium.com/laboratoria-developers/introducci%C3%B3n-a-la-programaci%C3%B3n-funcional-en-javascript-parte-2-funciones-puras-b99e08c2895d) -e independientes del DOM. Estas funciones serán después usadas desde el archivo -`src/main.js`, al cargar la página, y cada vez que el usuario interactúe (click, -filtrado, ordenado, ...). - -### `src/data` - -En esta carpeta están los datos de las diferentes fuentes. Encontrarás una -carpeta por cada fuente, y dentro de cada carpeta dos archivos: uno con la -extensión `.js` y otro `.json`. Ambos archivos contienen la misma data; la -diferencia es que el `.js` lo usaremos a través de una etiqueta ` + + - - -
- + + +
+ + + + +
+ + + +
+
+
+
+ + + + + diff --git a/src/main.js b/src/main.js index 71c59f2d..3685caa6 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,195 @@ -import { example } from './data.js'; -// import data from './data/lol/lol.js'; -import data from './data/pokemon/pokemon.js'; -// import data from './data/rickandmorty/rickandmorty.js'; +// import data from './data/atletas/atletas.js'; +// import data from './data/pokemon/pokemon.js'; -console.log(example, data); +// AQUI MANEJAMOS EL DOM + +import data from './data/lol/lol.js'; +import { + sortData, filterData, averageData, averageName, +} from './data.js'; + + + +const lol = data.data; +const arrObject = Object.values(lol); +// console.log(lol); +// console.log(arrObject); + +// MOSTRAR DATA +const container = document.getElementById('container'); + +const createTemplate = (arr) => { //esta linea ordena de A-z + arr.forEach((champion) => { + const newElement = document.createElement('section'); + const img = document.createElement('img'); + const p = document.createElement('p'); + newElement.classList.add('class-section'); + newElement.classList.add('hoverSection'); + img.classList.add('class-img'); + p.classList.add('class-name'); + img.src = `${champion.splash}`; + p.innerHTML = `${champion.name}`; + newElement.appendChild(img); + newElement.appendChild(p); + container.appendChild(newElement); + }); +}; +createTemplate(arrObject); + + + + +// CREATE UN ELEMENTO P PARA MOSTRAR EL PROMEDIO +const pElement = document.createElement('p'); + + +// document.getElementById("mysection").className = "mystyle"; + +// ORDER DATA +const orderAz = document.getElementById('orderAz'); +orderAz.addEventListener('click', () => { + container.innerHTML = ''; + pElement.innerHTML = ''; + createTemplate(sortData(arrObject, 'name', 'ascending')); +}); + + + +// FILTRAR DATA Y CALCULAR PROMEDIO + +const showFilter = (arr) => { + arr.forEach((champion) => { + const newElement = document.createElement('section'); + const img = document.createElement('img'); + const p = document.createElement('h3'); + const pTags = document.createElement('p'); + const pAvg = document.createElement('p'); + newElement.classList.add('class-section'); + newElement.classList.add('hoverSection'); + p.classList.add('class-name'); + pTags.classList.add('class-avg'); + img.classList.add('class-img'); + pAvg.classList.add('class-avg'); + p.innerHTML = `${champion.name}`; + img.src = `${champion.splash}`; + pTags.innerHTML = `Role : ${(champion.tags).join(' , ')}`; + pAvg.innerHTML = `Average Offensive Statistic : ${averageName(arrObject, `${champion.name}`).toFixed(2)}`; + newElement.appendChild(img); + newElement.appendChild(p); + newElement.appendChild(pTags); + newElement.appendChild(pAvg); + container.appendChild(newElement); + }); +}; +showFilter(arrObject); + + +// ASESINOS +const assassin = document.getElementById('assassin'); +assassin.addEventListener('click', () => { + container.innerHTML = ''; + pElement.innerHTML = ''; + pElement.innerHTML = `Assassin Average Offensive Statistic : ${averageData(arrObject, 'Assassin').toFixed(2)}`; + const average = document.getElementById('average'); + average.appendChild(pElement); + showFilter(filterData(arrObject, 'Assassin')); +}); + + +// LUCHADORES + +const fighter = document.getElementById('fighter'); +fighter.addEventListener('click', () => { + container.innerHTML = ''; + pElement.innerHTML = ''; + pElement.innerHTML = `Fighter Average Offensive Statistic : ${averageData(arrObject, 'Fighter').toFixed(2)}`; + const average = document.getElementById('average'); + average.appendChild(pElement); + showFilter(filterData(arrObject, 'Fighter')); +}); + + +// MAGOS + +const mage = document.getElementById('mage'); +mage.addEventListener('click', () => { + container.innerHTML = ''; + pElement.innerHTML = ''; + pElement.innerHTML = `Mage Average Offensive Statistic : ${averageData(arrObject, 'Mage').toFixed(2)}`; + const average = document.getElementById('average'); + average.appendChild(pElement); + showFilter(filterData(arrObject, 'Mage')); +}); + + +// TIRADORES + +const marksman = document.getElementById('marksman'); +marksman.addEventListener('click', () => { + container.innerHTML = ''; + pElement.innerHTML = ''; + pElement.innerHTML = `Marksman Average Offensive Statistic : ${averageData(arrObject, 'Marksman').toFixed(2)}`; + const average = document.getElementById('average'); + average.appendChild(pElement); + showFilter(filterData(arrObject, 'Marksman')); +}); + + +// SOPORTES + +const support = document.getElementById('support'); +support.addEventListener('click', () => { + container.innerHTML = ''; + pElement.innerHTML = ''; + pElement.innerHTML = `Support Average Offensive Statistic : ${averageData(arrObject, 'Support').toFixed(2)}`; + const average = document.getElementById('average'); + average.appendChild(pElement); + showFilter(filterData(arrObject, 'Support')); +}); + + +// TANQUES + +const tank = document.getElementById('tank'); +tank.addEventListener('click', () => { + container.innerHTML = ''; + pElement.innerHTML = ''; + pElement.innerHTML = `Tank Average Offensive Statistic : ${averageData(arrObject, 'Tank').toFixed(2)}`; + const average = document.getElementById('average'); + average.appendChild(pElement); + showFilter(filterData(arrObject, 'Tank')); +}); + +// AGREGAR O ELIMINAR CLASE A
  • ,ACTIVAR AL HACER CLICK +const ul = document.querySelector('ul'); +const li = document.querySelectorAll('li'); + +li.forEach((el) => { + el.addEventListener('click', () => { + ul.querySelector('.active').classList.remove('active'); + el.classList.add('active'); + }); +}); + +// NO FUNCIONA BOTON DE SCROLL UP +// When the user clicks on the button, scroll to the top of the document +const topFunction = () => { + document.documentElement.scrollTop = 0; +}; + +// Get the button: +const mybutton = document.getElementById('myBtn'); +mybutton.addEventListener('click', () => { + topFunction(); +}); + +const scrollFunction = () => { + if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { + mybutton.style.display = 'block'; + } else { + mybutton.style.display = 'none'; + } +}; + +// When the user scrolls down 20px from the top of the document, show the button +window.onscroll = () => scrollFunction(); diff --git a/src/style.css b/src/style.css index e69de29b..add0de74 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,297 @@ +/*DEFINIENDO COLORES QUE SE USARÁN EN LA PAGINA*/ +:root { + --color-black: #000; + --color-white: #fff; + --color-dorado: #937341; + --color-fondo-div: rgb(6, 28, 37); + --color-hover-div: rgba(243, 168, 5, 0.842); + --color-hover-li:#eeda6718; + --color-active-dark: #2d2e2e; + --color-active-rol: #cca05a; + } + + /*VALORES POR DEFECTO*/ + * { + margin: 20; + padding: 20; + text-decoration: none; + list-style: none; + } + + /*FONDO DE PANTALLA*/ + body { + background-image: url(./data/img2/fondo.png); + } + + /* HEADER*/ + header { + width: 100%; + margin-top: 80px;/*distancia del logo con la pantalla parte de arriba*/ + } + + /*estilo de img logo*/ + .logo { + width: 63%; + margin: 8px 10% 5px 18%; + } + + /* dimensiones del label que contiene la img icono-menu */ + header label { + display: flex; + display: none; + width: 30px; + height: 30px; + padding: 10px; + border-right: 1px solid var(--color-dorado); + } + + /* estilo al label:cambia de color al hacer hover */ + header label:hover { + cursor: pointer; + background: var(--color-active-dark); + } + + /*PROPIEDADES DE UL PARA PODER TRABAJAR DINAMICAMENTE CON
  • */ + ul{ + display: flex; + background-color: rgba(0, 0, 0, 0.507); + margin-top: 17px; /*para poder separar la lista del header*/ + flex-wrap: wrap;/*envoltura flexibe*/ + border: 1px solid var(--color-dorado); + box-shadow: 0 0 2px rgba(173, 173, 173, 0.726); + } + + li{ + font-family: 'Poppins', sans-serif; + flex-grow: 1; + text-align: center; + line-height: 2.5; + font-size: 1em; + } + + /* estilo a los
  • /animacion*/ + li:hover { + background: var(--color-hover-li); + } + + li a{ + display: block; + text-decoration: none; + text-transform: uppercase; + color: var(--color-dorado); + font-size: 1.1em; + } + + /*utilizando "active"/se trabajo tambien con main.js*/ + li.active a { + font-family: 'Poppins', sans-serif; + font-weight: bold; + color: var(--color-active-rol); + background:#878a8a42; + /*text-shadow: 0 0 1.5px #fff;*/ + transition: all 0.1s ease-in-out 0.1s; + } + /* estilo para que el banner de la img dentro del header se ajuste al ancho del padre*/ + + /*RESPONSIVE MODO MOBIL/MENU HAMBURGUESA*/ + @media (max-width:768px) { + header{ + background: var(--color-black); + margin: 10px 0px 20px 0px; + } + + .logo { + width: 63%; + margin: 8px 10% -35px 18%; + } + + header label { + display: block; + margin-top: -8px; + } + + nav { + position:absolute; + background: var(--color-black); + width: 100%; + margin-left: -100%; + transition: all 0.5s; + } + + ul{ + flex-direction: column; + z-index: 1100; + } + + li { + border-bottom: inset 0.5px var(--color-dorado); ; /*borde solo a la parte superior*/ + } + + #btn-menu:checked ~ nav { + margin: 0; + z-index: 1; + } + + #btn-menu:checked ~ main { + z-index: -1; + } + + } + + /*TRABAJANDO CON EL CONTENEDOR DE LAS IMAGENES Y NOMBRES*/ + .class-div { + background-color: var(--color-fondo-div); + display: inline-block; + position: relative; /*estaba relative*/ + margin-top: 1%; + transform-style: preserve-3d;/*animacion*/ + transition: 1.5s;/*animacion*/ + transition: all 0.3s linear;/*ease*/ + cursor: pointer; + border: 1px solid var(--color-dorado); + } + + /*agregando hover al div de los campeones*/ + .hoverSection:hover{ + transform: scale(0.96); + background:var(--color-hover-div); + /*background-color: rgb(6, 95, 131);*/ + } + + /* dandole estilo al ID de la seccion dentro del main*/ + #container { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + flex-grow: 1; + /*z-index: -1100; /* aqui nunca iba a funcionar, imag todavia superponen al main-nav*/ + } + + /*IMAGENES DE CAMPEONES*/ + .class-img { + margin: 0; + width: 307px; + height: 200px; + } + + /*NOMBRES DE CAMPEONES*/ + .class-name { + font-size: 1.2em; + font-family: 'Acme', sans-serif;/*lo menciono para que aqui se utilize la fuente*/ + font-weight: bolder; + text-align: center; + margin-top: -0.2em; + padding: 0.10em; + text-transform: uppercase; + color: var(--color-white); + padding: 6% 8%; + padding-top: 2%; + padding-right: 8%; + padding-bottom: 2%; + padding-left: 8%; + } + + /*ESTILO DE LA FUNCION CALCULO*/ + .class-new{ + font-size: 1.8em; + font-family: 'Poppins', sans-serif; + text-align: center; + margin-top: -0.2em; + padding: 0.10em; + text-transform: uppercase; + padding: 6% 8%; + padding-top: 1.5%; + padding-right: 8%; + padding-bottom: 0.5%; + padding-left: 8%; + font-weight: bold; + -webkit-background-clip: text; + -moz-background-clip: text; + background-clip: text; + color: transparent; + text-shadow: 0px 3px 2.3px rgba(255, 255, 255, 0.548),0px -1px 1px rgb(0, 0, 0); + } + + /*estilo a la estadistica ofensiva de cada campeon*/ + .class-avg{ + font-size: 1.1em; + font-family: 'Acme', sans-serif;/*lo menciono para que aqui se utilize la fuente*/ + + text-align: center; + /*background-color: rgb(6, 28, 37);*/ + margin-top: -0.2em;/*15*/ + padding: 0.10em; + text-transform: capitalize; + color: var(--color-white); + padding: 6% 8%; + padding-top: 2%; + padding-right: 8%; + padding-bottom: 2%; + padding-left: 8%; + } + + /*estilo de hover sobre el promedio para cada campeon*/ + .class-avg:hover{ + transform: scale(0.96); + color: var(--color-black); + /*background:rgba(243, 168, 5, 0.842);*/ + } + + + + .text{ + color: var(--color-white); + font-size: 1em; + margin-top: -0.2em; + padding: 0.76em; + } + + /* BOTON DE SCROLL DOWN*/ + #myBtn { + display: none; /* Hidden by default */ + position: fixed; /* Fixed/sticky position */ + bottom: 20px; /* Place the button at the bottom of the page */ + right: 30px; /* Place the button 30px from the right */ + z-index: 99; /* Make sure it does not overlap */ + border: none; /* Remove borders */ + outline: none; /* Remove outline */ + background-color: red; /* Set a background color */ + color: white; /* Text color */ + cursor: pointer; /* Add a mouse pointer on hover */ + padding: 15px; /* Some padding */ + border-radius: 10px; /* Rounded corners */ + font-size: 18px; /* Increase font size */ + } + + /* HOVER DEL BOTON DE SCROLL DOWN*/ + #myBtn:hover { + background-color: #555; /* Add a dark-grey background on hover */ + } + + /*BARRA LATERAL DE LA PAGINA*/ + /* For the "inset" look only */ + html { + overflow: auto; + } + + body { + position: absolute; + top: 1px; + left: 0; + bottom: 3px; + right: 1px; + padding: 0; + overflow-y: scroll; + overflow-x: hidden; + } + + /* Let's get this party started */ + ::-webkit-scrollbar { + width: 12px; + } + + /* Handle */ + ::-webkit-scrollbar-thumb { + background:#fffffe31; + box-shadow: inset 0 0 6px rgba(0,0,0,0.5); + } \ No newline at end of file