diff --git a/README.md b/README.md index 4f9c333c..a79c3542 100644 --- a/README.md +++ b/README.md @@ -1,455 +1,80 @@ -# Data Lovers +# PokémonGO Pokédex -## Índice +PokémonGo Pokédex es un sitio web que le permite al usuario encontrar de manera fácil y rápida todos los pokémones de la región de Kanto, por su tipo, debilidad y demás datos utiles. -* [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. Parte adicional-opcional (extensión)](#6-parte-adicional-opcional-extensión) -* [7. Consideraciones técnicas](#7-consideraciones-técnicas) -* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias) +## 2 . Historias de usuario -*** + -## 1. Preámbulo +## 3. Investigación 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. +Pruebas de diseño UX -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, procesar y mostrar estos datos. Una manera -simple de hacerlo es creando _interfaces_ y _visualizaciones_. +### Sketch -En la siguiente imagen, podrás ver cómo con la data que que se ve en la parte -izquierda se puede construir (a la derecha) una interfaz amigable y comprensible -para el usuario. + -![json-interfaz](https://lh4.googleusercontent.com/Tn-RPXS26pVvOTdUzRT1KVaJ-_QbFs9SpcGLxSPE43fgbHaXtFgMUInuDt7kV41DkT1j8Tt29V0LxQW7SMtC6digOIhfTXSBKdwI08wUwhD3RAqlwy0hjfmhZ2BFe91mtmCSEqysfgk) +En feedback se quitaron botones que no eran necesarios y se agrego un buscador. -\* Puedes ver el detalle de la data en este [link](https://gist.github.com/lalogf/dd4aa3017a9f8aa8f90dfbca382c4dc9#file-student-json) -y la interfaz construida en este [link](https://app.talento.laboratoria.la/profile/HFOoMpOreBU2psCcjjLg5O2EWEv2). +### Wireframe -## 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 tu usuario necesita. +### Prototipo -Como entregable final tendrás una página web que permita a los usuarios -**visualizar, filtrar, ordenar, etc.**. + -Te proponemos una serie de datos de diferentes _temáticas_ para que los -explores y decidas con cuál te interesa trabajar. Cada _set_ de datos viene con -información básica sobre los datos y su estructura, y una lista de las -necesidades de los usuarios que proviene de una investigación (_research_) -hecha por el equipo de Laboratoria. - -Una vez que elijas, diseña tu proyecto intentando ofrecerle la mejor experiencia -posible para ayudarle a satisfacer sus necesidades. - -### Estos son datos que te proponemos: - -* [Indicadores de desarrollo del Banco Mundial](src/data/worldbank/worldbank.json) - de algunos países (Brasil, Chile, México y Perú). Estos datos incluyen - indicadores demográficos, económicos y comerciales. -* [Pokémon](src/data/pokemon/pokemon.json): - En este set encontrarás una lista con los 151 Pokémon de la región de Kanto, - junto con sus respectivas estadísticas usadas en el juego [Pokémon GO](http://pokemongolive.com). -* [Steam noticias](src/data/steam/steam.json): - Lista noticias relacionadas a los videojuegos presentes en la - plataforma de [Steam](https://store.steampowered.com/). -* [League of Legends - Challenger leaderboard](src/data/lol/lol.json): - Este set de datos muestra la lista de jugadores en una liga del - juego League of Legends (LoL), puedes revisar la documentación de su API en - este [link](https://developer.riotgames.com/api-methods/). -* [Personas heridas por medio de transporte en EEUU](src/data/injuries/injuries.json). - Este set nos muestra el número de personas heridas en accidentes de - transporte, con data anual desde 1960 y categorizada por tipo de transporte - (aire, barco, automóvil, moto, bicicleta, ...). -* [Rick and Morty](src/data/rickandmorty/rickandmorty.json). - Este set nos proporciona la lista de los personajes de la serie Rick and - Morty. Puedes revisar la documentación de su API en este [link](https://rickandmortyapi.com). -* [Pacientes en EEUU](src/data/patient/patient.json). - Este set nos proporciona una lista de pacientes de EEUU. Puedes revisar la - documentación de su API en este [link](https://r2.smarthealthit.org/Patient). - -## 3. Objetivos de aprendizaje +## 4. Objetivos de aprendizaje El objetivo principal de este proyecto es que, entendiendo las necesidades de tus usuarios, aprendas a diseñar y construir una interfaz web donde se pueda visualizar y manipular data. -Revisa la lista y reflexiona sobre los objetivos que conseguiste en el -proyecto anterior. Piensa en eso al decidir tu estrategia de trabajo individual -y de equipo. - ### UX -- [ ] Diseñar la aplicación pensando y entendiendo al usuario. -- [ ] Crear prototipos para obtener _feedback_ e iterar. -- [ ] Aplicar los principios de diseño visual (contraste, alineación, jerarquía). -- [ ] Planear y ejecutar _tests_ de usabilidad. +- [X] Diseñar la aplicación pensando y entendiendo al usuario. +- [X] Crear prototipos para obtener _feedback_ e iterar. +- [X] Aplicar los principios de diseño visual (contraste, alineación, jerarquía). +- [X] Planear y ejecutar _tests_ de usabilidad. ### HTML y CSS -- [ ] Entender y reconocer por qué es importante el HTML semántico. -- [ ] Identificar y entender tipos de selectores en CSS. -- [ ] Entender como funciona `flexbox` en CSS. -- [ ] Construir tu aplicación respetando el diseño planeado (maquetación). +- [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). ### DOM -- [ ] Entender y reconocer los selectores del DOM (querySelector | querySelectorAll). -- [ ] Manejar eventos del DOM. (addEventListener) -- [ ] Manipular dinámicamente el DOM. (createElement, appendchild, innerHTML, value) +- [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) ### Javascript - [ ] Manipular arrays (`filter` | `map` | `sort` | `reduce`). - [ ] Manipular objects (key | value). -- [ ] Entender el uso de condicionales (`if-else` | `switch`). +- [X] Entender el uso de condicionales (`if-else` | `switch`). - [ ] Entender el uso de bucles (`for` | `forEach`). - [ ] Entender la diferencia entre expression y statements. - [ ] Utilizar funciones (parámetros | argumentos | valor de retorno). - [ ] Entender la diferencia entre tipos de datos atómicos y estructurados. -- [ ] Utilizar ES Modules (`import` | `export`). +- [X] Utilizar ES Modules (`import` | `export`). ### Pruebas Unitarias (_testing_) - [ ] Testear funciones (funciones puras). ### Git y GitHub -- [ ] Ejecutar comandos de git (`add` | `commit` | `pull` | `status` | `push`). -- [ ] Utilizar los repositorios de GitHub (`clone` | `fork` | gh-pages). -- [ ] Colaborar en Github (pull requests). +- [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). ### Buenas prácticas de desarrollo -- [ ] Organizar y dividir el código en módulos (Modularización). -- [ ] Utilizar identificadores descriptivos (Nomenclatura | Semántica). +- [X] Organizar y dividir el código en módulos (Modularización). +- [X] Utilizar identificadores descriptivos (Nomenclatura | Semántica). - [ ] Utilizar linter para seguir buenas prácticas (ESLINT). -## 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: toma como referencia 3 semanas. - -## 5. Criterios de aceptación mínimos del proyecto - -Los criterios que deberás considerar para saber si 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 entendimiento 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 de construir 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. Recuerda utilizar la -[identidad gráfica](https://drive.google.com/open?id=1eeWFqrWpy-OYOH4EHDckFGunyrm9iNeE) -correspondiente a cada set de datos que elijas. - -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. -No tienes tiempo ilimitado para trabajar, así es 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 que tenga tu código. - -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. Parte adicional-opcional (extensión) - -Si **terminaste** con todo lo anterior y te queda tiempo, intenta explorar y -completar parte o todo de lo siguiente: - -* 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 de pruebas unitarias. - -## 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. - -No se debe utilizar la _pseudo-variable_ `this`. - -El _boilerplate_ contiene una estructura de archivos como punto de partida así -como toda la configuración de dependencias: - -```text -. -├── pokemon -| ├── README.md -├── potter -| ├── README.md -├── lol -| ├── README.md -├── src -| ├── data (según con qué data trabajes) -| | ├── lol -| | | ├── lol.js -| | | └── lol.json -| | ├── pokemon -| | | ├── pokemon.js -| | | └── pokemon.json -| | ├── potter -| | | ├── potter.js -| | | └── potter.json -| ├── data.js -| ├── index.html -| ├── main.js -| └── style.css -├── test -| ├── data.spec.js -├── README.md -└── package.json - -directory: 9 file: 16 -``` - -### `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é script se usará y unir todo lo que hemos hecho. - -Encontrarás 1 etiqueta inicial, la cual si deseas puedes borrar y empezar de cero: - -``` -
-``` - -### `src/main.js` - -Acá escribirás todo el código que tenga que ver con la interacción del DOM -(seleccionar, actualizar y manipular elementos del DOM y eventos). Es decir, -en este archivo deberás invocar a tus funciones exportadas en el boilerplate, -según sea necesario para realizar operaciones como creación de nodos, -registro de manejadores de eventos (_event listeners_ o _event handlers_), .... - -En este archivo encontrarás una serie de _sentencias_ `import` -_comentadas_. Para _cargar_ las diferentes fuentes de datos tendrás que -_descomentar_ estas _sentencias_. Cada una de estas sentencias importará un -objeto, el cual ya se encuentra exportado en el boilerplate. Este objeto -contiene la data correspondiente a esa fuente de datos. - -Por ejemplo, si "descomentamos" la siguiente línea: - -``` - /** - import LoL from './data/lol/lol.js' - */ -``` - -La línea quedaría así: - -``` -import LoL from './data/lol/lol.js' -``` - -Y ahora tendríamos el objeto `LoL` disponible en nuestro archivo (`src/main.js`). - -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. - -### `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. - -* Y así sucesivamente, según tu proyecto en particular. - -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 exportadas en el boilerplate, para -después ser 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 importaremos como un objeto al archivo main.js, -mientras que el `.json` está ahí para opcionalmente cargar la data de forma -asíncrona con [`fetch()`](https://developer.mozilla.org/es/docs/Web/API/Fetch_API) -(ver sección de [_Parte Opcional_](#6-hacker-edition)). - -### `test/data.spec.js` - -Tendrás también que completar las pruebas unitarias de las funciones -implementadas en el archivo `data.js`. - -## 8. Pistas, tips y lecturas complementarias - -### Primeros pasos - -Antes de empezar a escribir código, debes definir qué deberá hacer el producto -en base al conocimiento que puedas obtener de tu usuario. Estas preguntas te -pueden ayudar: - -* ¿Quiénes son los principales usuarios de producto? -* ¿Cuáles son los objetivos de estos usuarios en relación con el producto? -* ¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué? -* ¿Cuándo utilizan o utilizarían el producto? -* Toda tu investigación previa debe tener como resultado todas las Historias - de Usuario de tu proyecto. -* No hagas los prototipos de alta fidelidad de todas tus Historias. Comienza - solamente por los que se necesiten para tu Sprint 1 (semana 1 de trabajo). Más - pistas en la guía de organización para el proyecto. - -Cuando ya estés lista para codear, te sugerimos empezar de esta manera: - -1. Una de las integrantes del equipo debe realizar un :fork_and_knife: - [fork](https://help.github.com/articles/fork-a-repo/) del repo de tu cohort, - tus _coaches_ te compartirán un _link_ a un repo y te darán acceso de lectura - en ese repo. La otra integrante del equipo deber hacer un fork **del - repositorio de su compañera** y [configurar](https://gist.github.com/BCasal/026e4c7f5c71418485c1) - un `remote` hacia el mismo. -2. :arrow_down: [Clona](https://help.github.com/articles/cloning-a-repository/) - tu _fork_ a tu computadora (copia local). -3. 📦 Instala las dependencias del proyecto con el comando `npm install`. Esto - asume que has instalado [Node.js](https://nodejs.org/) (que incluye [npm](https://docs.npmjs.com/)). -4. Si todo ha ido bien, deberías poder ejecutar las :traffic_light: - pruebas unitarias (unit tests) con el comando `npm test`. -5. Para ver la interfaz de tu programa en el navegador, usa el comando - `npm start` para arrancar el servidor web y dirígete a - `http://localhost:5000` en tu navegador. -6. A codear se ha dicho! :rocket: - -*** - -### Contenido de referencia - -#### Diseño de experiencia de usuario (User Experience Design) - -* Investigación con usuarios / entrevistas -* Principios de diseño visual - -#### Desarrollo Front-end - -* Unidad de testing en curso de JavaScript en LMS. -* Unidad de arreglos en curso de JavaScript en LMS. -* Unidad de objetos en curso de JavaScript en LMS. -* Unidad de funciones en curso de JavaScript en LMS. -* Unidad de DOM en curso de Browser JavaScript en LMS. -* [Array en MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array) -* [Array.sort en MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/sort) -* [Array.map en MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map) -* [Array.filter en MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/filter) -* [Array.reduce en MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce) -* [Array.forEach en MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/forEach) -* [Object.keys en MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/keys) -* [Object.entries en MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/entries) -* [Fetch API en MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) -* [json.org](https://json.org/json-es.html) -* [expressions-vs-statements](https://2ality.com/2012/09/expressions-vs-statements.html) -* [expresión vs sentencia](https://openclassrooms.com/en/courses/4309531-descubre-las-funciones-en-javascript/5108986-diferencia-entre-expresion-y-sentencia) -* [datos atomicos vs datos estructurados](https://www.todojs.com/tipos-datos-javascript-es6/) -* [Modulos: Export](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/export) -* [Modulos: Import](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/import) - -#### Herramientas -* [Git](https://git-scm.com/) -* [GitHub](https://github.com/) -* [GitHub Pages](https://pages.github.com/) -* [Node.js](https://nodejs.org/) -* [Jest](https://jestjs.io/) -#### Organización del Trabajo -* [Historias de Usuario](https://www.youtube.com/watch?v=ky6wFiF5vMk&t=344s). - Ojo que Cris no diferencia _Definición de terminado_ de _Criterios de - Aceptación_ y nosotros sí lo haremos. Más detalles en la guía. -* [Cómo dividir H.U.](https://www.youtube.com/watch?v=Ueq786iZ30I&t=341s) -* [Guía para Data Lovers](https://docs.google.com/presentation/d/e/2PACX-1vQhx9D36NjpH-Daea-ITPUDUzNL8ZiNAprq_7b5PSUrfutk45tEtaOLz2lmd8f54_5jX1hypDM8f8SM/pub?start=false&loop=false&delayms=60000) -*** diff --git "a/Sin t\303\255tulo.key" "b/Sin t\303\255tulo.key" new file mode 100755 index 00000000..48f170d3 Binary files /dev/null and "b/Sin t\303\255tulo.key" differ diff --git a/src/data lovers.code-workspace b/src/data lovers.code-workspace new file mode 100644 index 00000000..343a4c45 --- /dev/null +++ b/src/data lovers.code-workspace @@ -0,0 +1,10 @@ +{ + "folders": [ + { + "path": "." + }, + { + "path": "/Users/zayrajeronimo/Documents/Laboratoria/Proyecto2/CDMX009-Data-Lovers/img" + } + ] +} \ No newline at end of file diff --git a/src/data.js b/src/data.js index 951191c6..184b5d91 100644 --- a/src/data.js +++ b/src/data.js @@ -1,13 +1,26 @@ // import data from './data/injuries/injuries.js'; // import data from './data/lol/lol.js'; // import data from './data/patient/patient.js'; -// import data from './data/pokemon/pokemon.js'; +import data from './data/pokemon/pokemon.js'; // import data from './data/rickandmorty/rickandmorty.js'; // import data from './data/steam/steam.js'; // import data from './data/steam/worldbank.js'; // esta es una función de ejemplo -export const example = () => { - return 'example'; -}; + + + +const filterData = (data, condition) => { + let arrType = []; + for (let i = 0; i < data.length; i++) { + for (let x = 0; x < data[i].type.length; x++) { + if (data[i].type[x] === condition) { + arrType.push(data[i]); + } + } + } + return arrType; + }; + + export {sortData, filterData} \ No newline at end of file diff --git a/src/img/backg-font.jpg b/src/img/backg-font.jpg new file mode 100644 index 00000000..7317a24c Binary files /dev/null and b/src/img/backg-font.jpg differ diff --git a/src/img/buscar-icon.png b/src/img/buscar-icon.png new file mode 100644 index 00000000..aa1d191a Binary files /dev/null and b/src/img/buscar-icon.png differ diff --git a/src/img/go-logo copia.png b/src/img/go-logo copia.png new file mode 100644 index 00000000..75d706fb Binary files /dev/null and b/src/img/go-logo copia.png differ diff --git a/src/img/go-logo.png b/src/img/go-logo.png new file mode 100644 index 00000000..af6da507 Binary files /dev/null and b/src/img/go-logo.png differ diff --git a/src/img/pokeball.png b/src/img/pokeball.png new file mode 100644 index 00000000..f0be4c18 Binary files /dev/null and b/src/img/pokeball.png differ diff --git a/src/img/pokedex-logo.png b/src/img/pokedex-logo.png new file mode 100644 index 00000000..44c63787 Binary files /dev/null and b/src/img/pokedex-logo.png differ diff --git a/src/img/pokedex.png b/src/img/pokedex.png new file mode 100644 index 00000000..24dbff7f Binary files /dev/null and b/src/img/pokedex.png differ diff --git a/src/img/pokemon-go.png b/src/img/pokemon-go.png new file mode 100644 index 00000000..325d7f33 Binary files /dev/null and b/src/img/pokemon-go.png differ diff --git a/src/img/prototipo.png b/src/img/prototipo.png new file mode 100644 index 00000000..8a901772 Binary files /dev/null and b/src/img/prototipo.png differ diff --git a/src/img/sketches.jpg b/src/img/sketches.jpg new file mode 100644 index 00000000..8d183cb6 Binary files /dev/null and b/src/img/sketches.jpg differ diff --git a/src/img/usuarios.png b/src/img/usuarios.png new file mode 100644 index 00000000..8d61bde5 Binary files /dev/null and b/src/img/usuarios.png differ diff --git a/src/img/wireframe.png b/src/img/wireframe.png new file mode 100644 index 00000000..ce8dcc8e Binary files /dev/null and b/src/img/wireframe.png differ diff --git a/src/index.html b/src/index.html index 7c800043..adf8cd73 100644 --- a/src/index.html +++ b/src/index.html @@ -2,13 +2,111 @@ - Data Lovers + PokémonGO + - + + + + + + -
- + +
+ + +

¿Estas listo para convertirte en
un verdadero maestro Pokémon?

+ +
+ + + +
+
+ + + + + +
+ + + + +
+ + + +
+ + + +
+ +
+
+ + +
+ +
+
+
+ + + + + + + + + - + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 1463fecf..9b9412ef 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,90 @@ -import { example } from './data.js'; +import data from './data/pokemon/pokemon.js'; -console.log(example); +console.log(data); +function nextContainer(idHideContainer, idNextContainer) { //Funcion para oculpar la primera pagina + document.getElementById(idNextContainer).style.display = 'block'; + document.getElementById(idHideContainer).style.display = 'none'; +} + +window.nextContainer = nextContainer; + +//function ShowContainerPokemon(){ + +//} + +function createPokemonItemHTML(pokemonObj) { + const name = pokemonObj.name, imgUrl = pokemonObj.img, id = pokemonObj.id; + let HTML = `
+
+ ${name}"
+
+

#${id} ${name}

+
+
`; //plantilla de cadena de texto// + + return HTML; +} + +function addPokemonHTMLToMainContainer(HTML) { + document.getElementById('pokemon-listing').innerHTML = HTML; +} + +function showAllPokemon() { + let pokemonHTML = ''; + data.pokemon.forEach((pokemonObj) => { + //console.log(pokemonObj); + //console.log(createPokemonItemHTML(pokemonObj)); + pokemonHTML += createPokemonItemHTML(pokemonObj); + }); + + addPokemonHTMLToMainContainer(pokemonHTML); +} + +function initial() { +//console.log(data.pokemon); +showAllPokemon(); +} + +window.initial = initial; +initial(); + + +//funcion lista tipo pokemon + +document.getElementById('typePokemon').addEventListener('change', (e) => { + const selectedIndex = e.currentTarget.selectedIndex; + if (selectedIndex === Ver) { + template(filterData(pokemon, 'All')); + } else if (selectedIndex === Agua) { + template(filterData(pokemon, 'Water')); + } else if (selectedIndex === Bicho) { + template(filterData(pokemon, 'Bug')); + } else if (selectedIndex === Dragón) { + template(filterData(pokemon, 'Dragon')); + } else if (selectedIndex === Eléctrico) { + template(filterData(pokemon, 'Electric')); + } else if (selectedIndex === Fantasma) { + template(filterData(pokemon, 'Ghost')); + } else if (selectedIndex === Fuego) { + template(filterData(pokemon, 'Fire')); + } else if (selectedIndex === Hielo) { + template(filterData(pokemon, 'Ice')); + } else if (selectedIndex === Lucha) { + template(filterData(pokemon, 'Fighting')); + } else if (selectedIndex === Normal) { + template(filterData(pokemon, 'Normal')); + } else if (selectedIndex === Hierva) { + template(filterData(pokemon, 'Grass')); + } else if (selectedIndex === Psíquico) { + template(filterData(pokemon, 'Psychic')); + } else if (selectedIndex === Roca) { + template(filterData(pokemon, 'Rock')); + } else if (selectedIndex === Tierra) { + template(filterData(pokemon, 'Ground')); + } else if (selectedIndex === Veneno) { + template(filterData(pokemon, 'Poison')); + } else if (selectedIndex === Volador) { + template(filterData(pokemon , 'Flying')); + } + }); \ No newline at end of file diff --git a/src/style.css b/src/style.css index e69de29b..ac927bc9 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,239 @@ +*{ + margin: 0; + padding: 0; +} + +html{ + background-image:url(img/backg-font.jpg); + background-size: cover; + background-repeat:no-repeat; + background-attachment: fixed; + font-family:"menlo"; + + } + +/*body { + + font-family: "menlo"; +}*/ + +.container-1 { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + font-family: "menlo"; +} + +.container input{ + margin:40px; +} + +#pokedex{ + margin-left: 40px; + margin-top: -15px; +} + +#logo{ + height: 250px; + width: 450px; +} + +#welcome{ + color: white; + font-size: 25px; + background-color: rgba(255, 4, 4, 0.596); + padding: 30px; + border-radius: 30px; +} + +.container.container-1{ + display: block; + display: flex; +} + +.container.container-2{ + display: none; +} + +#go-link{ + height: 50px; + width: 50px; +} + + +.container-bar { + display: flex; + text-align:center; + justify-content:center; + width: 100%; + height: 10%; + background: #d82b2e; + position:absolute; + font-size: 23px; + align-content:space-between; +} + + + +.container-bar a { + display: flex; + flex-direction: row; + position: relative; + padding: 30px 100px 0px 0px; + +} + +.container-bar ul { + margin: 0; + padding: 0; + list-style: none; + position: relative; + display: flex; + text-align:center; +} + +.container-bar ul li a{ + display: block; + color: white; + text-decoration: none; + width: 150px; + +} + +.container-bar ul after{ + content: ""; + clear:both; + display:block; +} + +.container-bar ul li { + float: left; + list-style:none; +} + +.container-bar ul ul { + display: none; +} + +.container-bar ul li:hover > ul { + display: block; +} + +.container-bar ul li:hover { + background: #d82b2e; + transition: all 0.3s; +} + +.container-bar ul li:hover a{ + color:white; +} + +.container-bar ul ul { + padding:0; + margin:0; + position: absolute; top:100%; + + background: rgb(216,43,46); + background: linear-gradient(90deg, rgba(216,43,46,0.7077205882352942) 0%, rgba(216,43,46,0.7077205882352942) 35%); +} + +.container-bar ul ul li a { + padding:15px 50px; + color: white; + width:150px; + text-align:center; + font-size: 19px; +} + +.container-bar ul ul li a:hover { + color: #333199; + transition: all 0.3s; + + + background: rgb(216,43,46); + background: linear-gradient(90deg, rgba(216,43,46,0.7077205882352942) 0%, rgba(216,43,46,0.7077205882352942) 35%); +} + +.container-bar shadow { + color: gainsboro; + + background: rgb(136,136,136); + background: linear-gradient(90deg, rgba(136,136,136,0.4023984593837535) 0%, rgba(138,138,138,0.5732668067226891) 0%); +} + +.logo-go { + display: inline-block; + + margin-top: -20px; + flex-direction: row; + position: center ; + justify-content: space-between; +} + + + +.search_bar { + width: 13%; + float: right; + /*padding: -20px 0px;*/ + box-sizing: border-box; + text-align: center; + margin-top: -40px; + display: flex; + flex-direction: row; + position: center; +} + +.search_bar input { + width: 100%; + padding: 0px 10px 0px 40px; + box-sizing: border-box; + height:25px; + + font-size: 14px; + font-family: "menlo"; + color: #333199; + display: inline-block; + + background: #ffff url("../img/buscar-icon.png") no-repeat 9px center; +} + +.pokemon-list{ + padding: 130px 20px 20px 20px; + margin: 10px; +} + +.main-container { + display: flex; + flex-wrap: wrap; + padding: 50px; + padding-left: 160px; + +} + +#pokemon-listing{ + max-height: 500px; +} + +.pokemon-item-container { + width: 20%; + height: 30%; + background-color: white; + border-radius: 10%; + margin-left: 40px; + margin-right: 100px; + margin-bottom: 40px; + padding: auto; + +} + +.pokemon-item-img { + padding-left: 30%; + padding-top: 8%; + +} + +.pokemon-item-name { + padding-left: 35%; +} \ No newline at end of file