diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/README.md b/README.md index fbc298c2..8e50142a 100644 --- a/README.md +++ b/README.md @@ -1,607 +1,299 @@ -# Data Lovers +# POKEMON GO ## Índice -* [1. Preámbulo](#1-preámbulo) -* [2. Resumen del proyecto](#2-resumen-del-proyecto) -* [3. Objetivos de aprendizaje](#3-objetivos-de-aprendizaje) -* [4. Consideraciones generales](#4-consideraciones-generales) -* [5. Criterios de aceptación mínimos del proyecto](#5-criterios-de-aceptación-mínimos-del-proyecto) -* [6. Hacker edition](#6-hacker-edition) -* [7. Consideraciones técnicas](#7-consideraciones-técnicas) -* [8. Pistas, tips y lecturas complementarias](#8-pistas-tips-y-lecturas-complementarias) -* [9. Checklist](#9-checklist) +* [1. Pokemon Go](#1-pokemon-go) +* [2. Definición del producto](#2-definición-del-producto) +* [3. Historias de usuario](#3-historias-de-usuario) +* [4. Diseño de la interfaz de usuario](#4-diseño-de-la-interfaz-de-usuario) +* [5. Testeos de usabilidad](#5-testeos-de-usabilidad) +* [6. CheckList](#6-checklist) +* [7. Producto Final](#7-producto-final) +* [8. Fuente](#8-fuente) +* [9. Autores](#9-autores) *** -## 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. +# 1. Pokemon Go ✐ · · · · · · · · · · · · · · · · · · · · :ear_of_rice: -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_. +Pokémon GO es una experiencia de juego internacional que cuenta con más de mil millones de descargas y ha sido nombrada "el mejor juego para móviles" por Game Developers Choice Awards y "la mejor aplicación del año" por TechCrunch (tomado de Google Play). Los usuarios del juego se convierten en "Maestros/ entrenadores de Pokémon" y pueden: -En la siguiente imagen, podrás ver cómo con la data que que se ve en la parte -izquierda se puede construir una interfaz amigable y entendible por el usuario -al lado derecho. + * Descubrir el mundo Pokémon: explorar y descubrir nuevos Pokémon allá donde vayan. + * Atrapar distintos Pokémon para completar su Pokédex. + * Pelear contra Pokémon de otros entrenadores y conquistar un gimnasio. + * Competir en épicos combates contra otros entrenadores. + * Hacer equipo con otros entrenadores para atrapar poderosos Pokémon durante las + incursiones. -![json-interfaz](https://lh4.googleusercontent.com/Tn-RPXS26pVvOTdUzRT1KVaJ-_QbFs9SpcGLxSPE43fgbHaXtFgMUInuDt7kV41DkT1j8Tt29V0LxQW7SMtC6digOIhfTXSBKdwI08wUwhD3RAqlwy0hjfmhZ2BFe91mtmCSEqysfgk) - -## 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. [API Rick and Morty](https://rickandmortyapi.com). - - [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) - -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) -

+## 2. Definición del producto 🤓 -### Web APIs +### 2.1. ¿Quiénes son los principales usuarios del producto? -- [ ] **Uso de selectores del DOM** +El producto está dirigido tanto para nuevos y antiguos jugadores de Pokemon Go. 👫 -
Links

+### 2.2. ¿Cuáles son los objetivos de los usuarios al usar el producto? - * [Manipulación del DOM](https://curriculum.laboratoria.la/es/topics/browser/02-dom/03-1-dom-methods-selection) - * [Introducción al DOM - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) - * [Localizando elementos DOM usando selectores - MDN](https://developer.mozilla.org/es/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) -

+El producto tiene como objetivo ser una web informativa que da a conocer la variedad de pokemones existentes en el mundo de PokemoGo .Los usuarios podrán visualizar la información acerca de los ataques, poderes, línea de evolución , debilidades y fortalezas de los pokemones además de poder tener acceso a enlaces de las películas .Asimismo se tiene una sección de estadísticas donde se visualiza los datos acerca de las regiones, tipos y km por recorrer . -- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)** +*** -
Links

+## 3. Historias de usuario 👫 - * [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) -

+### 3.1. ¿Cuáles son los datos que quisieran ver los usuarios? -- [ ] **Manipulación dinámica del DOM** +Para entender mejor qué necesidades complementarias a la app tienen los usuarios, hicimos una rápida investigación (research) y estos son algunos de los hallazgos. -
Links

+ ❥ Mostrar las imagenes de los pokemons con su información + ❥ Una página dinamica y ambientada de inicio a fin con pokemon + ❥ Estadisticas Pokemon + ❥ Ranking de pokemon por aparición + ❥ Curiosidades sobre cada pokemon + ❥ Información sobre las evoluciones y los caramelos que necesitan + ❥ Sección peliculas - * [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) -

+### 3.2. ¿Qué dicen los usuarios? -### JavaScript +Se ha consultado a 7 personas que usan o se animarian a descargar y usar el aplicativo Pokemon Go y mencionan lo que necesitarian lo siguiente en una página informativa: -- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos** +#### Usuario 1: Alex (jugador activo de Pokemon Go) -- [ ] **Arrays (arreglos)** + >Yo como usuario me gustaría poder visualizar toda la información necesaria de mi pokemon (ataques, fortalezas, debilidades, tipo, cp, hp ) para una batalla pokemon. + >#### Definición de Terminado + >✅ Visualización detallada de cada pokémon en cards + > + >✅ Información clara y ordenada en secciones. + > + >✅ Visualización de ataques y poderes detallados en las cards. + > + >✅ Diseño responsive. -
Links

+#### Usuario 2: Ana (jugadora activo de Pokemon Go) - * [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) -

+ >Yo como usuario quiero realizar una búsqueda específica de algún pokémon y poder ver su información detallada. -- [ ] **Objetos (key, value)** + >#### Definición de Terminado + >✅ Diseño responsive. + > + >✅El usuario puede visualizar la barra de búsqueda. + > + >✅Se van filtrando los pokemones de acuerdo a lo especificado por el usuario en la barra de búsqueda. + > + >✅Se visualiza la información detallada de cada pokémon buscado. -
Links

- * [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/05-objects/01-objects) -

+ #### Usuario 3: Miguel (jugador nuevo) -- [ ] **Variables (declaración, asignación, ámbito)** + >Yo como usuario nuevo quisiera poder ordenar (numéricamente y alfabéticamente) a los pokemones para hacer más óptima mi búsqueda; también poder saber que pokemons podría recibir en caso el aplicativo me regale un huevo pokémon. -
Links

+ >#### Definición de Terminado + >✅ El filtro de “orden” ( numérico y alfabético ) se ubica en cada sección en la parte superior y es de fácil visualización. + > + >✅ El filtro es desplegable y le permite al usuario elegir el orden que desee filtrar los pokemones. + > + >✅ Al cambiar de sección el filtrado de “orden” se resetea. + > + >✅ Se implementó el filtrado por tipos de huevo y la cantidad de kilómetros a caminar. - * [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) -

+ #### Usuario 4: Joel (jugador activo de PokemonGo) -- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)** + >Yo como jugador me sería útil saber cuántos kilómetros debería recorrer para evolucionar un huevo pokémon. -
Links

+ >#### Definición de Terminado + >✅ El filtro de “egg”(“2km”, “5km”, “7km”, “10km”) se ubica en cada sección en la parte superior y es de fácil visualización. + > + >✅ El filtro es desplegable y le permite al usuario poder clasificar a los pokemones por los km que debe de recorrer. + > + >✅ Al cambiar de sección el filtrado de “egg” se resetea. + > + >✅ El diseño es responsive. - * [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) -

+ #### Usuario 5: Max (jugador nuevo de Pokemon Go) -- [ ] **Uso de bucles/ciclos (while, for, for..of)** + >Yo como usuario me resultaría muy útil poder visualizar a los pokemones por secciones (tipo , región , rareza ) para así poder optimizar mi búsqueda. + >#### Definición de Terminado + >✅ Las secciones se encuentran definidas y son de fácil visualización para el usuario. + > + >✅ De acuerdo a la sección seleccionada , se cuenta con filtros gráficos para una mejor experiencia . + > + >✅ Cada sección cuenta a la vez con filtros de ‘orden’ , ‘Cp’ y ‘Egg’ . + > + >✅ El diseño es responsive. -
Links

+ #### Usuario 6: Lucía (jugador activo de Pokemon Go) - * [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) -

+ >Yo como usuario sería útil poder visualizar estadísticas de los pokemones de acuerdo a los tipos , región , rareza y km por recorrer , para así tener una mejor investigación del mundo de PokemonGo. + >#### Definición de Terminado + >✅ Se cuenta con una sección específica de las estadísticas del mundo de PokémonGo. + > + >✅ Las gráficas estadísticas se encuentran diferenciadas y en cada una se señala su significado + > + >✅ El diseño es responsive y se puede visualizar en cualquier dispositivo. -- [ ] **Funciones (params, args, return)** -
Links

+ #### Usuario 7: Roxana (jugadora nueva de Pokemon Go) - * [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) -

+ >Yo como usuario me gustaría saber cuántos caramelos necesito para evolucionar y cuáles son sus pre evoluciones y siguientes evoluciones de cada pokémon para así conocer la línea de evolución de cada uno. -- [ ] **Pruebas unitarias (unit tests)** + >#### Definición de Terminado + >✅ Las cards de cada pokémon contienen los caramelos que necesita para evolucionar. + > + >✅ Las cards contienen información de las pre y siguientes evoluciones de cada pokemon . + > + >✅ El diseño es responsive y se puede visualizar en cualquier dispositivo. -
Links

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

+## 4. Diseño de la Interfaz de Usuario -- [ ] **Módulos de ECMAScript (ES Modules)** +### Prototipo de baja fidelidad 📄 +#### Pagina de inicio +
-
Links

+#### Pagina de pokedex +

- * [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) -

+### Prototipo de alta fidelidad 📱 +
+ +

-- [ ] **Uso de linter (ESLINT)** +

-- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)** +

+ +

-- [ ] **Diferenciar entre expresiones (expressions) y sentencias (statements)** +
-### Control de Versiones (Git y GitHub) +
+ + -- [ ] **Git: Instalación y configuración** + -- [ ] **Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)** + -- [ ] **Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)** +
-- [ ] **GitHub: Creación de cuenta y repos, configuración de llaves SSH** +*** -- [ ] **GitHub: Despliegue con GitHub Pages** +## 5. Testeos de Usabilidad 💻 +### La interfaz pasa el 100% de los test. +![image](https://user-images.githubusercontent.com/87873460/142967623-8963457e-87d3-4f76-8059-aa5e5a1149c1.png) -
Links

+*** - * [Sitio oficial de GitHub Pages](https://pages.github.com/) -

+## 6. Checklist ✔️ -- [ ] **GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)** +* ✅ Usa VanillaJS. +* ✅ Pasa linter (`npm run pretest`) +* ✅ Pasa tests (`npm test`) +* ✅ Pruebas unitarias cubren un mínimo del 70% de statements, functions y + lines y branches. +* ✅ Incluye _Definición del producto_ clara e informativa en `README.md`. +* ✅ Incluye historias de usuario en `README.md`. +* ✅ Incluye _sketch_ de la solución (prototipo de baja fidelidad) en + `README.md`. +* ✅ Incluye _Diseño de la Interfaz de Usuario_ (prototipo de alta fidelidad) + en `README.md`. +* ✅ Incluye link a Zeplin en `README.md`. +* ✅ Incluye el listado de problemas que detectaste a través de tests de + usabilidad en el `README.md`. +* ✅ UI: Muestra lista y/o tabla con datos y/o indicadores. +* ✅ UI: Permite ordenar data por uno o más campos (asc y desc). +* ✅ UI: Permite filtrar data en base a una condición. +* ✅ UI: Es _responsive_. -### UX (User eXperience) +*** -- [ ] **Diseñar la aplicación pensando en y entendiendo al usuario** +## 7. Producto final -- [ ] **Crear prototipos para obtener feedback e iterar** +## PAGINA WEB EN COMPUTADORA -- [ ] **Aplicar los principios de diseño visual (contraste, alineación, jerarquía)** +### PAGINA DE INICIO +
+
-- [ ] **Planear y ejecutar tests de usabilidad** +### VISTA DE FILTRADO Y ORDENAMIENTO +
+
-## 4. Consideraciones generales +### VISTA DE BUSQUEDA POR NOMBRE O NUMERO +
+
-* 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. + +### VISTA DE FILTRADO POR TIPO +
+
-## 5. Criterios de aceptación mínimos del proyecto + + ### VISTA DE FILTRADO POR REGION +
+
-Los criterios para considerar que has completado este proyecto son: -### Definición del producto + ### VISTA DE FILTRADO POR RAREZA +
+
-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 +### VISTA DE RANKING +
+
-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. +### VISTA DE ESTADISTICAS +
+
-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 +## PAGINA WEB RESPONSIVE -#### 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 +## POKEMON CARD INFORMATIVA -Como mínimo, tu implementación debe: +
+ + -1. Mostrar la data en una interfaz: puede ser un card, una tabla, una lista, - etc. -2. Permitir al usuario interactuar para obtener la infomación que necesita. -3. Ser _responsive_, es decir, debe visualizarse sin problemas desde distintos - tamaños de pantallas: móviles, tablets y desktops. -4. Que la interfaz siga los fundamentos de _visual design_. + -### Pruebas unitarias + + + -El _boilerplate_ de este proyecto no incluye Pruebas Unitarias (_tests_), así es -que tendrás que escribirlas tú para las funciones encargadas de _procesar_, -_filtrar_ y _ordenar_ la data, así como _calcular_ estadísticas. +
-Tus _pruebas unitarias_ deben dar una cobertura del 70% de _statements_ -(_sentencias_), _functions_ (_funciones_), _lines_ (_líneas_), y _branches_ -(_ramas_) del archivo `src/data.js` que contenga tus funciones y está detallado -en la sección de [Consideraciones técnicas](#srcdatajs). -## 6. Hacker edition +## 8. Fuente 📄 -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. +Data Lovers del [Repositorio de Laboratoria](https://github.com/Laboratoria/LIM016-data-lovers) -Features/características extra sugeridas: +## 9. Autores -* 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 ` + + -
- - + +
+ + + + + +
+ +
+
+
+
+ + + + +
+
¡Les damos la bienvenida, entrenadores!
+
¡Descubre todos los pokemones que tenemos para ti...!
+
+ +
+
+
+ + + +
Pokemones Destacados
+
+
+
+ +
+
+

Mewtwo

+

#150

+
+
+

CP:4178

+

HP:180

+
+
+
+
+ +
+
+

Ho-Oh

+

#250

+
+
+

CP:3863

+

HP:180

+
+
+
+
+ +
+
+

Tyranitar

+

#248

+
+
+

CP:3863

+

HP:180

+
+
+
+
+ +
+
+

Dragonite

+

#149

+
+
+

CP:3792

+

HP:177

+
+
+
+
+ +
+
+

Lugia

+

#249

+
+
+

CP:3703

+

HP:197

+
+
+
+
+ +
+
+

Zapdos

+

#145

+
+
+

CP:3527

+

HP:175

+
+
+
+
+ +
+
+

Entei

+

#244

+
+
+

CP:3473

+

HP:210

+
+
+
+
+ +
+
+

Moltres

+

#146

+
+
+

CP:3465

+

HP:175

+
+
+
+ +
+
+ + +
+ Peliculas Pokemon +
+ +
+ + +
+
+
+ Pokémon: +

El poder de todos

+
+
+
+ +
+ + +
+
+
+
+ Pokémon:

Los secretos de la selva

+
+
+
+ +
+ + +
+
+
+
+ Pokémon La Película:

¡Te Elijo A Ti!

+
+
+
+ +
+ + + +
+
+
+
+ Pokémon:

Detective Pikachu

+
+
+
+ +
+ + +
+
+
+
+ Pokémon:

Mewtwo contraataca: Evolución

+
+
+
+ +
+ +
+
+
+
+
+ + + + + + + + +
+ + + + + + + + + + + + diff --git a/src/main.js b/src/main.js index 71c59f2d..9d875b5b 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,1006 @@ -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/pokemon/pokemon.js"; -console.log(example, data); +import { + buscarPoke, + huevitoPokemon, + filtarCp, + rarezaPokemon, + ordenAlfaNumerico, + typePokemones, + regionFuncion, + tiposSelect, + regionSelect, + rarezaSelect, +} from "./data.js"; + +import { start } from "./carrusel.js"; + +window.addEventListener("load", () => { + document.getElementById("loader").classList.toggle("loader2"); +}); + +start(); + +const container = document.querySelector(".pokemon-container"); +const orden = document.getElementById("orden"); +const cp = document.getElementById("cp"); +const eggPoke = document.getElementById("egg"); +const search = document.getElementById("search"); +const tipos = document.getElementById("tipos"); +const region = document.getElementById("region"); +const rareza = document.getElementById("rareza"); +const navToggle = document.querySelector("#toggle"); +const navMenu = document.querySelector(".menu"); + +navToggle.addEventListener("click", () => { + navMenu.classList.toggle("nav-menu_visible"); +}); + +// let arrayPokemon; + +let arrayCambiante = ""; + +async function fetchPokemon() { + const jsondata = await fetch("./data/pokemon/pokemon.json"); + const data = await jsondata.json(); + + const arrayPokeP = data.pokemon; + + const totalPokemon = arrayPokeP; + + ordenarTop(totalPokemon, arrayPokeP); + + mostrarPokemon(data.pokemon, arrayPokeP); + handleDivRegion(data, arrayPokeP); + eggPokemon(data, arrayPokeP); + buscarPokemon(data, arrayPokeP); + filtrarTiposPokemon(data, arrayPokeP); + filtrarRarezaPokemon(data, arrayPokeP); + filtroCP(arrayPokeP); + filtroOrdenAlfaNumerico(arrayPokeP); + filtrarTiposSelect(data, arrayPokeP); + filtrarRegionSelect(data, arrayPokeP); + filtrarRarezaSelect(data, arrayPokeP); + + return data.pokemon; +} + +fetchPokemon(); + +// const arrayPokeP = data.pokemon + +export function ordenarTop(totalPokemon, arrayPokeP) { + totalPokemon.sort((a, b) => { + let arrayTop = b["spawn-chance"] - a["spawn-chance"]; + return arrayTop; + }); + +function mostrarTop(totalPokemon) { + let arrayTop10 = []; + for (let i = 0; i < 10; i++) { + arrayTop10.push(totalPokemon[i]); + } + return arrayTop10; +} + +const top10=mostrarTop(totalPokemon) +console.log(top10); +mostrarPokemon(top10,arrayPokeP) +} + + + +function handleDivRegion(data, arrayPokeP) { + document.getElementById("divRegionPokemon").addEventListener("click", (e) => { + e.preventDefault(); + + if (e.target.getAttribute("id")) { + container.innerHTML = ""; + // console.log(e.target.getAttribute('id')) + const regionP = e.target.getAttribute("id"); + const arrayRegionPoke = regionFuncion(regionP, data.pokemon); + mostrarPokemon(arrayRegionPoke, arrayPokeP); + + document.getElementById(`${regionP}Div`).className = "regionDiv activeTipo"; + + document.getElementById("divRegionPokemon").addEventListener("click", (e) => { + const regionP2 = e.target.getAttribute("id"); + if(regionP != regionP2){ + document.getElementById(`${regionP}Div`).className = "regionDiv"; + }}) + document.querySelector('.navegador').addEventListener('click',(e)=>{ + e.preventDefault() + document.getElementById(`${regionP}Div`).classList.remove('activeTipo') + + }) + } + }); +} + +//cp + +function filtroCP(arrayPokeP) { + cp.addEventListener("change", (e) => { + container.innerHTML = ""; + const tipoCp = e.target.value; + const filtroPoke = filtarCp(tipoCp, arrayCambiante); + mostrarPokemon(filtroPoke, arrayPokeP); + }); +} + +// filtrar pokemon por huevito + +function eggPokemon(data, arrayPokeP) { + eggPoke.addEventListener("change", (e) => { + container.innerHTML = ""; + const eggType = e.target.value; + + const arrayEgg = huevitoPokemon(eggType, data.pokemon); + mostrarPokemon(arrayEgg, arrayPokeP); + }); +} + +//orden alfabetico + +function filtroOrdenAlfaNumerico(arrayPokeP) { + orden.addEventListener("change", (e) => { + container.innerHTML = ""; + const typeOrden = e.target.value; + const ordenAlfaNum = ordenAlfaNumerico(typeOrden, arrayCambiante); + mostrarPokemon(ordenAlfaNum, arrayPokeP); + }); +} +//buscar pokemon +function buscarPokemon(data, arrayPokeP) { + search.addEventListener("keyup", () => { + container.innerHTML = ""; + const texto = search.value.toLowerCase(); + const arrayBuscar = buscarPoke(texto, data.pokemon); + mostrarPokemon(arrayBuscar, arrayPokeP); + }); +} + +//tipos de pokemon x botones +function filtrarTiposPokemon(data, arrayPokeP) { + document + .getElementById("divTiposPokemones") + .addEventListener("click", (e) => { + e.preventDefault(); + + if (e.target.getAttribute("name")) { + container.innerHTML = ""; + // console.log(e.target.getAttribute('id')) + const tipoP = e.target.getAttribute("name"); + const arraytipoPoke = typePokemones(tipoP, data.pokemon); + mostrarPokemon(arraytipoPoke, arrayPokeP); + + // document.getElementById(tipoP).addEventListener("click",()=>{ + document.getElementById(`${tipoP}Div`).className = + "tipoPokeInicio activeTipo"; + + document + .getElementById("divTiposPokemones") + .addEventListener("click", (e) => { + const tipoP2 = e.target.getAttribute("id"); + if (tipoP != tipoP2) { + document.getElementById(`${tipoP}Div`).className = + "tipoPokeInicio"; + } + }); + + document.querySelector(".navegador").addEventListener("click", (e) => { + e.preventDefault(); + console.log("hola"); + document.getElementById(`${tipoP}Div`).classList.remove("activeTipo"); + }); + } + }); +} + +//tipos de pokemon x select +function filtrarTiposSelect(data, arrayPokeP) { + tipos.addEventListener("change", (e) => { + container.innerHTML = ""; + const tipoSelect = e.target.value; + const arrayTipoSelect = tiposSelect(tipoSelect, data.pokemon); + mostrarPokemon(arrayTipoSelect, arrayPokeP); + }); +} + +//region de pokemon x select +function filtrarRegionSelect(data, arrayPokeP) { + region.addEventListener("change", (e) => { + e.preventDefault(); + container.innerHTML = ""; + const valorSelect = e.target.value; + const arrayRegionSelect = regionSelect(valorSelect, data.pokemon); + + mostrarPokemon(arrayRegionSelect, arrayPokeP); + }); +} + +//rareza de pokemon x select +function filtrarRarezaSelect(data, arrayPokeP) { + rareza.addEventListener("change", (e) => { + container.innerHTML = ""; + const rarezaPoke = e.target.value; + const arrayRarezaSelect = rarezaSelect(rarezaPoke, data.pokemon); + mostrarPokemon(arrayRarezaSelect, arrayPokeP); + }); +} + +// +function filtrarRarezaPokemon(data, arrayPokeP) { + document.getElementById("divRarezaPokemon").addEventListener("click", (e) => { + e.preventDefault(); + + let pruebaFetch = data.pokemon; + if (e.target.getAttribute("value")) { + container.innerHTML = ""; + const rarezaP = e.target.getAttribute("value"); + const arrayRarezaPoke = rarezaPokemon(rarezaP, pruebaFetch); + mostrarPokemon(arrayRarezaPoke, arrayPokeP); + console.log(rarezaP); + document.getElementById(`${rarezaP}DivP`).className = + "rarezaDiv activeTipo"; + + document + .getElementById("divRarezaPokemon") + .addEventListener("click", (e) => { + const rarezaP2 = e.target.getAttribute("value"); + if (rarezaP != rarezaP2) { + document.getElementById(`${rarezaP}DivP`).className = "rarezaDiv"; + } + }); + + document.querySelector(".navegador").addEventListener("click", (e) => { + e.preventDefault(); + console.log("hola"); + document + .getElementById(`${rarezaP}DivP`) + .classList.remove("activeTipo"); + }); + } + }); +} + +//-------------funcion que muestra los pokemones + +export function mostrarPokemon(array, arrayPokeP) { + arrayCambiante = array; + + const numero = document.getElementById("parrafo"); + numero.classList.add("totalPokemons"); + numero.innerHTML = `

Total :${array.length}

`; + + for (let i = 0; i < array.length; i++) { + //div que contendrá todas las caracteristicas de cada pokemon + const card = document.createElement("div"); + card.classList.add("pokemon-block"); + + //cp del pokemon + const cpPokemon = document.createElement("p"); + cpPokemon.classList.add("cp"); + cpPokemon.innerHTML = `

CP: ${array[i].stats["max-cp"]}

`; + + //div que contiene las evoluciones + const evolucion = document.createElement("div"); + evolucion.classList.add("evolucion"); + + //div que contiene la imagen + const spriteContainer = document.createElement("div"); + spriteContainer.classList.add("img-container"); + + const sprite = document.createElement("img"); + sprite.src = `${array[i].img}`; + spriteContainer.appendChild(sprite); + + //numero de pokemon + const numero = document.createElement("div"); + numero.classList.add("numero"); + numero.innerHTML = `

#${array[i].num}

`; + + //nombre del pokemon + const nombre = document.createElement("div"); + nombre.classList.add("name"); + nombre.innerHTML = `

${array[i].name}

`; + + //div que contiene el nombre y numero de pokemon + const nombreNumero = document.createElement("div"); + nombreNumero.classList.add("nombreNumero"); + + nombreNumero.append(nombre, numero); + + //evoluciones + let obj = array[i].evolution; + + const nombrePrev = "Pre Evolutions"; + const nombreNext = "Next Evolutions"; + + let nextEvolciones = []; + let prevEvoluciones = []; + if (obj["next-evolution"]) { + if (obj["next-evolution"][0].name) { + for (let a = 0; a < obj["next-evolution"].length; a++) { + let next1 = document.createElement("p"); + next1.innerHTML = `Next-evolution ${obj["next-evolution"][a].name}`; + let nombrePoke = obj["next-evolution"][a].name; + nextEvolciones.push(nombrePoke); + } + } + if (obj["next-evolution"][0]["next-evolution"]) { + let next2 = document.createElement("p"); + next2.innerHTML = `Next-evolution ${obj["next-evolution"][0]["next-evolution"][0].name}`; + nextEvolciones.push(obj["next-evolution"][0]["next-evolution"][0].name); + } + } + + if (obj["prev-evolution"]) { + let prev1 = document.createElement("p"); + prev1.innerHTML = `Pre-evolution ${obj["prev-evolution"][0].name}`; + prevEvoluciones.push(obj["prev-evolution"][0].name); + + if (obj["prev-evolution"][0]["prev-evolution"]) { + let prev2 = document.createElement("p"); + prev2.innerHTML = `Pre-evolution ${obj["prev-evolution"][0]["prev-evolution"][0].name}`; + prevEvoluciones.push( + obj["prev-evolution"][0]["prev-evolution"][0].name + ); + } + } + + //boton para mostrar pokemon + + const tarjetaPokemon = document.createElement("button"); + tarjetaPokemon.classList.add("mostrarTarjeta"); + tarjetaPokemon.type = "button"; + tarjetaPokemon.innerText = "Saber más"; + + tarjetaPokemon.addEventListener("click", () => { + //contenedor de la tarjeta pokemon + const modalContainer = document.createElement("div"); + modalContainer.classList.add("modal-container"); + //modalContainer.style.display="block"; + const cardInfo = document.createElement("div"); + cardInfo.classList.add("cardInfo"); + cardInfo.setAttribute(`id`, `${array[i].num}`); + + //boton de cerrar tarjeta de informacion + const btnCerrar = document.createElement("button"); + btnCerrar.classList.add("btnCerrar"); + + btnCerrar.type = "button"; + btnCerrar.innerHTML = ``; + + btnCerrar.addEventListener("click", () => { + cardInfo.remove(); + modalContainer.remove(); + }); + + //Crear imagen del pokemon + const containerImg = document.createElement("div"); + containerImg.classList.add("containerImg"); + const infoPokemon = document.createElement("img"); + infoPokemon.src = array[i].img; + + //crear contenedor de informacion pokemon + const containerVista = document.createElement("div"); + containerVista.classList.add("containerVista"); + const nameCardPokemon = document.createElement("h"); + nameCardPokemon.innerHTML = array[i].name; + + //crear div que contiene nombre y número + + //Crear botones de vista de la tarjeta + //---------------btn1-------------------------- + const navTarjeta = document.createElement("div"); + navTarjeta.classList.add("botones-tarjetas"); + const button1 = document.createElement("button"); + button1.type = "button"; + button1.classList.add("active"); + button1.textContent = "About"; + + button1.addEventListener("click", () => { + vista2.style.display = "none"; + vista1.style.display = "block"; + vista3.style.display = "none"; + vista4.style.display = "none"; + button1.className = "active"; + button2.className = ""; + button3.className = ""; + button4.className = ""; + }); + + //-------------btn2------------------------------ + const button2 = document.createElement("button"); + button2.type = "button"; + button2.classList.add("btn"); + button2.textContent = "Power"; + + button2.addEventListener("click", () => { + vista2.style.display = "block"; + vista1.style.display = "none"; + vista3.style.display = "none"; + vista4.style.display = "none"; + button1.className = ""; + button3.className = ""; + button2.className = "active"; + button4.className = ""; + }); + + //------------btn3------------------------------- + const button3 = document.createElement("button"); + button3.type = "button"; + button3.classList.add("btn"); + button3.textContent = "Moves"; + + //------------btn4------------------------------- + const button4 = document.createElement("button"); + button4.type = "button"; + button4.classList.add("btn"); + button4.textContent = "Fortalezas"; + + button4.addEventListener("click", () => { + vista4.style.display = "block"; + vista1.style.display = "none"; + vista3.style.display = "none"; + vista2.style.display = "none"; + button1.className = ""; + button3.className = ""; + button2.className = ""; + button4.className = "active"; + }); + + //crear Vista 1 + const vista1 = document.createElement("div"); + vista1.classList.add("vista1"); + + //crear DIV de descripción + const description_box = document.createElement("div"); + description_box.classList.add("description"); + const titulo = document.createElement("h"); + titulo.innerHTML = "Description"; + const about = document.createElement("p"); + about.innerHTML = array[i].about; + + //crear DIV con info del pokemon eso, etc... + const features = document.createElement("div"); + features.classList.add("features"); + + //-------------agregar peso--------------- + const weight = document.createElement("div"); + weight.innerHTML = `Weight:
${array[i].size.weight}`; + + //-------------agregar tipo--------------- + const typePokemon = document.createElement("div"); + typePokemon.classList.add("divTipo"); + array[i].type.forEach((element) => { + const tipoLog = document.createElement("p"); + tipoLog.innerHTML = `${element}`; + typePokemon.appendChild(tipoLog); + }); + + //............agregar tamaño-------------- + const height = document.createElement("div"); + height.innerHTML = `Height:
${array[i].size.height}`; + + //CREANDO DIV DE CARAMELOS POKEMON + const candyContainerPadre = document.createElement("div"); + candyContainerPadre.classList.add("candyContainerPadre"); + + const palabraEvolucion = document.createElement("div"); + palabraEvolucion.classList.add("palabraEvolucion"); + palabraEvolucion.innerHTML = "Next evolution"; + + const candyContainer = document.createElement("div"); + candyContainer.classList.add("candyContainer"); + + const imgCandy = document.createElement("img"); + imgCandy.src = "img/caramelos.png"; + + let caramelos = ""; + + let evolutionProperty = Object.keys(obj); + + if (evolutionProperty[1] == "next-evolution") { + caramelos = obj["next-evolution"][0]["candy-cost"]; + } else { + candyContainerPadre.style.display = "none"; + } + + const candy = document.createElement("p"); + candy.innerHTML = caramelos; + + candyContainer.append(imgCandy, candy); + candyContainerPadre.append(palabraEvolucion, candyContainer); + + //................div de las evoluciones..... + const divTotalEvoluciones = document.createElement("div"); + divTotalEvoluciones.classList.add("divTotal"); + + //-----------------VISTA 2 + const vista2 = document.createElement("div"); + vista2.classList.add("vista2"); + + vista2.style.display = "none"; + + //-----------contenedor de cada habilidad---------- + + const arrayStats = array[i].stats; + // console.log(arrayStats); + + for (const property in arrayStats) { + const prueba = document.createElement("div"); + prueba.classList.add("prueba"); + + const nameStats = document.createElement("h"); + nameStats.innerHTML = `${property}`; + const barra = document.createElement("div"); + barra.classList.add("barra"); + const progreso = document.createElement("div"); + progreso.classList.add("progreso"); + const nombreStats = property; + //progreso.style("--w:") + const stringStats = parseInt(arrayStats[property]); + const numStats = stringStats; + let valorAlto = ""; + + if (nombreStats == "max-hp") { + let dataArray = new Array(); + for (const i in arrayPokeP) { + dataArray.push(arrayPokeP[i].stats["max-hp"]); + } + //console.log(dataArray) + valorAlto = Math.max(...dataArray); + // console.log(valorAlto); + } + if (nombreStats == "base-attack") { + let dataArray = new Array(); + for (const i in arrayPokeP) { + dataArray.push(arrayPokeP[i].stats["base-attack"]); + } + // console.log(dataArray) + valorAlto = Math.max(...dataArray); + // console.log(valorAlto); + } + if (nombreStats == "max-cp") { + let dataArray = new Array(); + for (const i in arrayPokeP) { + dataArray.push(arrayPokeP[i].stats["max-cp"]); + } + // console.log(dataArray) + valorAlto = Math.max(...dataArray); + // console.log(valorAlto); + } + if (nombreStats == "base-defense") { + let dataArray = new Array(); + for (const i in arrayPokeP) { + dataArray.push(arrayPokeP[i].stats["base-defense"]); + } + // console.log(dataArray) + valorAlto = Math.max(...dataArray); + // console.log(valorAlto); + } + if (nombreStats == "base-stamina") { + let dataArray = new Array(); + for (const i in arrayPokeP) { + dataArray.push(arrayPokeP[i].stats["base-stamina"]); + } + // console.log(dataArray) + valorAlto = Math.max(...dataArray); + // console.log(valorAlto); + } + + let porcentaje = ((numStats / valorAlto) * 100).toFixed(2); + + progreso.style.setProperty(`--w`, `${porcentaje}%`); + progreso.setAttribute(`id`, `${property}`); + + const valorStat = document.createElement("p"); + valorStat.innerHTML = stringStats; + + barra.appendChild(progreso); + prueba.append(nameStats, barra, valorStat); + vista2.appendChild(prueba); + } + + //VISTA 3 + const vista3 = document.createElement("div"); + const tabla1 = document.createElement("div"); + const tabla2 = document.createElement("div"); + vista3.style.display = "none"; + vista3.classList.add("vista3"); + //vista1.classList.add("vista3"); + + button3.addEventListener("click", () => { + vista3.style.display = "block"; + vista2.style.display = "none"; + vista1.style.display = "none"; + vista4.style.display = "none"; + button1.className = ""; + button2.className = ""; + button3.className = "active"; + button4.className = ""; + }); + + let quickName = array[i]["quick-move"]; + let specialName = array[i]["special-attack"]; + + const description = document.createElement("p"); + description.innerHTML = `BD:Base Damage
+ MD:Moves Duration(seg)`; + + //quick-moves + let tituloTabla1 = document.createElement("h3"); + tituloTabla1.innerHTML = `Quick Move`; + + let table = document.createElement("table"); + let thead = document.createElement("thead"); + let tbody = document.createElement("tbody"); + + table.append(thead, tbody); + vista3.appendChild(tituloTabla1); + tabla1.appendChild(table), vista3.appendChild(tabla1); + + let titulo1 = document.createElement("tr"); + let heading_1 = document.createElement("th"); + heading_1.classList.add("nameTable"); + heading_1.innerHTML = "Name"; + + let heading_2 = document.createElement("th"); + heading_2.innerHTML = "Move"; + heading_2.classList.add("moveTable"); + + let heading_3 = document.createElement("th"); + heading_3.innerHTML = "BD"; + heading_3.classList.add("bdTable"); + + let heading_4 = document.createElement("th"); + heading_4.innerHTML = "Energy"; + heading_4.classList.add("energyTable"); + + let heading_5 = document.createElement("th"); + heading_5.innerHTML = "MD"; + heading_5.classList.add("mdTable"); + + titulo1.append(heading_1, heading_2, heading_3, heading_4, heading_5), + thead.appendChild(titulo1); + + for (let a = 0; a < quickName.length; a++) { + // Creating and adding data to second row of the table + let row_2 = document.createElement("tr"); + + let row_2_data_1 = document.createElement("td"); + row_2_data_1.innerHTML = `${quickName[a].name}`; + + let row_2_data_2 = document.createElement("td"); + row_2_data_2.innerHTML = `${quickName[a].type}`; + row_2_data_2.classList.add(`tabla-${quickName[a].type}`); + + let row_2_data_3 = document.createElement("td"); + row_2_data_3.innerHTML = `${quickName[a]["base-damage"]}`; + + let row_2_data_4 = document.createElement("td"); + row_2_data_4.innerHTML = `${quickName[a].energy}`; + + let row_2_data_5 = document.createElement("td"); + row_2_data_5.innerHTML = `${quickName[a]["move-duration-seg"]}`; + + row_2.appendChild(row_2_data_1); + row_2.appendChild(row_2_data_2); + row_2.appendChild(row_2_data_3); + row_2.appendChild(row_2_data_4); + row_2.appendChild(row_2_data_5); + tbody.appendChild(row_2); + } + + //special-attack + let tituloTabla2 = document.createElement("h3"); + tituloTabla2.innerHTML = `Special Attack`; + + let table2 = document.createElement("table"); + let thead2 = document.createElement("thead"); + let tbody2 = document.createElement("tbody"); + + table2.appendChild(thead2); + table2.appendChild(tbody2); + vista3.appendChild(tituloTabla2); + tabla2.appendChild(table2); + vista3.appendChild(tabla2); + vista3.appendChild(description); + + let row_3 = document.createElement("tr"); + let heading1 = document.createElement("th"); + heading1.classList.add("nameTable"); + heading1.innerHTML = "Name"; + + let heading2 = document.createElement("th"); + heading2.innerHTML = "Move"; + heading2.classList.add("moveTable"); + + let heading3 = document.createElement("th"); + heading3.innerHTML = "BD"; + heading3.classList.add("bdTable"); + + let heading4 = document.createElement("th"); + heading4.innerHTML = "Energy"; + heading4.classList.add("energyTable"); + + let heading5 = document.createElement("th"); + heading5.innerHTML = "MD"; + heading5.classList.add("mdTable"); + + row_3.appendChild(heading1); + row_3.appendChild(heading2); + row_3.appendChild(heading3); + row_3.appendChild(heading4); + row_3.appendChild(heading5); + thead2.appendChild(row_3); + + for (let a = 0; a < specialName.length; a++) { + // Creating and adding data to second row of the table + let row2 = document.createElement("tr"); + + let row2_data_1 = document.createElement("td"); + row2_data_1.innerHTML = `${specialName[a].name}`; + + let row2_data_2 = document.createElement("td"); + row2_data_2.innerHTML = `${specialName[a].type}`; + row2_data_2.classList.add(`tabla-${specialName[a].type}`); + + let row2_data_3 = document.createElement("td"); + row2_data_3.innerHTML = `${specialName[a]["base-damage"]}`; + + let row2_data_4 = document.createElement("td"); + row2_data_4.innerHTML = `${specialName[a].energy}`; + + let row2_data_5 = document.createElement("td"); + row2_data_5.innerHTML = `${specialName[a]["move-duration-seg"]}`; + + row2.appendChild(row2_data_1); + row2.appendChild(row2_data_2); + row2.appendChild(row2_data_3); + row2.appendChild(row2_data_4); + row2.appendChild(row2_data_5); + tbody2.appendChild(row2); + } + //-----------------VISTA 4---------------------- + const vista4 = document.createElement("div"); + vista4.classList.add("vista2"); + vista4.style.display = "none"; + + //--------------contenedor de resistencias---------------- + const containerResistant = document.createElement("div"); + containerResistant.classList.add("containerResistant"); + + const tituloUno = document.createElement("h"); + tituloUno.innerHTML = `Is resistant to:`; + + const resistant = document.createElement("div"); + resistant.classList.add("resistant"); + + let arrayResistant = array[i].resistant; + + for (let i = 0; i < arrayResistant.length; i++) { + const imgResistant = document.createElement("div"); + imgResistant.classList.add("imgResistant"); + imgResistant.innerHTML = ``; + + const typeResistant = document.createElement("p"); + typeResistant.classList.add("typeResistant"); + typeResistant.innerHTML = `${arrayResistant[i]}`; + + imgResistant.appendChild(typeResistant); + resistant.appendChild(imgResistant); + } + + //--------------contenedor de debilidades---------------- + const containerWeaknesses = document.createElement("div"); + containerWeaknesses.classList.add("containerWeaknesses"); + + const tituloDos = document.createElement("h"); + tituloDos.innerHTML = `Is weaknesses to:`; + + const weaknesses = document.createElement("div"); + weaknesses.classList.add("weaknesses"); + + let arrayWeaknesses = array[i].weaknesses; + + for (let i = 0; i < arrayWeaknesses.length; i++) { + const imgWeaknesses = document.createElement("div"); + imgWeaknesses.classList.add("imgWeaknesses"); + imgWeaknesses.innerHTML = ``; + + const typeWeaknesses = document.createElement("p"); + typeWeaknesses.classList.add("typeWeaknesses"); + typeWeaknesses.innerHTML = `${arrayWeaknesses[i]}`; + + imgWeaknesses.appendChild(typeWeaknesses); + weaknesses.appendChild(imgWeaknesses); + } + + containerResistant.append(tituloUno, resistant, tituloDos, weaknesses); + vista4.append(containerResistant, containerWeaknesses); + features.append(weight, typePokemon, height); + description_box.append(titulo, about); + navTarjeta.append(button1, button2, button3, button4); + containerImg.append(infoPokemon); + + containerVista.append( + nameCardPokemon, + navTarjeta, + vista1, + vista2, + vista3, + vista4 + ); + + vista1.append( + description_box, + features, + candyContainerPadre, + divTotalEvoluciones + ); + + cardInfo.appendChild(btnCerrar); + cardInfo.appendChild(containerImg); + cardInfo.appendChild(containerVista); + container.appendChild(modalContainer); + container.appendChild(cardInfo); + + evoluciones( + arrayPokeP, + prevEvoluciones, + divTotalEvoluciones, + nombrePrev, + array[i]["pokemon-rarity"] + ); + evoluciones( + arrayPokeP, + nextEvolciones, + divTotalEvoluciones, + nombreNext, + array[i]["pokemon-rarity"] + ); + }); + + card.appendChild(spriteContainer); + card.appendChild(nombreNumero); + card.appendChild(tarjetaPokemon); + container.appendChild(card); + } +} + +function evoluciones(arrayPokeP, arrayP, divTotalEvoluciones, nombre, tipo) { + // console.log("hola" + arrayP); + if (arrayP.length > 0) { + const divGrupoEvol = document.createElement("div"); + divGrupoEvol.classList.add("grupo"); + const nombreEvol = document.createElement("p"); + nombreEvol.innerHTML = `${nombre}`; + const divGrupoPok = document.createElement("div"); + divGrupoPok.classList.add("solo"); + divGrupoEvol.appendChild(nombreEvol); + divGrupoEvol.appendChild(divGrupoPok); + arrayP.forEach((element) => { + for (let i = 0; i < arrayPokeP.length; i++) { + if (arrayPokeP[i].name === element) { + const divEvol = document.createElement("div"); + divEvol.classList.add("evol"); + const imgEvol = document.createElement("img"); + imgEvol.classList.add("imgEvol"); + imgEvol.src = arrayPokeP[i].img; + const nombreEvol = document.createElement("p"); + nombreEvol.classList.add("nombreEvol"); + nombreEvol.innerHTML = arrayPokeP[i].name; + divEvol.appendChild(imgEvol); + divEvol.appendChild(nombreEvol); + divGrupoPok.appendChild(divEvol); + } + } + }); + divTotalEvoluciones.appendChild(divGrupoEvol); + } else { + if (tipo == "legendary") { + divTotalEvoluciones.innerHTML = ``; + } else if (tipo == "mythic") { + divTotalEvoluciones.innerHTML = ``; + } + } +} + +const buttonUp = document.getElementById("button-up"); + +buttonUp.addEventListener("click", scrollUp); +function scrollUp() { + let currentScroll = document.documentElement.scrollTop; + if (currentScroll > 0) { + window.requestAnimationFrame(scrollUp); + window.scrollTo(0, currentScroll - currentScroll / 15); + } +} + +window.onscroll = () => { + let scroll = document.documentElement.scrollTop; + + if (scroll > 600) { + buttonUp.style.transform = "scale(1)"; + } else if (scroll < 500) { + buttonUp.style.transform = "scale(0)"; + } +}; + +// //cp +// cp.addEventListener("change", (e) => { +// container.innerHTML = ""; +// const tipoCp = e.target.value; +// const filtroPoke = filtarCp(tipoCp, arrayCambiante); +// mostrarPokemon(filtroPoke); +// }); + +// // filtrar pokemon por huevito +// eggPoke.addEventListener("change", (e) => { +// fetch("./data/pokemon/pokemon.json") +// .then((resp) => resp.json()) +// .then((data) => { +// container.innerHTML = ""; +// const eggType = e.target.value; + +// const arrayEgg = huevitoPokemon(eggType, data.pokemon); +// mostrarPokemon(arrayEgg); +// }); +// }); + +// //orden alfabetico +// orden.addEventListener("change", (e) => { +// container.innerHTML = ""; +// const typeOrden = e.target.value; +// const ordenAlfaNum = ordenAlfaNumerico(typeOrden, arrayCambiante); +// mostrarPokemon(ordenAlfaNum); +// }); + +// // botonBuscar.addEventListener("click", filtrar); +// search.addEventListener("keyup", () => { +// fetch("./data/pokemon/pokemon.json") +// .then((resp) => resp.json()) +// .then((data) => { +// container.innerHTML = ""; +// const texto = search.value.toLowerCase(); +// const arrayBuscar = buscarPoke(texto, data.pokemon); +// mostrarPokemon(arrayBuscar); +// }); +// }); + +// document.getElementById("divTiposPokemones").addEventListener("click", (e) => { +// e.preventDefault(); +// fetch("./data/pokemon/pokemon.json") +// .then((resp) => resp.json()) +// .then((data) => { +// if (e.target.getAttribute("id")) { +// container.innerHTML = ""; +// // console.log(e.target.getAttribute('id')) +// const tipoP = e.target.getAttribute("id"); +// const arraytipoPoke = typePokemones(tipoP, data.pokemon); +// mostrarPokemon(arraytipoPoke); +// } +// }); +// }); + +// document.getElementById("divRarezaPokemon").addEventListener("click", (e) => { +// e.preventDefault(); +// fetch("./data/pokemon/pokemon.json") +// .then((resp) => resp.json()) +// .then((data) => { +// let pruebaFetch = data.pokemon; +// if (e.target.getAttribute("value")) { +// container.innerHTML = ""; +// const rarezaP = e.target.getAttribute("value"); +// const arrayRarezaPoke = rarezaPokemon(rarezaP, pruebaFetch); +// mostrarPokemon(arrayRarezaPoke); +// } +// }); +// }); + +// let arrayPokemon=data.pokemon +// mostrarPokemon(arrayPokemon); +// fetchPokemon(); diff --git a/src/style.css b/src/style.css index e69de29b..4f7f4c3a 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,2102 @@ +* { + margin: 0; + border: 0; + padding: 0; + box-sizing: border-box; +} + +body { + /* background-image: url(./fondo.jpg); */ + /* background-repeat: repeat; + background-attachment: fixed; */ + font-family: "Spartan", sans-serif; + font-size: 16px; + cursor: url("//rw-designer.com/cursor-view/45695.gif") 10 10, pointer; +} + +::-webkit-scrollbar{ + padding-top: 10px; + width: 12px; + background: rgba(235, 235, 235, 0.919); +} + +::-webkit-scrollbar-thumb{ + background: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%); + border-radius:6px; + height:100px; +} + +/* .activeButton:hover{ +background: none; +} */ + +#pokedex { + background-image: url(./fondo.jpg); + background-repeat: repeat; + background-attachment: fixed; + min-height: 100vh; + padding-top: 5em; +} + +.picture { + width: 100vw; +} +/*DANDO ESTILO AL NAVEGADOR*/ + +.navegador { + display: flex; + position: fixed; + justify-content: space-between; + background: linear-gradient( + 90deg, + rgba(4, 0, 61, 1) 0%, + rgba(1, 1, 71, 1) 56%, + rgba(5, 106, 152, 1) 100% + ); + width: 100%; + height: 4em; + z-index: 1; +} +.navegador .logo { + width: 7.5em; + padding-left: 1em; +} +.menu { + display: flex; + justify-content: space-between; + list-style: none; + padding-right: 30px; + width: 80%; +} +.navegador li button { + margin: 0.9em 0.4em; + height: 60%; + width: 100%; + background: rgba(19, 7, 97, 0.3); + color: white; + font-weight: bold; + font-family: "Montserrat", sans-serif; + font-size: 0.9em; + border-radius: 10px; +} + +.navegador li button:hover { + text-decoration: underline; + font-size: 1em; + background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); + color: black; + box-shadow: 0 2px 4px black; + transition: 0.5s; +} + +#toggle { + color: white; + background: none; + border: none; + font-size: 20px; + padding: 12px 0px; + display: none; +} +.navegador .pokebola { + margin-right: 2%; + margin-top: -0.6em; + height: 4.5em; +} + +.navegador .activeButton { + text-decoration: underline; + background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); + color: black; + box-shadow: 0 2px 4px black; +} + +@media (max-width: 768px) { + .navegador { + height: 3em; + } + .navegador .logo { + width: 4.5em; + padding: 10px 10px; + } + .menu { + flex-direction: column; + justify-content: flex-start; + align-items: center; + margin: 0px; + background: linear-gradient( + 90deg, + rgba(4, 0, 61, 1) 0%, + rgba(1, 1, 71, 1) 70%, + rgb(6, 33, 123) 100% + ); + position: fixed; + left: 0; + top: 3em; + width: 100%; + padding: 5px 0px; + height: calc(100% - 3em); + overflow-y: auto; + left: 100%; + transition: left 2s ease; + } + .menu li { + line-height: 15px; + } + + .navegador li button { + margin: 2em 0em; + height: content; + width: 10em; + background: none; + color: white; + font-weight: bold; + font-family: "Montserrat", sans-serif; + font-size: 1em; + border-radius: 10px; + } + /* + .navegador button:hover { + text-decoration: underline; + font-size: 0.9em; + background-image:none; + color: rgb(f51, 51, 51); + box-shadow: 0 2px 4px black; + transition: 0.5s; + } + */ + + .navegador .pokebola { + margin-right: 4%; + height: 4em; + } + .navegador li button { + background: none; + } + .navegador .activeButton, + .navegador li button:hover { + background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); + color: rgb(3, 21, 68); + font-weight: bold; + box-shadow: none; + } + .show{ + display: block !important; + } + .nav-menu_visible { + left: 0%; + transition: all 1s ease-in-out; + } +} +/* VISTA DE LA PAGINA DE INICIO */ +.intro_background { + position: relative; + padding-top: 4em; + width: 100%; + height: 100%; +} + +.intro_background_image img { + position: relative; + filter: brightness(60%); + width: 100%; + min-height: 100%; +} + +.intro_content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; +} + +.intro_content { + color: #fff; + text-align: center; + text-shadow: 1px 1px 2px rgb(0 0 0 / 40%); + line-height: 3em; +} + +.intro_content_title { + margin-top: 270px; + font-weight: bold; + font-size: 2em; +} + +.intro_button { + margin: auto; +} + +.intro_button button { + width: 8em; + height: 2em; + border-radius: 1.6em; + background: linear-gradient( + 90deg, + rgba(4, 0, 61, 1) 0%, + rgba(1, 1, 71, 1) 56%, + rgba(5, 106, 152, 1) 100% + ); + box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.535); + font-weight: bold; + font-size: 1.7em; + letter-spacing: 2px; + color: white; +} + +/* CARRUSEL */ + +.estrella { + width: 20%; +} + +.parrafoCarrusel { + display: flex; + flex-direction: row; + align-items: center; + background: linear-gradient( + 90deg, + rgba(4, 0, 61, 1) 0%, + rgba(1, 1, 71, 1) 56%, + rgba(5, 106, 152, 1) 100% +); + color: white; + font-weight: 500; + padding: 0px 1em; + margin-left: 10px; + margin-top: 10px; + border-radius: 5px; + font-size: 1.2em; + width: 35%; +} + +.parrafoCarrusel img { + width: 15%; +} + +.carrusel { + color: white; + display: flex; + flex-direction: row; + align-items: center; + position: relative; + margin: auto; + background-image: url(img/fondo-peliculas.jpg); +} + +.carrusel-items { + width: 100%; + display: flex; + overflow-x: hidden; + overflow-y: hidden; + padding-bottom: 20px; + justify-content: center; + height: 50%; +} + +.carrusel-item { + min-width: 20%; + max-width: 20%; + height: 350px; + outline: 0px solid black; + background-image: linear-gradient( to right, rgba(4, 0, 61, 1) 0%, rgba(1, 3, 71, 1) 56%, rgba(5, 106, 152, 1) 100% ); +} +.carrusel-item img { + width: 100%; + height: 70%; + object-fit: cover; +} +.contenido { + display: grid; + grid-template-columns: repeat(1, 1fr); + height: 20%; + font-size: 1em; + padding: 1em; +} + +.contenido1 { + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; +} +.contenido2 { + display: flex; + justify-content: center; + flex-direction: column; + margin: auto; +} + +.carrusel-item:hover { + transform: scale(1.2); +} + +/*CONTENEDOR DE NOTICIAS POKEMON*/ +.intro-peliculas { + background-image: url(img/fondo-peliculas.jpg); + background-repeat: repeat; + background-attachment: fixed; + width: 100%; + height: 100%; + padding-bottom: 20px; +} + +.tittle { + padding: 0.5em 0; + font-size: 40px; + display: flex; + justify-content: center; + align-items: center; + font-weight: bold; +} + +.tittle img { + max-width: 400px; + max-height: 100%; +} +.contenedor-peliculas { + display: grid; + grid-template-columns: repeat(6, 1fr); + row-gap: 20px; + column-gap: 20px; + width: 80%; + height: 100%; + margin: auto; + position: relative; +} + +#pelicula1 { + grid-column: 1/4; +} + +#pelicula2 { + grid-column: 4/7; +} + +#pelicula3 { + grid-column: 1/3; +} +#pelicula4 { + grid-column: 3/5; +} +#pelicula5 { + grid-column: 5/7; +} + +.pelicula { + background: #333; + padding-top: 56.25%; + position: relative; + overflow: hidden; + border-radius: 25px; +} + +.imagen-pelicula { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; +} +.imagen-pelicula img { + width: 100%; + height: 100%; +} + +.contenido-pelicula { + background: linear-gradient( + to bottom, + rgba(0, 0, 0, 0) 0%, + rgba(8, 34, 78, 0.8) 100% + ); + color: #fff; + position: absolute; + bottom: 0; + left: 0; + width: 100%; +} + +.titulo-pelicula { + max-height: 54px; + padding-left: 15px; + padding-bottom: 80px; + box-sizing: inherit; +} + +.titulo-pelicula h { + font-weight: bold; + line-height: 1.2cm; + font-size: 22px; +} + +.titulo-pelicula p { + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 19px; + padding-left: 30px; +} + +.contenedor-play { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.604); + display: flex; + justify-content: center; + align-items: center; + visibility: hidden; +} + +.far { + font-size: 60px; + background: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%); + -webkit-background-clip: text; + color: transparent; +} +.far:hover { + font-size: 65px; +} +.pelicula:hover .contenedor-play { + visibility: visible; +} +/*CONTENEDOR DE POKEMON*/ +.pokemon-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + column-gap: 1em; + row-gap: 4em; + text-align: center; + margin: auto; +} + +.totalPokemons { + text-align: center; + font-weight: bold; + font-size: 1.6em; + line-height: 2.5em; +} + +.pokemon-block { + width: 80%; + margin: auto; + background: linear-gradient( + 55.56deg, + #ffffff 0%, + rgba(255, 255, 255, 0.42) 100% + ); + border-radius: 20px; + display: grid; + justify-content: center; + height: 100%; + padding-bottom: 2em; + padding-top: 0; +} + +.pokemon-block:hover { + box-shadow: 0px 0px 17px 2px rgba(0, 0, 0, 0.67); + -webkit-box-shadow: 0px 0px 17px 2px rgba(0, 0, 0, 0.67); + -moz-box-shadow: 0px 0px 17px 2px rgba(0, 0, 0, 0.67); +} + +.divTotal { + display: flex; + flex-direction: row; + justify-content:space-around; + margin-top: 1em; + text-transform: capitalize; +} + + + +/*DISEÑANDO LOS SELECT*/ +#region, +#tipos, +#cp, +#orden, +#rareza, +#egg { + width: 25%; + height: 35px; + background-image: linear-gradient(to top, #dfe9f3 0%, white 100%); + border-radius: 10px; + text-align: center; + font-weight: bold; + text-transform: capitalize; + border: 1px solid gray; +} + +#region:hover, +#tipos:hover, +#cp:hover, +#orden:hover, +#rareza:hover, +#egg:hover { + box-shadow: 0 2px 4px black; + background-image: linear-gradient( + to top, + #bdc2e8 0%, + #bdc2e8 1%, + #e6dee9 100% + ); +} + +#tipos, +#region, +#rareza { + display: none; +} + +/* evoluciones */ + +.grupo p{ + font-size: 0.9em; +} + + +.solo { + display: flex; + flex-direction: row; + justify-content: center; + font-size: 0.9em; +} + +/* .evol { + width: 50%; + height: 50%; +} */ +.imgEvol { + width: 50%; +} + + +.nombreNumero { + display: flex; + justify-content: space-around; + flex-direction: row; + background: #676767; + border-radius: 10px; + height: 100%; +} + +.nombreNumero p { + color: #ffffff; + font-size: 0.8em; + font-weight: 800; + font-family: "Spartan", sans-serif; + margin: 0.4em; + text-transform: capitalize; +} + +/*DISEÑO DEL BOTON DE MAS INFO*/ + +.mostrarTarjeta { + height: 100%; + border-radius: 10px; + border: 1px solid rgb(6, 182, 129); + font-weight: bold; + background-color: white; + margin-top: 10px; +} + +.mostrarTarjeta:hover { + color: white; + background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); + cursor: pointer; +} + +/* DISEÑO DE LA TARJETA POKEMON */ +.modal-container { + background: rgba(0, 0, 0, 0.83); + position: fixed; + top: 0px; + width: 100%; + height: 100vh; + z-index: 1; +} +.cardInfo { + /*container Modal*/ + position: fixed; + font-size: 0.8em; + background-image: url(./img/fondo-tarjeta.jpg); + width: 28%; + height: 90%; + top: 3em; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + border-radius: 20px; + z-index: 1; +} + +.btnCerrar { + background: none; + padding: 0; +} +.btnCerrar .fas { + position: absolute; + right: 7%; + top: 15px; + font-size: 1.8em; + color: rgb(55, 55, 55); +} +.btnCerrar .fas:hover { + color: white; + text-shadow: 0 0.05em black; +} + +.containerImg { + height: 20%; +} + +.containerImg img { + margin-bottom: 0; +} + +.containerVista { + background-color: white; + margin: 0.5em 0.5em; + border-radius: 20px; + height: 74%; +} + +.containerVista h { + display: block; + padding-top: 0.3em; + text-transform: capitalize; + font-weight: bold; + font-size: 22px; +} +/* ---------Diseño de los botones de la tarjeta--------------- */ +.botones-tarjetas { + display: grid; + grid-template-columns: repeat(4, 1fr); + width: 97%; + margin: 10px auto; +} +.botones-tarjetas button { + background-color: #ebebeb; + width: auto; + height: 30px; + border: 0.1px solid rgb(72, 72, 72); + margin: 0; + font-family: "Spartan", sans-serif; + font-size: 0.9em; + +} + +.botones-tarjetas button:hover, +.active { + background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); + font-weight: bold; + box-shadow: 0 1px rgb(5, 5, 5, 0.5); + transition: 0.3s; +} + +/* DANDO ESTILO A LOS ICONS DE LOS TIPOS DE POKEMONES*/ +.logo-steel { + content: url("./img/steel.png"); + width: 20%; +} +.logo-water { + content: url("./img/water.png"); + width: 20%; +} +.logo-bug { + content: url("./img/bug.png"); + width: 20%; +} +.logo-dragon { + content: url("./img/dragon.png"); + width: 20%; +} +.logo-electric { + content: url("./img/electric.png"); + width: 20%; +} +.logo-ghost { + content: url("./img/gosth.png"); + width: 20%; +} +.logo-fire { + content: url("./img/fire.png"); + width: 20%; +} +.logo-fairy { + content: url("./img/fairy.png"); + width: 20%; +} +.logo-ice { + content: url("./img/ice.png"); + width: 20%; +} +.logo-fighting { + content: url("./img/fight.png"); + width: 20%; +} +.logo-normal { + content: url("./img/normal.png"); + width: 20%; +} +.logo-grass { + content: url("./img/grass.png"); + width: 20%; +} +.logo-psychic { + content: url("./img/psychic.png"); + width: 20%; +} +.logo-dark { + content: url("./img/dark.png"); + width: 20%; +} +.logo-rock { + content: url("./img/rock.png"); + width: 20%; +} +.logo-ground { + content: url("./img/ground.png"); + width: 20%; +} +.logo-poison { + content: url("./img/poison.png"); + width: 20%; +} +.logo-poison { + content: url("./img/poison.png"); + width: 20%; +} + +.logo-flying { + content: url("./img/flying.png"); + width: 20%; +} + +.divTipo { + display: flex; + flex-direction: column; +} + + +.divTipo p { + margin-top: auto; + margin-bottom: auto; +} + + +/*DANDO ESTILOS A LA VISTA1*/ + +.description h { + text-align: left; + font-size: 0.9em; + line-height: 2.5em; + padding-left: 10px; +} + +.description p { + width: 95%; + margin: auto; + font-size: 0.8em; + text-align: justify; + padding: 0 10px; + line-height: 1.4em; + border-bottom: 1px solid grey; +} + +.features { + display: flex; + justify-content: space-around; + font-size: 0.8em; +} + +.features div { + display: flex; + width: 30%; + height: 5em; + font-weight: bold; + padding-top: 1px; + justify-content: center; + align-items: center; + line-height: 1.5em; +} +.candyContainerPadre { + background-color: #e6e6e6; + height: 2.5em; + width: 70%; + margin: 0 auto; + display: flex; + justify-content: space-evenly; + margin-top: 0.4em; +} + +.palabraEvolucion { + display: flex; + justify-content: center; + margin: auto; + background: #3fc7aa; + width: 60%; + height: 100%; + border-radius: 2em; + color: white; + font-size: 1em; + padding: 3.5% 0px; + margin-left: -1em; +} +.candyContainer { + width: 40%; + height: 100%; + padding: 3.2% 14%; + display: flex; + justify-content: flex-end; +} + +.candyContainer img { + width: 1.5em; + height: 1.5em; + margin-right: 15%; +} + +.candyContainer p { + padding-top: 11%; + font-weight: bold; +} +.logo img { + width: 90px; +} +/*DANDO ESTILO A LA VISTA 2*/ + +.prueba { + padding: 2% 5%; +} + +.prueba h { + font-size: 1.1em; + text-align: left; + padding-bottom: 0.2em; +} + +.prueba p { + position: absolute; + margin: -3.3% 40%; + font-size: 0.75em; + font-weight: bold; +} +.barra { + width: 100%; + height: 1.4em; + background: rgba(225, 225, 225, 0.5); + border-radius: 0.6em; +} +.progreso { + width: var(--w); + height: 100%; + border-radius: 10px; + animation: transicion 3s ease; +} +@keyframes transicion { + 0% { + width: 0%; + } + 100% { + width: var(--w); + } +} + +.barra #base-attack { + background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%); +} +.barra #base-defense { + background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%); +} +.barra #base-stamina { + background-image: linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%); +} +.barra #max-cp { + background-image: linear-gradient(to right, #ec77ab 0%, #7873f5 100%); +} +.barra #max-hp { + background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%); +} + +/* DANDO ESTILO A VISTA3 */ + +.vista3 { + display: flex; + align-items: center; + margin-top: auto; + margin-bottom: auto; + justify-content: center; +} + +.vista3 h3 { + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +.vista3 p { + margin: 0.5em; + font-size: 0.8em; +} + +th { + border-bottom: 1px solid black; + border-spacing: 0; + border-collapse: collapse; + text-align: center; + vertical-align: top; + caption-side: bottom; + margin: 0; + +} + +table { + border: 1px solid black; + padding: 0; + width: 90%; + justify-content: center; + margin: auto; + font-size: 0.8em; + text-transform: capitalize; + +} + +/* DANDO ESTILO A LAS TABLAS */ + +.tabla-grass { + background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%); + color: white; + border-radius: 10px; + padding: 0.1em; + +} + +.tabla-normal { + background-image: linear-gradient( + -225deg, + #3d4e81 0%, + #5753c9 48%, + #6e7ff3 100% + ); + border-radius: 10px; + color: white; + padding: 0.1em; +} + +.tabla-poison { + background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + border-radius: 10px; + padding: 0.1em; + +} +.tabla-dark { + background: rgb(195, 195, 205); + background: radial-gradient( + circle, + rgba(195, 195, 205, 1) 0%, + rgba(26, 27, 36, 1) 0%, + rgba(1, 2, 11, 1) 43%, + rgba(16, 14, 27, 1) 50%, + rgba(59, 51, 75, 1) 92% + ); + color: white; + border-radius: 10px; + padding: 0.1em; + +} +.tabla-electric { + background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%); + color: white; + border-radius: 10px; + padding: 0.1em; + +} +.tabla-water { + background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); + color: white; + border-radius: 10px; + padding: 0.1em; + +} + +.tabla-dragon { + background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%); + color: rgb(236, 207, 207); + border-radius: 10px; + padding: 0.1em; + +} +.tabla-rock { + background: #3c3b3f; /* fallback for old browsers */ + background: -webkit-linear-gradient( + to right, + #605c3c, + #3c3b3f + ); /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient( + to right, + #605c3c, + #3c3b3f + ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + color: white; + border-radius: 10px; + padding: 0.1em; + +} +.tabla-fighting { + background-image: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%); + color: white; + border-radius: 10px; + padding: 0.1em; + +} + +.tabla-ghost { + background-image: linear-gradient(to top, #5f72bd 0%, #9b23ea 100%); + color: white; + border-radius: 10px; + padding: 0.1em; +} +.tabla-flying { + background-image: linear-gradient( + to top, + #0c3483 0%, + #a2b6df 100%, + #6b8cce 100%, + #a2b6df 100% + ); + color: white; + border-radius: 10px; + padding: 0.1em; + +} +.tabla-bug { + background: rgb(176, 100, 66); + background: rgb(58, 34, 195); + background-image: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%); + color: white; + border-radius: 10px; + padding: 0.1em; + +} +.tabla-fairy { + background-image: linear-gradient(to top, #cc208e 0%, #6713d2 100%); + color: white; + border-radius: 10px; + padding: 0.1em; + +} +.tabla-ice { + background-image: linear-gradient(60deg, #96deda 0%, #50c9c3 100%); + color: white; + border-radius: 10px; + padding: 0.1em; + +} + +.tabla-psychic { + background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%); + color: white; + border-radius: 10px; + padding: 0.1em; + +} + +.tabla-steel { + background-image: linear-gradient(to top, #b3ffab 0%, #12fff7 100%); + color: white; + border-radius: 10px; + padding: 0.1em; + +} +.tabla-fire { + background: #d63031; + color: white; + border-radius: 10px; + padding: 0.1em; + +} + +.tabla-fight { + background: #cc8e35; + color: white; + border-radius: 10px; + padding: 0.1em; + +} + +.tabla-ground { + color: white; + border-radius: 10px; + background-image: linear-gradient(to top, #c79081 0%, #dfa579 100%); + padding: 0.1em; + +} + +/* tablas */ +.nameTable { + width: 30%; +} +.moveTable { + width: 25%; +} + +.bdTable { + width: 10%; +} +.energyTable { + width: 10%; +} + +.mdTable { + width: 10%; +} + +/* DANDO ESTILO A LA VISTA 4*/ +.resistant { + display: grid; + grid-template-columns: repeat(3, 1fr); +} + +.weaknesses { + display: grid; + grid-template-columns: repeat(3, 1fr); +} +/* DANDO ESTILO A LA BARRA DE BUSCAR*/ + +.container-botones-filtro { + display: flex; + justify-content: space-between; +} +.container-filtro-padre { + display: flex; + width: 100%; +} +.container-filtro { + display: flex; + justify-content: left; + width: 80%; +} + +.container-filtro select, +.container-filtro2 select { + margin: 0 10px; +} +.container-buscar { + display: flex; + justify-content: right; + width: 100%; + /* padding-right: 10%; */ + align-items: center; +} + +.container-filtro2 { + display: flex; + justify-content: left; + margin: auto; + width: 50%; +} + +.container-tipo-rareza-region { + width: 100%; +} + +#search { + border-radius: 30px; + padding: 0 20px; + width: 50%; + height: 2.5em; + background-color: rgba(255, 255, 255, 0.763); + outline: none; + border: none; +} + +#search:focus { + box-shadow: 0 0 1.5em rgb(213, 213, 213); + background: white; +} + +#search:hover { + cursor: text; + background-color: white; + border: 0.2em solid rgb(28, 28, 28); + transition: 0.5s; + outline: none; + border: none; +} + +#botonBuscar { + position: absolute; + font-size: 1.4em; + width: 1.7em; + height: 1.7em; + padding: 0.19em 0.35em; + border-radius: 50%; + background-color: rgb(2, 22, 99); + color: white; + margin-right: 0px; +} + +#botonBuscar:hover { + background-color: black; + transition: 0.3s; +} + +/* BOTON PARA IR ARRIBA */ +#button-up { + width: 5.5rem; + height: 5.5rem; + display: flex; + justify-content: center; + align-items: center; + position: fixed; + bottom: 50px; + left: 50%; + cursor: pointer; + border: 4px solid transparent; + transition: all 300ms ease; + transform: scale(0); +} + +#button-up img { + width: 100%; + height: 100%; + color: white; +} + +#button-up img:hover { + transform: scale(1.1); +} + +/* DANDO ESTILO A BOTONES DE FILTRADO*/ + +/*--------------por tipo------------*/ + +#divTiposPokemones { + display: grid; + grid-template-columns: repeat(9, 1fr); + justify-content: center; + width: 80%; + margin-left: calc(100% - 85%); +} + +.tipoDiv { + justify-content: center; + margin: auto; + font-size: 0.7em; + font-weight: bold; + text-align: center; +} + +.tipoPokeInicio { + margin: auto; + width: 90%; + justify-content: center; + margin-bottom: 10px; + padding-top: 10px; +} + +#divTiposPokemones div img { + width: 80%; + justify-content: center; +} + +.activeTipo { + background-image: linear-gradient(to top, #fff1ebcc 0%, #ace0f9d4 100%); + font-weight: bold; + box-shadow: 1px 1px 2px 2px rgb(78 78 78 / 27%); + transition: 0.3s; + border: none 1px #605e5e; + transform: scale(1.15); + +} + +/* .regionDiv{ + justify-content: center; + margin: auto; + font-size: 0.8em; + text-align: center; +} */ +/*--------------por region------------*/ + +#divRegionPokemon { + display: grid; + grid-template-columns: repeat(2, 1fr); + justify-content: space-between; + width: 50%; + margin-left: calc(100% - 55%); +} + +#divRegionPokemon div img { + width: 80%; + justify-content: center; +} + +.regionDiv { + display: grid; + grid-template-columns: repeat(2, 1fr); + font-weight: bold; + margin: auto; + font-size: 0.8em; + align-items: center; + width:90% +} + +/*--------------por rareza------------*/ + +#divRarezaPokemon { + display: grid; + grid-template-columns: repeat(3, 1fr); + justify-content: center; + width: 75%; + margin-left: calc(100% - 78%); +} + +#divRarezaPokemon div img { + width: 90%; + justify-content: center; +} + +.rarezaDiv { + display: grid; + grid-template-columns: repeat(2, 1fr); + font-weight: bold; + margin: auto; + font-size: 0.8em; + align-items: center; + width: 90%; +} + +/* .rarezaPokeInicio{ + display: flex; + align-items: center; + justify-content: space-between; +} */ + +/*FORMATO AL CHART*/ +#container-stats { + padding-top: 5em; + display: flex; + margin-left: auto; + margin-right: auto; + justify-content: center; + background-image: url("./img/GYM3.jpg"); + background-size: 100% 100%; + background-attachment: fixed; + min-height: 100vh; + padding-bottom: 15px; +} +#container-stats h1 { + font-size: 60px; + font-weight: bold; + background: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%); + /* clip informático */ + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + -webkit-filter: drop-shadow(3px 3px 1px rgba(124, 124, 124, 0.59)); + text-align: center; + align-items: center; + margin-top: 25px; +} +.container-chart1, +.container-chart3 { + width: 400px; + margin-top: 3em; + margin-bottom: 3em; + margin: 3em auto; + background: rgba(165, 212, 255, 0.611); + + padding: 2em; + border-radius: 30px; + font-style: italic; +} + +.container-chart2, +.container-chart4 { + width: 980px; + margin: auto; + background: rgba(225, 225, 225, 0.611); + padding: 2em; + border-radius: 30px; + height: 100%; +} + +.container-title { + font-size: 20px; + text-align: center; + line-height: 1.5em; + font-style: normal; +} +.title-chart { + font-size: 20px; + font-weight: bold; + font-style: italic; +} + +/* ranking*/ +.titulo-ranking{ + display: flex; + flex-direction: column; + align-items: center; + margin: 20px 0px; +} + +.titulo-ranking h{ + font-weight: bold; + background: linear-gradient(to bottom, #030041 0%, #010a4e 1%, #045689 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + -webkit-filter: drop-shadow(3px 3px 1px rgba(124, 124, 124, 0.59)); + font-size: 40px; +} + +.titulo-ranking p{ + color: black; + font-size: 18px; + font-style: italic; + font-weight: bold; +} +/*FOOTER*/ +.footer { + height: 60px; + background: linear-gradient( + 90deg, + rgba(4, 0, 61, 1) 0%, + rgba(1, 1, 71, 1) 56%, + rgba(5, 106, 152, 1) 100% + ); + + /* z-index: -1; */ +position: relative; +} + +.footer .footerTexto{ + position: absolute; + top: 50%; + width: 100%; + text-align: center; + left: 50%; + transform: translate(-50%,-50%); +/* background-color:#cc208e; */ +font-size: 0.9em; +color: white; + +} + +.footerTexto i { + font-size: 1.5em; + color: white; +} + + +/*formato del loading*/ +#loader img { + width: 10%; +} +.loader { + backdrop-filter: blur(10px); + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + position: fixed; + top: 0; + left: 0; + z-index: 100000; + + transform: scale(1.1); +} + +.loader2 { + transition: all 5s ease-in-out; + transform: scale(0); +} + +/*RESPONSOVE DE LAS CARD DE PANTALLA PRINCIPAL */ + + + +@media (max-width: 1100px) { + /* carrusel */ + .carrusel-item { + min-width: 30%; + max-height: 30%; + height: 300px; + } + .cardInfo { + font-size: 0.7em; + width: 35%; + height: 90%; + } +} +@media (max-width: 1050px) and (min-height: 1000px) { + #container-stats { + padding-top: 4em; + background-image: url("https://w0.peakpx.com/wallpaper/813/772/HD-wallpaper-pikachu-background-go-pika-pokemon.jpg"); + } + + + /* cards pokemon */ + .cardInfo { + font-size: 1.2em; + width: 55%; + height: 60%; + } +.description{ + font-size: 1.2em; +} + +.description p{ + font-size: 0.7em; +} +} +@media (max-width: 1000px) { + #divTiposPokemones { + display: grid; + grid-template-columns: repeat(9, 1fr); + justify-content: center; + width: 80%; + margin-left: calc(100% - 85%); + } + + .tipoDiv { + justify-content: center; + margin: auto; + font-size: 0.5em; + font-weight: bold; + text-align: center; + } + + .container-filtro2 { + width: 70%; + } + + /* rareza pokebolas */ + + #divRarezaPokemon { + width: 70%; + } + + #divRarezaPokemon .rarezaPokeInicio img { + width: 50%; + display: flex; + justify-content: center; + } + #divRarezaPokemon .rarezaPokeInicio { + display: flex; + justify-content: center; + } + + .rarezaDiv { + grid-template-columns: repeat(1, 1fr); + } + .rarezaDiv p { + padding-top: 1em; + margin: auto; + justify-content: center; + } + /* carrusel */ + + .carrusel-item { + min-width: 35%; + max-width: 35%; + } + .parrafoCarrusel { + font-size: 0.9em; + width: 40%; + } + + /*chart*/ + #container-stats h1 { + margin-top: 0px; + } + .container-chart2, + .container-chart4 { + width: 740px; + margin: 5px auto; + padding-bottom: 10px; + padding-left: 10px; + padding-right: 10px; + } + + + @media (max-width: 768px) { + .intro_background { + padding-top: 3em; + } + .tipos { + display: block !important; + } + .region { + display: block !important; + } + + .rareza { + display: block !important; + } + #pokedex .container-tipo-rareza-region { + display: none !important; + } + + #container-filtro { + width: 100%; + justify-content: center; + } + + .container-botones-filtro { + flex-direction: column; + justify-content: space-around !important; + height: 100px; + } + + #pokedex { + padding-top: 3em; + } + + .container-buscar { + justify-content: center !important; + padding-right: 0px !important; + } + #search { + width: 330px !important; + } + + #botonBuscar { + margin-left: calc(100% - 60%) !important; + } + + #button-up { + width: 4em; + height: 4em; + left: calc(65% - 5.5em) !important; + bottom: 10px; + } + #container-stats { + padding-top: 4em; + + background-image: url("https://w0.peakpx.com/wallpaper/813/772/HD-wallpaper-pikachu-background-go-pika-pokemon.jpg"); + } + + /* cards pokemon */ + .cardInfo { + font-size: 1.2em; + width: 65%; + height: 80%; + } + + +.intro_button button { + font-size: 0.8em; +} + +.intro_content_title { + font-size: 0.7em; + line-height: 1em; +} +.intro_content_title { + margin-top: 200px; +} + +.tipoPokeInicio { + margin: auto; + width: 50%; + justify-content: center; +} + +/* cards */ +.pokemon-container { + grid-template-columns: repeat(3, 1fr); +} + +/*FORMATO AL CHART*/ +#container-stats h1 { + font-size: 34px; +} +.title-chart { + font-size: 14px; +} +.container-title { + font-size: 15px; + line-height: 1.5em; +} +.container-chart1, +.container-chart3 { + width: 300px; + margin: 20px auto; +} + +.container-chart2, +.container-chart4 { + width: 98%; + margin: 5px auto; + padding-bottom: 10px; + padding-left: 10px; + padding-right: 10px; +} +/* carrusel */ +.carrusel-item { + min-width: 30%; + max-height: 30%; + height: 150px; +} + +.contenido { + font-size: 0.7em; +} + +.tittle { + font-size: 25px; +} + +.parrafoCarrusel { + font-size: 0.9em; + width: 40%; +} +.carrusel-item { + height: 200px; +} + + + } + + + + @media (max-width: 600px) { + + .titulo-ranking h{ + font-size: 25px; + } + + .titulo-ranking p{ + font-size: 15px; + } + #search { + width: 60% !important; + } + + #botonBuscar { + margin-left: calc(100% - 45%) !important; + } + +/* cards pokemon */ +.cardInfo { + font-size: 0.8em; + width: 70%; + height: 90%; +} + +.containerVista h{ +font-size: 1.2em; +} + +.description{ + font-size: 1.3em; +} + +.description p{ + font-size: 0.8em; +} + +.botones-tarjetas button{ + font-size: 1em; +} + + + .pokemon-container { + grid-template-columns: repeat(2, 1fr); + } + .pokemon-block { + width: 60%; + } + + + .parrafoCarrusel { + font-size: 1em; + width: 60%; + } + + .carrusel-item { + min-width: 40%; + max-width: 40%; + + height: 200px; + } + } + + +} + @media (max-width: 500px) { + + #search { + width: 80% !important; + } + + #botonBuscar { + margin-left: calc(100% - 30%) !important; + } +/* cards pokemon */ +.cardInfo { + font-size: 0.8em; + width: 90%; + height: 75%; +} + +.containerImg img{ + width: 40%; +} +.description{ + font-size: 1.2em; +} + +.description p{ + font-size: 0.8em; +} + +.botones-tarjetas button{ + font-size: 1em; +} + + + + + .intro_button button { + font-size: 0.6em; + } + + .intro_content_title { + font-size: 0.7em; + line-height: 2em; + } + .intro_content_title { + margin-top: 130px; + } + .intro_content_description { + line-height: 1em; + font-size: 0.6em; + } + + .contenedor-peliculas { + grid-template-columns: repeat(4, 1fr); + width: 90%; + } + + #pelicula1 { + grid-column: 1/3; + } + + #pelicula2 { + grid-column: 3/5; + } + + #pelicula3 { + grid-column: 1/3; + } + #pelicula4 { + grid-column: 3/5; + } + #pelicula5 { + grid-column: 2/4; + } + + .pelicula { + border-radius: 15px; + } + .titulo-pelicula h { + line-height: 0.5cm; + font-size: 12px; + } + + .titulo-pelicula p { + font-size: 10px; + padding-left: 30px; + } + .titulo-pelicula { + max-height: 40px; + padding-left: 15px; + padding-bottom: 30px; + } + + .tittle { + padding: 0.5em 0; + font-size: 20px; + display: flex; + justify-content: center; + align-items: center; + font-weight: bold; + } + + .tittle img { + max-width: 120px; + max-height: 90px; + } + + + + + + + /* cards */ + + .pokemon-container { + grid-template-columns: repeat(1, 1fr); + } + /*FORMATO AL CHART*/ + #container-stats h1 { + font-size: 30px; + + margin-top: 0px; + } + .title-chart { + font-size: 11px; + } + .container-title { + font-size: 11px; + line-height: 1.5em; + } + .container-chart1, + .container-chart3 { + width: 70%; + margin: 20px auto; + } + + .container-chart2, + .container-chart4 { + width: 98%; + margin: 5px auto; + padding-bottom: 10px; + padding-left: 10px; + padding-right: 10px; + } + + /* carrusel */ + .contenido { + font-size: 0.5em; + } + + .carrusel-item { + min-width: 50%; + max-width: 50%; + + height: 170px; + } + + .tittle { + font-size: 20px; + } + + .parrafoCarrusel { + font-size: 0.7em; + width: 55%; + } + } + + +@media (max-width:450px){ + + + /* cards pokemon */ +.cardInfo { + font-size: 0.8em; + width: 90%; + height: 90%; +} + + +.description{ + font-size: 1.2em; +} + + + +.botones-tarjetas button{ + font-size: 1em; +} + +/*FOOTER*/ +.footer .footerTexto{ + font-size: 0.6em; + } +} + + + +@media (max-width:420px){ + + + /* cards pokemon */ +.cardInfo { + font-size: 0.8em; + width: 90%; + height: 80%; +} + +} + + + +@media (max-width:375px){ + +.solo p{ +font-size: 0.8em; +} + +/* cards pokemon */ +.cardInfo { + font-size: 0.8em; + width: 90%; + height: 80%; +} + +.containerImg img{ + width: 40%; +} +.description{ + font-size: 1em; +} + +.description p{ + font-size: 0.8em; +} + +.description h{ + font-size: 0.8em; +} + +.features{ + font-size: 0.8em; +} + +.botones-tarjetas button{ + font-size: 0.9em; +} +.palabraEvolucion{ + font-size: 1em; +} + + + +} + + + + + +@media (max-width: 300px) { + + + + .parrafoCarrusel { + font-size: 0.7em; + width: 50%; + } +} + + diff --git a/src/vistas.js b/src/vistas.js new file mode 100644 index 00000000..c1e66d9f --- /dev/null +++ b/src/vistas.js @@ -0,0 +1,292 @@ +import data from "./data/pokemon/pokemon.js"; + +import {mostrarPokemon , ordenarTop} from './main.js' + + +// const botones del navegador + +const container = document.querySelector(".pokemon-container"); +const arrayPokemon = data.pokemon; + + +//const btnInicio = document.getElementById("btnInicio"); +const btnPokedex = document.getElementById("btnPokedex"); +const btnTipo = document.getElementById("btnTipo"); +const btnRegion = document.getElementById("btnRegion"); +const btnRareza = document.getElementById("btnRareza"); +const btnStats = document.getElementById("btnStats"); +const btnInicioLogo=document.getElementById('btnInicioLogo') + +//-------------PASAR DE INICIO AL POKEDEX +const verPokedex = document.getElementById("verPokedex"); +verPokedex.addEventListener("click", () => { + document.querySelector("#welcome").style.display = "none"; + document.querySelector("#pokedex").style.display = "block"; + document.querySelector(".menu").style.display = "flex"; + document.querySelector("#pokedex").style.display = "block"; + document.querySelector(".container-tipo-rareza-region").style.display = "none" + document.querySelector(".toggle").classList.toggle("show") + + + btnPokedex.className = "activeButton"; + //btnInicio.className = ""; + btnRareza.className = ""; + btnRegion.className = ""; + btnTipo.className = ""; + document.getElementById("btnRanking").className = ""; + + document.documentElement.scrollTop = 0; +}); + + +// BOTON LOGO-POKEDEX PARA VOLVER AL INICIO + +btnInicioLogo.addEventListener('click',()=>{ + document.querySelector("#welcome").style.display = "block"; + document.querySelector("#pokedex").style.display = "none"; + document.querySelector(".menu").style.display = "none"; + + //btnInicio.className = "activeButton"; + window.location.reload(); + document.documentElement.scrollTop = 0; +}) + + + +//--------BOTON PARA VOLVER AL INICIO + +// btnInicio.addEventListener("click", () => { +// document.querySelector("#welcome").style.display = "block"; +// document.querySelector("#pokedex").style.display = "none"; +// document.querySelector(".menu").style.display = "none"; +// btnInicio.className = ""; +// window.location.reload(); +// document.documentElement.scrollTop = 0; +// }); + + +//----------------PASAR A LA VISTA DEL POKEDEX +btnPokedex.addEventListener("click", () => { + container.innerHTML = ""; + mostrarPokemon(arrayPokemon, arrayPokemon); + + document.querySelector(".container-buscar").style.display = "flex"; + document.querySelector("#divTiposPokemones").style.display = "none"; + document.querySelector("#divRegionPokemon").style.display = "none"; + document.querySelector("#divRarezaPokemon").style.display = "none"; + document.querySelector("#container-stats").style.display = "none"; + document.querySelector("#pokedex").style.display = "block"; + document.querySelector(".container-tipo-rareza-region").style.display = "none"; + document.querySelector("#egg").style.display="block"; + document.getElementById("rareza").className = ""; + document.getElementById("region").className="" + document.getElementById("tipos").className="" + document.querySelector(".menu").classList.toggle("nav-menu_visible") + document.querySelector(".titulo-ranking").style.display="none"; + document.querySelector(".container-botones-filtro").style.display="flex"; + document.querySelector("#parrafo").style.display="block"; + + document.getElementById('cp').value="" + document.getElementById('orden').value="" + document.getElementById('egg').value="" + + if(document.querySelector("#container-filtro").className=="container-filtro2"){ + document.querySelector("#container-filtro").className="container-filtro" + } + + + btnTipo.className = ""; + btnPokedex.className = "activeButton"; + document.getElementById("btnRanking").className = ""; + + btnRareza.className = ""; + btnRegion.className = ""; + btnStats.className = ""; +}); + + +//-----PASAR A LA VISTA TIPO +btnTipo.addEventListener("click", () => { + container.innerHTML = ""; + mostrarPokemon(arrayPokemon , arrayPokemon); + + document. querySelector("#welcome").style.display = "none"; + document.querySelector(".container-buscar").style.display = "none"; + document.querySelector(".container-tipo-rareza-region").style.display = "block"; + document.querySelector("#divTiposPokemones").style.display = "grid"; + document.querySelector("#divRegionPokemon").style.display = "none"; + document.querySelector("#divRarezaPokemon").style.display = "none"; + document.querySelector("#container-stats").style.display = "none"; + document.querySelector("#egg").style.display="none"; + document.querySelector("#pokedex").style.display = "block"; + document.querySelector(".menu").classList.toggle("nav-menu_visible") + document.querySelector(".titulo-ranking").style.display="none"; + document.querySelector(".container-botones-filtro").style.display="flex"; + document.querySelector("#parrafo").style.display="block"; + document.getElementById("tipos").className="tipos" + document.getElementById("region").className="" + document.getElementById("rareza").className="" + + + document.getElementById('cp').value="" + document.getElementById('orden').value="" + document.getElementById('tipos').value="" + + if(document.querySelector("#container-filtro").className=="container-filtro"){ + document.querySelector("#container-filtro").className="container-filtro2" + } + + btnTipo.className = "activeButton"; + btnPokedex.className = ""; + btnRareza.className = ""; + btnRegion.className = ""; + btnStats.className = ""; + document.getElementById("btnRanking").className = ""; + document.documentElement.scrollTop = 0; +}); + + +//--------------------PASAR A LA VISTA REGION +btnRegion.addEventListener("click", () => { + + container.innerHTML = ""; + mostrarPokemon(arrayPokemon, arrayPokemon); + + document.querySelector(".container-buscar").style.display = "none"; + document.querySelector("#divTiposPokemones").style.display = "none"; + document.querySelector("#divRegionPokemon").style.display = "grid"; + document.querySelector("#divRarezaPokemon").style.display = "none"; + document.querySelector("#container-stats").style.display = "none"; + document.querySelector("#pokedex").style.display = "block"; + document.querySelector(".container-tipo-rareza-region").style.display = "block"; + document.querySelector("#egg").style.display="none"; + document.getElementById("region").className="region" + document.getElementById("tipos").className="" + document.getElementById("rareza").className="" + document.querySelector(".menu").classList.toggle("nav-menu_visible") + document.querySelector(".titulo-ranking").style.display="none"; + document.querySelector(".container-botones-filtro").style.display="flex"; + document.querySelector("#parrafo").style.display="block"; + + +document.getElementById('cp').value="" +document.getElementById('orden').value="" +document.getElementById('region').value="" + + if(document.querySelector("#container-filtro").className=="container-filtro"){ + document.querySelector("#container-filtro").className="container-filtro2" + } + + + btnRegion.className = "activeButton"; + btnPokedex.className = ""; + btnTipo.className = ""; + btnRareza.className = ""; + btnStats.className = ""; + document.getElementById("btnRanking").className = ""; + document.documentElement.scrollTop = 0; +}); + +//-------------------------PASAR A LA VISTA RAREZA +btnRareza.addEventListener("click", () => { + container.innerHTML = ""; + mostrarPokemon(arrayPokemon, arrayPokemon); + + document.querySelector(".container-buscar").style.display = "none"; + document.querySelector("#divRarezaPokemon").style.display = "grid"; + document.querySelector("#divTiposPokemones").style.display = "none"; + document.querySelector("#divRegionPokemon").style.display = "none"; + document.querySelector("#container-stats").style.display = "none"; + document.querySelector(".container-tipo-rareza-region").style.display = "block"; + document.querySelector("#pokedex").style.display = "block"; + document.querySelector("#egg").style.display="none"; + document.querySelector(".titulo-ranking").style.display="none"; + document.querySelector(".container-botones-filtro").style.display="flex"; + document.querySelector("#parrafo").style.display="block"; + document.getElementById("rareza").className = "rareza"; + document.getElementById("region").className="" + document.getElementById("tipos").className="" + document.querySelector(".menu").classList.toggle("nav-menu_visible") + + + document.getElementById('cp').value="" + document.getElementById('orden').value="" + document.getElementById('rareza').value="" + + + if(document.querySelector("#container-filtro").className=="container-filtro"){ + document.querySelector("#container-filtro").className="container-filtro2" + } + + btnRareza.className = "activeButton"; + btnRegion.className = ""; + btnPokedex.className = ""; + btnTipo.className = ""; + btnStats.className = ""; + document.getElementById("btnRanking").className = ""; + document.documentElement.scrollTop = 0; +}); + + + +//RANKING +document.getElementById("btnRanking").addEventListener('click',()=>{ + container.innerHTML = ""; + ordenarTop(arrayPokemon, arrayPokemon); + + document.querySelector(".titulo-ranking").style.display="flex"; + document.querySelector(".container-buscar").style.display = "none"; + document.querySelector("#divRarezaPokemon").style.display = "none"; + document.querySelector("#divTiposPokemones").style.display = "none"; + document.querySelector("#divRegionPokemon").style.display = "none"; + document.querySelector("#container-stats").style.display = "none"; + document.querySelector(".container-tipo-rareza-region").style.display = "none"; + document.querySelector("#pokedex").style.display = "block"; + document.querySelector(".menu").classList.toggle("nav-menu_visible") + + document.querySelector("#egg").style.display="none"; + document.querySelector(".container-botones-filtro").style.display="none"; + document.querySelector("#parrafo").style.display="none"; + document.getElementById("region").className="" + document.getElementById("tipos").className="" + document.getElementById("rareza").className="" + + document.getElementById('cp').value="" + document.getElementById('orden').value="" + document.getElementById('rareza').value="" + + + if(document.querySelector("#container-filtro").className=="container-filtro"){ + document.querySelector("#container-filtro").className="container-filtro2" + } + + document.getElementById("btnRanking").className = "activeButton"; + btnRegion.className = ""; + btnPokedex.className = ""; + btnTipo.className = ""; + btnStats.className = ""; + document.documentElement.scrollTop = 0; + +}) + + +//----------------PASAR A LA VISTA ESTADISTICAS +btnStats.addEventListener("click", () => { + + + document.querySelector(".container-buscar").style.display = "none"; + document.querySelector("#divRarezaPokemon").style.display = "none"; + document.querySelector("#divTiposPokemones").style.display = "none"; + document.querySelector("#divRegionPokemon").style.display = "none"; + document.querySelector("#pokedex").style.display = "none"; + document.querySelector("#container-stats").style.display = "block"; + document.querySelector(".menu").classList.toggle("nav-menu_visible") + + document.getElementById("btnRanking").className = ""; + btnRareza.className = ""; + btnRegion.className = ""; + btnPokedex.className = ""; + btnTipo.className = ""; + btnStats.className = "activeButton"; + document.documentElement.scrollTop = 0; +}); diff --git a/test/data.spec.js b/test/data.spec.js index 09b1f23f..fba175e8 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,23 +1,523 @@ -import { example, anotherExample } from '../src/data.js'; +import { huevitoPokemon , filtarCp , rarezaPokemon , ordenAlfaNumerico, typePokemones, regionFuncion, buscarPoke, regionSelect, rarezaSelect, tiposSelect } from '../src/data.js'; +import data from "../src/data/pokemon/pokemon.js"; -describe('example', () => { +const pikachu = { + "num": "025", + "name": "pikachu", + "generation": { + "num": "generation i", + "name": "kanto" + }, + "about": "Whenever Pikachu comes across something new, it blasts it with a jolt of electricity. If you come across a blackened berry, it's evidence that this Pokémon mistook the intensity of its charge.", + "img": "https://www.serebii.net/pokemongo/pokemon/025.png", + "size": { + "height": "0.41 m", + "weight": "6.0 kg" + }, + "pokemon-rarity": "normal", + "type": [ + "electric" + ], + "encounter": { + "base-flee-rate": "0.1", + "base-capture-rate": "0.2" + }, + "spawn-chance": "0.21", + "stats": { + "base-attack": "112", + "base-defense": "96", + "base-stamina": "111", + "max-cp": "938", + "max-hp": "99" + }, + "resistant": [ + "electric", + "flying", + "steel" + ], + "weaknesses": [ + "ground" + ], + "quick-move": [ + { + "name": "thunder shock", + "type": "electric", + "base-damage": "5", + "energy": "8", + "move-duration-seg": "0.6" + }, + { + "name": "quick attack", + "type": "normal", + "base-damage": "8", + "energy": "10", + "move-duration-seg": "0.8" + } + ], + "special-attack": [ + { + "name": "discharge", + "type": "electric", + "base-damage": "65", + "energy": "-33", + "move-duration-seg": "2.5" + }, + { + "name": "thunderbolt", + "type": "electric", + "base-damage": "80", + "energy": "-50", + "move-duration-seg": "2.5" + }, + { + "name": "wild charge", + "type": "electric", + "base-damage": "90", + "energy": "-50", + "move-duration-seg": "2.6" + }, + { + "name": "thunder", + "type": "electric", + "base-damage": "100", + "energy": "-100", + "move-duration-seg": "2.4" + } + ], + "egg": "2 km", + "buddy-distance-km": "1", + "evolution": { + "candy": "pikachu candy", + "next-evolution": [{ + "num": "026", + "name": "raichu", + "candy-cost": "50" + }], + "prev-evolution": [{ + "num": "172", + "name": "pichu", + "candy-cost": "25" + }] + } +} + +const eevee = { + "num": "133", + "name": "eevee", + "generation": { + "num": "generation i", + "name": "kanto" + }, + "about": "Eevee has an unstable genetic makeup that suddenly mutates due to the environment in which it lives. Radiation from various stones causes this Pokémon to evolve.", + "img": "https://www.serebii.net/pokemongo/pokemon/133.png", + "size": { + "height": "0.30 m", + "weight": "6.5 kg" + }, + "pokemon-rarity": "normal", + "type": [ + "normal" + ], + "encounter": { + "base-flee-rate": "0.1", + "base-capture-rate": "0.4" + }, + "spawn-chance": "2.75", + "stats": { + "base-attack": "104", + "base-defense": "114", + "base-stamina": "146", + "max-cp": "1071", + "max-hp": "127" + }, + "resistant": [ + "ghost" + ], + "weaknesses": [ + "fighting" + ], + "quick-move": [ + { + "name": "quick attack", + "type": "normal", + "base-damage": "8", + "energy": "10", + "move-duration-seg": "0.8" + }, + { + "name": "tackle", + "type": "normal", + "base-damage": "5", + "energy": "5", + "move-duration-seg": "0.5" + } + ], + "special-attack": [ + { + "name": "dig", + "type": "ground", + "base-damage": "100", + "energy": "-50", + "move-duration-seg": "4.7" + }, + { + "name": "swift", + "type": "normal", + "base-damage": "60", + "energy": "-50", + "move-duration-seg": "2.8" + }, + { + "name": "body slam", + "type": "normal", + "base-damage": "50", + "energy": "-33", + "move-duration-seg": "1.9" + } + ], + "egg": "5 km", + "buddy-distance-km": "5", + "evolution": { + "candy": "eevee candy", + "next-evolution": [ + { + "num": "134", + "name": "vaporeon", + "candy-cost": "25" + }, + { + "num": "135", + "name": "jolteon", + "candy-cost": "25" + }, + { + "num": "136", + "name": "flareon", + "candy-cost": "25" + }, + { + "num": "196", + "name": "espeon", + "candy-cost": "25" + }, + { + "num": "197", + "name": "umbreon", + "candy-cost": "25" + }, + { + "num": "470", + "name": "leafeon", + "candy-cost": "25" + }, + { + "num": "471", + "name": "glaceon", + "candy-cost": "25" + } + ] + } +} + +const mewtwo = { + "num": "150", + "name": "mewtwo", + "generation": { + "num": "generation i", + "name": "kanto" + }, + "about": "Mewtwo is a Pokémon that was created by genetic manipulation. However, even though the scientific power of humans created this Pokémon's body, they failed to endow Mewtwo with a compassionate heart", + "img": "https://www.serebii.net/pokemongo/pokemon/150.png", + "size": { + "height": "2.01 m", + "weight": "122.0 kg" + }, + "pokemon-rarity": "legendary", + "type": [ + "psychic" + ], + "encounter": { + "base-flee-rate": "0.1", + "base-capture-rate": "0.06" + }, + "spawn-chance": "0", + "stats": { + "base-attack": "300", + "base-defense": "182", + "base-stamina": "214", + "max-cp": "4178", + "max-hp": "180" + }, + "resistant": [ + "fighting", + "psychic" + ], + "weaknesses": [ + "bug", + "ghost", + "dark" + ], + "quick-move": [ + { + "name": "psycho cut", + "type": "psychic", + "base-damage": "5", + "energy": "8", + "move-duration-seg": "0.6" + }, + { + "name": "confusion", + "type": "psychic", + "base-damage": "20", + "energy": "15", + "move-duration-seg": "1.6" + } + ], + "special-attack": [ + { + "name": "psychic", + "type": "psychic", + "base-damage": "100", + "energy": "-100", + "move-duration-seg": "2.8" + }, + { + "name": "shadow ball", + "type": "ghost", + "base-damage": "100", + "energy": "-50", + "move-duration-seg": "3" + }, + { + "name": "hyper beam", + "type": "normal", + "base-damage": "150", + "energy": "-100", + "move-duration-seg": "3.8" + }, + { + "name": "focus blast", + "type": "fight", + "base-damage": "140", + "energy": "-100", + "move-duration-seg": "3.5" + } + ], + "egg": "not in eggs", + "buddy-distance-km": "20", + "evolution": { + "candy": "mewtwo candy" + } +} + +const wooper = { + "num": "194", + "name": "wooper", + "generation": { + "num": "generation ii", + "name": "johto" + }, + "about": "Wooper usually lives in water. However, it occasionally comes out onto land in search of food. On land, it coats its body with a gooey, toxic film.", + "img": "https://www.serebii.net/pokemongo/pokemon/194.png", + "size": { + "height": "0.41 m", + "weight": "8.5 kg" + }, + "pokemon-rarity": "normal", + "type": [ + "water", + "ground" + ], + "encounter": { + "base-flee-rate": "0.1", + "base-capture-rate": "0.4" + }, + "spawn-chance": null, + "stats": { + "base-attack": "75", + "base-defense": "66", + "base-stamina": "146", + "max-cp": "641", + "max-hp": "127" + }, + "resistant": [ + "fire", + "poison", + "rock", + "steel" + ], + "weaknesses": [ + "grass" + ], + "quick-move": [ + { + "name": "water gun", + "type": "water", + "base-damage": "5", + "energy": "5", + "move-duration-seg": "0.5" + }, + { + "name": "mud shot", + "type": "ground", + "base-damage": "5", + "energy": "7", + "move-duration-seg": "0.6" + } + ], + "special-attack": [ + { + "name": "mud bomb", + "type": "ground", + "base-damage": "55", + "energy": "-33", + "move-duration-seg": "2.3" + }, + { + "name": "dig", + "type": "ground", + "base-damage": "100", + "energy": "-50", + "move-duration-seg": "4.7" + }, + { + "name": "body slam", + "type": "normal", + "base-damage": "50", + "energy": "-33", + "move-duration-seg": "1.9" + } + ], + "egg": "not in eggs", + "buddy-distance-km": "3", + "evolution": { + "candy": "wooper candy", + "next-evolution": [{ + "num": "195", + "name": "quagsire", + "candy-cost": "50" + }] + } +} + +const arrayPrueba = [pikachu, eevee, mewtwo, wooper] + + +describe('huevitoPokemon', () => { + it('is a function', () => { + expect(typeof huevitoPokemon).toBe('function'); + }); + it('should return', () => { + expect(huevitoPokemon("2 km", data.pokemon)).toHaveLength(23) + }); +}); + +describe('filtarCp', () => { + it('is a function', () => { + expect(typeof filtarCp).toBe('function'); + }); + it('should return', () => { + expect(filtarCp("max", arrayPrueba)).toStrictEqual([mewtwo, eevee, pikachu, wooper]) + }); + it('should return', () => { + expect(filtarCp("min", arrayPrueba)).toStrictEqual([wooper, pikachu, eevee, mewtwo]) +}); +}); + + +describe('ordenAlfaNumerico', () => { + it('is a function', () => { + expect(typeof ordenAlfaNumerico).toBe('function'); + }); + + +it('should return', () => { + expect(ordenAlfaNumerico("az", arrayPrueba)).toStrictEqual([ eevee, mewtwo, pikachu, wooper]) +}); + + +it('should return', () => { + expect(ordenAlfaNumerico("za", arrayPrueba)).toStrictEqual([wooper, pikachu, mewtwo, eevee]) +}); + +it('should return', () => { + expect(ordenAlfaNumerico("251_1",arrayPrueba)).toStrictEqual([wooper, mewtwo, eevee, pikachu]) +}); + +it('should return', () => { + expect(ordenAlfaNumerico("1_251", arrayPrueba)).toStrictEqual([pikachu, eevee, mewtwo, wooper]) +}); + +}); + +describe('typePokemones', () => { it('is a function', () => { - expect(typeof example).toBe('function'); + expect(typeof typePokemones).toBe('function'); }); + it('returns `24`', () => { + expect(typePokemones("grass",data.pokemon)).toHaveLength(24); + }); +}); + - it('returns `example`', () => { - expect(example()).toBe('example'); +describe('rarezaPokemon', () => { + it('is a function', () => { + expect(typeof rarezaPokemon).toBe('function'); + }); + it('should return', () => { + expect(rarezaPokemon("normal", data.pokemon)).toHaveLength(240) }); }); +describe('regionFuncion', () => { + it('is a function', () => { + expect(typeof regionFuncion).toBe('function'); + }); + + it('returns `100`', () => { + expect(regionFuncion("johto",data.pokemon)).toHaveLength(100); + }); + }); -describe('anotherExample', () => { +describe('buscarPoke', () => { it('is a function', () => { - expect(typeof anotherExample).toBe('function'); + expect(typeof buscarPoke).toBe('function'); }); - it('returns `anotherExample`', () => { - expect(anotherExample()).toBe('OMG'); + it('returns `pikachu`', () => { + expect(buscarPoke("pika",arrayPrueba)).toStrictEqual([pikachu]); + }); + + it('returns `bulbasaur`', () => { + expect(buscarPoke("194",data.pokemon)).toStrictEqual([wooper]); }); }); + +describe('regionSelect', () => { + it('is a function', () => { + expect(typeof regionSelect).toBe('function'); + }); + + it('returns `150`', () => { + expect(regionSelect("kanto",data.pokemon)).toHaveLength(151); + }); + }); + + describe('rarezaSelect', () => { + it('is a function', () => { + expect(typeof rarezaSelect).toBe('function'); + }); + it('should return', () => { + expect(rarezaSelect("normal", arrayPrueba)).toHaveLength(3) + }); + }); + + describe('tiposSelect', () => { + it('is a function', () => { + expect(typeof tiposSelect).toBe('function'); + }); + it('should return', () => { + expect(tiposSelect("normal", arrayPrueba)).toStrictEqual([eevee]); + }); + }); \ No newline at end of file