diff --git a/README.md b/README.md index a6c38f69..efae9864 100644 --- a/README.md +++ b/README.md @@ -1,458 +1,163 @@ # Data Lovers -## Índice - -* [1. Preámbulo](#1-preámbulo) -* [2. Resumen del proyecto](#2-resumen-del-proyecto) -* [3. Objetivos de aprendizaje](#3-objetivos-de-aprendizaje) -* [4. Consideraciones generales](#4-consideraciones-generales) -* [5. 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. Preámbulo - -Según [Forbes](https://www.forbes.com/sites/bernardmarr/2018/05/21/how-much-data-do-we-create-every-day-the-mind-blowing-stats-everyone-should-read), -el 90% de la data que existe hoy ha sido creada durante los últimos dos años. -Cada día generamos 2.5 millones de terabytes de datos, una cifra sin -precedentes. - -No obstante, los datos por sí mismos son de poca utilidad. Para que esas -grandes cantidades de datos se conviertan en **información** fácil de leer para -los usuarios, necesitamos entender y procesar estos datos. Una manera simple de -hacerlo es creando _interfaces_ y _visualizaciones_. - -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. - -![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) +## -Pokemon Dex- -## 3. Objetivos de aprendizaje +

-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. +## Índice -### HTML y CSS +- [1. Descripción del proyecto](#1-descripcion-del-proyecto) +- [2. Investigación UX](#2-investigacion-ux) +- [3. Historias de usuario](#3-historias-de-ususario) +- [4. Prototipos BF - AF](#4-prototipo-B.F-A.F) +- [5. Diseño final](#5-diseño-final) +- [6. Test usabilidad](#6-test-usabilidad) +- [7. Objetivos de aprendizaje](#7-objetivos-de-aprendizaje) +- [8. Checklist](#9-checklist) -* [ ] [Uso de HTML semántico.](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML) -* [ ] Uso de selectores de CSS. -* [ ] Construir tu aplicación respetando el diseño realizado (maquetación). -* [ ] [Uso de flexbox en CSS.](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) +--- -### DOM y Web APIs +## 1. Descripción del proyecto -* [ ] Uso de selectores del DOM. -* [ ] Manejo de eventos del DOM. -* [ ] [Manipulación dinámica del DOM.](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n) -(appendChild |createElement | createTextNode| innerHTML | textContent | etc.) +Pokémon Dex es una página donde el usuario puede consultar y conocer acerca de los pokemones de la primera generación o dicho por los expertos y conocedores de este mundo, pokemones que habitan la región de Kanto. +Además de acercarce a su Pokémon favorito, los usuarios de esta página tienen la opción de ordenar ya sea en orden ascendente o descendente por letra y asi mismo por número, dentro de estas opciones también cuentan con la posibilidad de filtrarlos según su tipo (15). -### JavaScript +## 2. Investigación UX -* [ ] Uso de condicionales (if-else | switch | operador ternario) -* [ ] Uso de bucles (for | for..in | for..of | while) -* [ ] Uso de funciones (parámetros | argumentos | valor de retorno) -* [ ] Manipular arrays (filter | map | sort | reduce) -* [ ] Manipular objects (key | value) -* [ ] Uso ES modules ([`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) -| [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)) -* [ ] Diferenciar entre expression y statements. -* [ ] Diferenciar entre tipos de datos atómicos y estructurados. +Para entender mejor qué necesidades complementarias a la app Pokémon GO tienen los usuarios, se encontró una rápida investigación (research) y estos son algunos de los hallazgos. -### Testing +- Los Pokémon tienen características únicas que determinan las decisiones que toma el usuario (tipo, debilidad, peso, multiplicador, etc.) +- Un maestro Pokémon antes de salir a casar los Pokémon tienen que: saber el top 10 de frecuencia de aparición de los Pokémon. +- Los Pokémon tienen distintos tipos y debilidades de combate. Estas características son importantes cuando un maestro Pokémon elige al Pokémon más adecuado para su batalla. Hay veces que tiene que elegir a los que tienen menos cantidad de debilidades y saber de que tipo son. Por ello, es importante para un maestro Pokémon poder ordenarlos por estas 2 características. +- Los Pokémon evolucionan y es importante para un maestro Pokémon saber cuántas y cuáles son las evoluciones que tienen antes y después. +- Los Pokémon se alimentan de caramelos y un maestro Pokémon necesita saber cuántos caramelos necesita un Pokémon para evolucionar. -* [ ] [Testeo unitario.](https://jestjs.io/docs/es-ES/getting-started) +## 3. Historias de usuario -### Estructura del código y guía de estilo +- **H1**: Yo como jugador quiero ver una página de inicio. +- **H2**: Yo como jugador quiero ver un listado de pokemones para saber más de ellos. +- **H3**: Yo como jugador quiero ver la informacion del Pokémon. +- **H4**: Yo como jugador quiero una interfaz para visualizarla en diferentes disposotivos. +- **H5**: Yo como jugador de quiero tener la opción filtrar la búsqueda de pokemones. -* [ ] Organizar y dividir el código en módulos (Modularización) -* [ ] Uso de identificadores descriptivos (Nomenclatura | Semántica) -* [ ] Uso de linter (ESLINT) +## 4. Prototipos -### Git y GitHub +### Baja fidelidad -* [ ] Uso de comandos de git (add | commit | pull | status | push) -* [ ] Manejo de repositorios de GitHub (clone | fork | gh-pages) -* [ ] Colaboración en Github (branches | pull requests | |tags) +- vista Pc - desktop: -### UX +

+

-* [ ] Diseñar la aplicación pensando y entendiendo al usuario. -* [ ] Crear prototipos para obtener feedback e iterar. -* [ ] Aplicar los principios de diseño visual (contraste, alineación, jerarquía) -* [ ] Planear y ejecutar tests de usabilidad. +- vista dispositivos móviles: -## 4. Consideraciones generales +

-* Este proyecto se debe resolver en duplas. -* El proyecto será entregado subiendo tu código a GitHub (commit/push) y la - interfaz será desplegada usando [GitHub Pages](https://pages.github.com/). -* Tiempo para completarlo: Toma como referencia 4 semanas. +### Alta fidelidad -## 5. Criterios de aceptación mínimos del proyecto +- Vista Pc: -Los criterios para considerar que has completado este proyecto son: +

-### Definición del producto +

-Documenta brevemente tu trabajo en el archivo `README.md` de tu repositorio, -contándonos cómo fue tu proceso de diseño y cómo crees que el producto resuelve -el problema (o problemas) que tiene tu usuario. +

-### Historias de usuario +

-Una vez que entiendas las necesidades de tus usuarios, escribe las [Historias -de Usuario](https://es.wikipedia.org/wiki/Historias_de_usuario) que representen -todo lo que el usuario necesita hacer/ver. Las **Historias de Usuario** deben -ser el resultado de tu proceso de investigación o _research_ de tus usuarios. +- Vista para móvil: -Asegúrate de incluir la definición de terminado (_definition of done_) y los -Criterios de Aceptación para cada una. +

-En la medida de lo posible, termina una historia de usuario antes de pasar -a la siguiente (Cumple con Definición de Terminado + Criterios de Aceptación). +

-### Diseño de la Interfaz de Usuario +

-#### Prototipo de baja fidelidad +

-Durante tu trabajo deberás haber hecho e iterado bocetos (_sketches_) de tu -solución usando papel y lápiz. Te recomendamos tomar fotos de todas las -iteraciones que hagas, que las subas a tu repositorio y las menciones en tu -`README.md`. - -#### Prototipo de alta fidelidad - -Lo siguiente es diseñar tu Interfaz de Usuario (UI por sus siglas en inglés - -_User Interface_). Para eso debes aprender a utilizar alguna herramienta de -diseño visual. Nosotros te recomendamos [Figma](https://www.figma.com/) que es -una herramienta que funciona en el navegador y, además, puedes crear una cuenta -gratis. Sin embargo, eres libre de utilizar otros editores gráficos como -Illustrator, Photoshop, PowerPoint, Keynote, etc. +## 5. Diseño final -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_. +- Finalizado el proceso y diseño de los prototipos se dessarrolla el diseño final en figma, link: https://www.figma.com/file/ldOWTWYSa7QH1KCEjSnWWo/DataLovers?node-id=0%3A1 -#### Testeos de usabilidad +## 6. Test 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. +Durante el desarrollo del proyecto se recogieron varios feedback en los cuales encontramos las siguientes sugerencias, todas estas fueron tenidas en cuenta y se aplicaron a la mejora de la página: -### Implementación de la Interfaz de Usuario (HTML/CSS/JS) +- Responsive de la página: se observo que al ajustar a las diferentes medidas, el diseño perdia su forma y se desajustaba a estas medidas. +- Tipografía y colores: la letra era muy plana y no resaltaba en la interfaz; los colores fueron ajustados de manera acorde a la página. +- Tarjetas para los Pokemon: se ajusta el tamaño y el color de fondo, alineación, así como su contenido. -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 +## 7. Objetivos de aprendizaje -Como mínimo, tu implementación debe: +### HTML y CSS -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_. +- [x] uso de html semántico.(https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML) +- [x] Uso de selectores de CSS. +- [x] Construir tu aplicación respetando el diseño realizado (maquetación). +- [x] uso de flexbox en css.(https://css-tricks.com/snippets/css/a-guide-to-flexbox/) -### Pruebas unitarias +### DOM y Web APIs -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. +- [x] Uso de selectores del DOM. +- [x] Manejo de eventos del DOM. +- [x] manipulación dinámica del dom. (https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n) + (appendChild |createElement | createTextNode| innerHTML | textContent | etc.) -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). +### JavaScript -## 6. Hacker edition +- [x] Uso de condicionales (if-else | switch | operador ternario) +- [x] Uso de bucles (for | for..in | for..of | while) +- [x] Uso de funciones (parámetros | argumentos | valor de retorno) +- [x] Manipular arrays (filter | map | sort | reduce) +- [x] Manipular objects (key | value) +- [ ] Uso ES modules ([`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) + | [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)) +- [ ] Diferenciar entre expression y statements. +- [x] Diferenciar entre tipos de datos atómicos y estructurados. -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. +### Testing -Features/características extra sugeridas: +- [ ][testeo unitario.](https://jestjs.io/docs/es-ES/getting-started) -* 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 +### Estructura del código y guía de estilo -## 7. Consideraciones técnicas +- [x] Organizar y dividir el código en módulos (Modularización) +- [x] Uso de identificadores descriptivos (Nomenclatura | Semántica) +- [x] Uso de linter (ESLINT) -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. +### Git y GitHub -No se debe utilizar la _pseudo-variable_ `this`. +- [x] Uso de comandos de git (add | commit | pull | status | push) +- [x] Manejo de repositorios de GitHub (clone | fork | gh-pages) +- [x] Colaboración en Github (branches | pull requests | |tags) -El _boilerplate_ contiene una estructura de archivos como punto de partida así -como toda la configuración de dependencias: +### UX -```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 -| ├── data.js -| ├── index.html -| ├── main.js -| └── style.css -└── test - └── data.spec.js - -directory: 6 file: 17 -``` - -### `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/pokemon/pokemon.js'; -``` - -La línea quedaría así: - -```js -import data from './data/pokemon/pokemon.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 ` - + + + + + + Data Lovers + + + + + +
+ + +
Pokemon-logo
+
+
+ +
+ +
+
+ +
+
+

+ Explore and browse the Pokémon universe to become a Master, so go on and... +

+ + +
+ +
+
+ + + + + + + + + +
+
+ +
+
+ + + +
+ + + diff --git a/src/main.js b/src/main.js index 71c59f2d..0eeb346d 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,95 @@ -import { example } from './data.js'; -// import data from './data/lol/lol.js'; + +import { orderSort, pokemonTypes} from './data.js'; + +// EVENTOS + +// import { example } from './data.js'; + import data from './data/pokemon/pokemon.js'; -// import data from './data/rickandmorty/rickandmorty.js'; -console.log(example, data); + +// -----BOTÓN PARA CAMBIAR DE VISTA---- + +var next = document.getElementById("continue"); + +next.addEventListener("click", () => { + document.getElementById("Home").style.display = "none"; + document.getElementById("Pokedex").style.display = "block"; +}); + +// ----- MENÚ ---- +// const tabs = Array.prototype.slice.apply(document.querySelectorAll("data-tab-target")); +// const window = Array.prototype.slice.apply(document.querySelectorAll("[data-tab-content]")); +// document.getElementById("tabs").addEventListener("click", e => { +// if (e.target.classList.contains("data-tab-target")) { +// let i = tabs.indexOf(e.target); +// window.map(window => window.classList.remove("window-1")); +// window[i].classList.add("block"); +// } +// }) + +var home = document.getElementById("home"); + +home.addEventListener("click", () => { + document.getElementById("Pokedex").style.display = "none"; + document.getElementById("Home").style.display = "grid"; +}); + +var pokedex = document.getElementById("pokedex"); + +pokedex.addEventListener("click", () => { + document.getElementById("Home").style.display = "none"; + document.getElementById("Pokedex").style.display = "block"; +}); + +// -----DESGLOSANDO EL OBJETO---- +// var info = dataSet[0]; +// var id = info.id; +// var num = info.num; +// var name = info.name; +// var sum = (`${id} ${num} ${name}`); + +// -----MOSTRAR POKEMONES EN HTML---- +let dataSet = data.pokemon; +let result; +for (result of dataSet) { +document.getElementById("window-container").innerHTML += `

${result.num}

${result.name}


`; +} + +// -----BOTÓN DE ORDENAR---- +// let orderBtn = document.getElementById("aZ"); +// orderBtn.addEventListener("change", () => { +// var orderOption = orderBtn.options[orderBtn.selectedIndex].text; +// console.log(orderOption) +// }) + +let orderBtn = document.getElementById("aZ"); +orderBtn.addEventListener("change", () => { + var arrData = orderSort(dataSet, event.target.value); + var orderOption = document.querySelector(".window-container"); + orderOption.textContent = ""; + for (let pokemon of arrData) { + orderOption.innerHTML += `

${pokemon.num}

${pokemon.name}


`; +}}); + +// -----BOTÓN DE TIPOS---- +// let typeBtn = document.getElementById("element") +// typeBtn.addEventListener("change", () => { +// var typeOption = typeBtn.options[typeBtn.selectedIndex].text; +// +// }) + +let typeBtn = document.getElementById("element"); +typeBtn.addEventListener("change", (event) => { + var typeOption = document.querySelector(".window-container"); + typeOption.textContent = ""; + const textSelect = event.target.value; + const dataFilter = pokemonTypes(dataSet, textSelect); + dataFilter.forEach((element) => { + typeOption.innerHTML += `

${element.num}

${element.name}


`; + }); +}); + + + + diff --git a/src/style.css b/src/style.css index e69de29b..0d1c802a 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,586 @@ +*{ + margin: 0px; + padding: 0px; + box-sizing: border-box; +} + +body { + background: url(Images/background.jpg) no-repeat center center fixed; + background-size: cover; +} + +header { + display: flex; + flex-direction: row; + justify-content: space-around; + font-family: "VT323", monospace; + background: #F32E13; + border: 8px solid #D22121; + +} + +#list, #bar { + display: none; +} + +main { + font-family: "Share Tech Mono"; +} + +main button { + font-family: "VT323", monospace; +} + +.window-2 { + display: none; +} + +.window-container { + height: 100%; + overflow: scroll; +} + +.card { + background: #C6E2F2; + text-align: center; + border-radius: 10px; + padding: 5px 1px; + } + +footer { + width: 100%; + font-family: "VT323", monospace; + background: #F32E13; + border: 5px solid #D22121; + color: white; +} + +@media screen and (max-width: 450px) { + + header { + height: 11vh; + } + + .container { + width: 150px; + } + + nav { + display: flex; + align-items: center; + } + + #list { + display: flex; + width: 25px; + margin-left: 85%; + } + + .home, .pokedex, .versus{ + width: 30px; + } + + .nav-links { + display: none; + text-align: left; + flex-direction: column; + } + + li { + display: flex; + flex-flow: row wrap; + justify-content: flex-end; + flex-direction: column; + list-style: none; + } + + a { + text-decoration: none; + color: black; + } + + #Pokemon { + width: 20vh; + } + + .searchContainer { + display: flex; + align-items: center; + justify-content: flex-end; + } + + .search { + width: 45%; + display: flex; + border: none; + background: #F32E13 + } + + .loupe { + width: 55%; + } + + main .window-1 { + display: flex; + margin-left: 25%; + flex-direction: column; + justify-content: center; + width: 50%; + height: calc(100vh - 11vh - 7vh); + } + + .home, .pokedex, .versus{ + width: 30px; + } + + .nav-links { + display: block; + text-align: left; + flex-direction: column; + transition: all 0.5s; + } + + li { + display: flex; + flex-flow: row wrap; + justify-content: flex-end; + flex-direction: column; + list-style: none; + } + + a { + text-decoration: none; + color: black; + } + + #Pokemon { + width: 20vh; + } + + .searchContainer { + display: flex; + align-items: center; + justify-content: flex-end; + } + + .search { + width: 45%; + display: flex; + border: none; + background: #F32E13 + } + + .loupe { + width: 55%; + } + + main .window-1 { + display: flex; + flex-direction: column; + justify-content: center; + width: 50%; + margin-left: 25%; + height: calc(100vh - 11vh - 7vh); + } + + h1 { + font-family: Share Tech Mono; + font-style: normal; + font-weight: normal; + font-size: 14px; + text-align: justify; + } + + .AMB { + width: 100%; + margin-top: 15%; + } + + .continue { + width: 59%; + align-self: center; + margin-top: 4%; + padding: 4%; + background: #FFFFFF; + box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);; + border-radius: 50px; + } + + main .window-2 { + height: calc(100vh - 11vh - 7vh); + } + + .btn-filter { + display: flex; + justify-content: space-evenly; + } + + .Filter { + width: 35%; + display: inline-flex; + justify-content: center; + margin-top: 4%; + padding: 2%; + background: rgba(243, 46, 19, 0.7); + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border: 1px solid rgba(0, 0, 0, 0.85); + border-radius: 20px; + font-family: "VT323", monospace; + font-size: 15px; + text-align-last: center; + } + + .window-container { + display: flex; + flex-flow: wrap; + justify-content: space-evenly; + padding: 5%; + height: 90%; + } + + .card { + width: 45%; + margin: 2%; + } + + footer { + display: flex; + height: 7vh; + font-size: 14px; + line-height: 16px; + text-align: center; + justify-content: center; + } + .card { + background: #C6E2F2; + width: 15%; + text-align: center; + border-radius: 10px; + } +} + +@media screen and (min-width: 451px) and (max-width: 770px) { + + header { + height: 15vh; + } + + .container { + width: 200px; + justify-content: center; + align-self: center; + } + + nav { + display: flex; + align-items: center; + } + + #list { + display: flex; + width: 25%; + } + + .home, .pokedex, .versus{ + width: 60px; + } + + .nav-links { + display: none; + text-align: left; + flex-direction: column; + } + + li { + display: flex; + flex-flow: row wrap; + justify-content: flex-end; + flex-direction: column; + list-style: none; + } + + a { + text-decoration: none; + color: black; + } + + #Pokemon { + width: 170px; + } + + .searchContainer { + display: flex; + align-items: center; + justify-content: flex-end; + } + + .search { + width: 35%; + display: flex; + border: none; + background: #F32E13 + } + + .loupe { + width: 50%; + } + + main .window-1 { + display: flex; + flex-direction: column; + justify-content: center; + width: 27%; + margin-left: 36%; + height: calc(100vh - 15vh - 10vh); + } + + h1 { + font-family: Share Tech Mono; + font-style: normal; + font-weight: normal; + font-size: 14px; + text-align: justify; + } + + .AMB { + width: 100%; + margin-top: 15%; + } + + .continue { + width: 59%; + align-self: center; + margin-top: 4%; + padding: 4%; + background: #FFFFFF; + box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);; + border-radius: 50px; + } + + main .window-2 { + height: calc(100vh - 15vh - 10vh); + } + + .btn-filter { + display: flex; + justify-content: space-evenly; + } + + .Filter { + width: 35%; + display: inline-flex; + justify-content: center; + margin-top: 4%; + padding: 2%; + background: rgba(243, 46, 19, 0.7); + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border: 1px solid rgba(0, 0, 0, 0.85); + border-radius: 50px; + font-family: "VT323", monospace; + font-size: 17px; + text-align-last: center; + } + + .window-container { + display: flex; + flex-flow: wrap; + justify-content: space-evenly; + padding: 3%; + height: 88%; + } + + .card { + width: 20%; + margin: 2%; + } + + footer { + display: flex; + height: 10vh; + font-size: 14px; + line-height: 16px; + text-align: center; + justify-content: center; + align-items: center; + } + .card { + background: #C6E2F2; + width: 15%; + text-align: center; + border-radius: 10px; + } +} + +@media screen and (min-width: 771px) { + + header { + height: 16vh; + } + + .container { + width: 300px; + align-self: center; + } + + nav { + display: flex; + align-items: center; + } + + .home, .pokedex, .versus{ + width: 40px; + } + + .nav-links { + display: flex; + } + + li { + padding: 0 10px; + list-style: none; + } + + a { + display: flex; + align-items: center; + flex-direction: column; + text-decoration: none; + color: black; + font-size: 30px; + } + + #Pokemon { + width: 300px; + + } + + .searchContainer { + display: flex; + align-items: center; + justify-content: flex-end; + } + + #bar { + display: inline-block; + } + + input { + border-radius: 15px; + padding: 4%; + } + + .search { + width: 45px; + border: none; + background: #F32E13 + } + + .loupe { + width: 61%; + } + + main .window-1 { + width: 95%; + display: grid; + position: relative; + padding-left: 15%; + height: calc(100vh - 16vh - 7vh); + max-width: 2000px; + grid-template-columns: repeat(4, 1fr); + } + + h1 { + grid-column: span 2; + padding: 135px 0px; + padding-right: 86px; + font-family: Share Tech Mono; + font-style: normal; + font-weight: normal; + font-size: 26px; + text-align: justify; + align-self: center; + } + + .AMB { + display: flex; + grid-column: span 2; + grid-row: span 2; + align-self: center; + width: 70%; + } + + .continue { + width: 60%; + position: absolute; + grid-column-start: 1; + grid-column-end: 2; + top: 58%; + margin-left: 46%; + padding: 5%; + background: #FFFFFF; + box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);; + border-radius: 50px; + } + + main .window-2 { + height: calc(100vh - 16vh - 7vh); + } + + .btn-filter{ + position: absolute; + display: flex; + flex-flow: column; + justify-content: space-evenly; + padding: 5%; + } + + .Filter { + background: rgba(243, 46, 19, 0.7); + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + border: 1px solid rgba(0, 0, 0, 0.85); + border-radius: 20px; + font-family: "VT323", monospace; + font-size: 22px; + text-align-last: center; + } + + #aZ { + margin-top: 20%; + padding: 2%; + } + + #element { + margin-top:85%; + padding: 2%; + } + + .window-container { + display: flex; + flex-flow: wrap; + justify-content: space-evenly; + margin-right: 3%; + margin-left: 15%; + padding: 10px; + } + + .card { + width: 18%; + margin: 1%; + } + + footer { + display: flex; + height: 7vh; + font-size: 14px; + line-height: 16px; + justify-content: center; + text-align: center; + } + + .card { + background: #C6E2F2; + width: 15%; + text-align: center; + border-radius: 10px; + } +} diff --git a/test/data.spec.js b/test/data.spec.js index 09b1f23f..45a1688f 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,7 +1,7 @@ -import { example, anotherExample } from '../src/data.js'; +import { orderSort, pokemonType } from '../src/data.js'; -describe('example', () => { +describe('check the order of the property', () => { it('is a function', () => { expect(typeof example).toBe('function'); });