diff --git a/.eslintrc.js b/.eslintrc.js
index 9a15daa..b400cf3 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,9 +4,7 @@ module.exports = {
es6: true,
'jest/globals': true,
},
- extends: [
- 'airbnb-base',
- ],
+
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
@@ -28,4 +26,4 @@ module.exports = {
'jest/prefer-to-have-length': 'warn',
'jest/valid-expect': 'error',
},
-};
\ No newline at end of file
+};
diff --git a/README.md b/README.md
index 41e57dd..97adb5f 100644
--- a/README.md
+++ b/README.md
@@ -1,444 +1,33 @@
# Data Lovers
-## Í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. Avances Esperados](#5-avances-esperados)
-* [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)
-
-***
-
-## 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, procesar y mostrar estos datos. Una manera
-simple de hacerlo es creando _interfaces_ y _visualizaciones_.
-
-En la siguiente imagen, podrás ver cómo con la data que que se ve en la parte
-izquierda se puede construir (a la derecha) una interfaz amigable y comprensible
-para el usuario.
-
-
-
-\* 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).
-
-## 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.
-
-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:
-
-* [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).
-
-* [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).
-
-* [Harry Potter](src/data/potter/potter.json):
- Este set de datos muestra la lista de los personajes del mundo de
- [Harry Potter: Wizards Unite](https://www.wizardingworld.com), junto con sus
- respectivas características mencionadas en la serie de novelas de Harry Potter
- escrita por la autora británica J.K.Rowling.
-
-* [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).
-
-
-## 3. 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.
-
-### 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).
-
-### DOM
-
-- [ ] Entender y reconocer los selectores del DOM (querySelector | querySelectorAll).
-- [ ] Manejar eventos del DOM. (addEventListener)
-- [ ] Manipular dinámicamente el DOM. (createElement, appendchild, template string, innerHTML, value)
-
-### Javascript
-
-- [ ] Manipular arrays (`filter` | `map` | `sort` | `reduce`).
-- [ ] Manipular objects (key | value).
-- [ ] 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`).
-
-### 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).
-
-### Linter y Organización
-- [ ] Organizar y dividir el código en módulos (Modularización).
-- [ ] 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/).
-* Para este proyecto tendremos 2 Sprints.
-
-## 5. Avances Esperados
-
-
-### 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.
-
-
-## 6. Hacker Edition
-
-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
-[_Hacker_Edition_](#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)
-
-***
+DESCRIPCION GENERAL DEL PROYECTO
+Pokemón es una página que contiene los datos de los pokemones filtrados por tipo .Puedes encontrar los personajes mediante 3 filtros Grass, Water, por orden alfabético en los cuales se muestran el nombre , la imagen y las debilidades. Es una web intuitiva y fácil de manejar. Sin necesidad de seguir instrucciones el usuario puede acceder a toda la información que contiene.
+DEFINICION DEL PROYECTO
+El proceso para el diseño de Pokemon comenzó con 3 encuestas a usuarios avanzados de Pokemon Go , las cuales definieron la interfaz . Esta webapp es para jugadores expertos de Pokemon Go que necesitan conocer las debilidades,nombre e imagen de acuerdo al tipo .
+OBJETIVO DE LA PÁGINA
+Permitir al usuario conocer las debilidades, nombre e imagen de los pokemones filtrados por tipo.
+NECESIDAD DEL USUARIO
+Los usuarios desean conocer las debilidades de cada uno de los pokemon
+HISTORIAS DE USUARIO
+Historia Uno
+Usuario Miguel, Jugador de Pokemon Go
+Necesita: Nombre, Imagen, Poder, Nivel de Poder, Ataque diferentes, si evoluciona y a que evoluciona
+Requerimientos
+Filtrar Pokemones
+Mostrar en orden Pokemones
+Mostrar debilidades
+PANTALLA DE INICIO Y BOTONES
+El usuario necesita visualizar en la pantalla de inicio tres botones: Grass, Water, Rock. Al seleccionar el botón Grass muestra los Pokemones de tipo Grass y asi con boton Water y Rock con su respectivo nombre, magen, debilidades.
+DOD
+El usuario visualiza: Encabezado y los tres botones Grass, Water, Rock.
+Al momento de dar click en un botón los otros se encuentran bloqueados
+Se muestran los pokemones para la visualización de los usuarios
+
+DISEÑO INTERFAZ DEL USUARIO
+Prototipo de baja fidelidad Los primeros acercamientos fueron los siguientes (Foto prototipo)
+Prototipo de alta fidelidad El siguiente es el diseño en el programa Figma (foto figma)
+https://github.com/eugynias/GDL004-data-lovers/blob/ramaEugenia/src/images/figmapkm.png
+DIAGRAMA DE FLUJO
+https://github.com/eugynias/GDL004-data-lovers/blob/ramaEugenia/src/images/IMG_20191202_080553878.jpg
+PROPUESTA DE PROYECTO
+https://github.com/eugynias/GDL004-data-lovers/blob/ramaEugenia/src/images/finalpk.jpg
diff --git a/src/data.js b/src/data.js
index ca49434..633363b 100644
--- a/src/data.js
+++ b/src/data.js
@@ -1,7 +1,44 @@
-/* Manejo de data */
-// esta es una función de ejemplo
+export const filterType = (Pokemon) => {
+const type = Pokemon.filter((pkm) => {
+ //console.log(pkm.type)
+ return pkm.type[0] === 'Grass' || pkm.type[1] === 'Grass'
-export const example = () => {
- return 'example';
+});
+console.log(type)
+return type;
+};
+
+export const ordenName = (Pokemon) => {
+ const ordenNam = Pokemon.sort((pk1,pk2) => {
+ if(pk1.name > pk2.name){
+ return 1;
+ }else if(pk1.name < pk2.name){
+ return -1;
+ }
+ return 0
+})
+//console.log(ordenNam, 'order')
+return ordenNam
+ //console.log(ordenNam)
+};
+
+export const filterWater = (Pokemon) => {
+const type = Pokemon.filter((pkm) => {
+ return pkm.type[0] === 'Water' || pkm.type[1] === 'Water'
+
+
+});
+console.log(type)
+return type;
+};
+
+export const filterRock = (Pokemon) => {
+const type = Pokemon.filter((pkm) => {
+ return pkm.type[0] === 'Rock' || pkm.type[1] === 'Rock'
+
+
+});
+console.log(type)
+return type;
};
diff --git a/src/data/pokemon/pokemon.js b/src/data/pokemon/pokemon.js
index d248897..50b2bc6 100644
--- a/src/data/pokemon/pokemon.js
+++ b/src/data/pokemon/pokemon.js
@@ -1,4 +1,6 @@
+
export default [{
+
id: 1,
num: '001',
name: 'Bulbasaur',
@@ -4081,4 +4083,5 @@ export default [{
'Ghost',
'Dark',
],
+
}];
diff --git a/src/images/2363559.png b/src/images/2363559.png
new file mode 100644
index 0000000..ee2eb93
Binary files /dev/null and b/src/images/2363559.png differ
diff --git a/src/images/Capturap.PNG b/src/images/Capturap.PNG
new file mode 100644
index 0000000..b1e8ba4
Binary files /dev/null and b/src/images/Capturap.PNG differ
diff --git a/src/images/IMG_20191202_080553878.jpg b/src/images/IMG_20191202_080553878.jpg
new file mode 100644
index 0000000..821490d
Binary files /dev/null and b/src/images/IMG_20191202_080553878.jpg differ
diff --git "a/src/images/International_Pok\303\251mon_logo.svg.png" "b/src/images/International_Pok\303\251mon_logo.svg.png"
new file mode 100644
index 0000000..9324d55
Binary files /dev/null and "b/src/images/International_Pok\303\251mon_logo.svg.png" differ
diff --git a/src/images/figmapkm.png b/src/images/figmapkm.png
new file mode 100644
index 0000000..a77a233
Binary files /dev/null and b/src/images/figmapkm.png differ
diff --git a/src/images/finalpk.jpg b/src/images/finalpk.jpg
new file mode 100644
index 0000000..8c2e238
Binary files /dev/null and b/src/images/finalpk.jpg differ
diff --git a/src/images/pikagif.gif b/src/images/pikagif.gif
new file mode 100644
index 0000000..07a1514
Binary files /dev/null and b/src/images/pikagif.gif differ
diff --git a/src/images/pkm-uni.jpg b/src/images/pkm-uni.jpg
new file mode 100644
index 0000000..7bedc79
Binary files /dev/null and b/src/images/pkm-uni.jpg differ
diff --git a/src/images/pokebola.png b/src/images/pokebola.png
new file mode 100644
index 0000000..825d7c9
Binary files /dev/null and b/src/images/pokebola.png differ
diff --git a/src/images/pokebola_debilidad.png b/src/images/pokebola_debilidad.png
new file mode 100644
index 0000000..bb20129
Binary files /dev/null and b/src/images/pokebola_debilidad.png differ
diff --git a/src/images/pokebola_poder.jpg b/src/images/pokebola_poder.jpg
new file mode 100644
index 0000000..7961100
Binary files /dev/null and b/src/images/pokebola_poder.jpg differ
diff --git a/src/images/pokebola_poder.png b/src/images/pokebola_poder.png
new file mode 100644
index 0000000..99feb69
Binary files /dev/null and b/src/images/pokebola_poder.png differ
diff --git a/src/images/pokebolagrass.png b/src/images/pokebolagrass.png
new file mode 100644
index 0000000..a67047b
Binary files /dev/null and b/src/images/pokebolagrass.png differ
diff --git a/src/images/pokebolarock.png b/src/images/pokebolarock.png
new file mode 100644
index 0000000..be533d8
Binary files /dev/null and b/src/images/pokebolarock.png differ
diff --git a/src/images/pokebolawater.png b/src/images/pokebolawater.png
new file mode 100644
index 0000000..0c27a2c
Binary files /dev/null and b/src/images/pokebolawater.png differ
diff --git a/src/index.html b/src/index.html
index 7c80004..6028c77 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,9 +6,80 @@
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Presiona aqui y conoce la debilidad de los pokemones tipo Grass
+
+
+
+
+
+
+
+
+
+
+ Presiona aqui y conoce la debilidad de los pokemones tipo Water
+
+
+
+
+
+
+
+
+
+ Presiona aqui y conoce la debilidad de los pokemones tipo Rock
+
+ 
+ 
+ 
+