diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6b665aaa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/README.md b/README.md index 0e78340d..6e861b01 100644 --- a/README.md +++ b/README.md @@ -2,624 +2,341 @@ ## Í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 para solicitar PF](#9-checklist-para-solicitar-pf) +* [1. Definición del producto](#1-definición-del-producto) +* [2. Historias de usuario](#2-historias-de-usuario) +* [3. Prototipos de baja fidelidad](#3-prototipos-de-baja-fidelidad) +* [4. Prototipos de baja fidelidad](#4-prototipos-de-alta-fidelidad) +* [5. Resultados de test de usuabilidad](#5-resultados-de-test-de-usuabilidad) +* [6. Panificación del Proyecto](#6-planificación-del-proyecto) +* [7. Contribuidoras](#6-contribuidoras) *** -## 1. Preámbulo +## 1. Definición del producto -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. +El producto 'Countries' es una aplicación web que proporciona información detallada sobre países de todo el mundo. Permite a los usuarios explorar y buscar países, acceder a datos relevantes como su capital, población, idiomas oficiales, zonas horarias y más. Además, ofrece funcionalidades de filtrado y clasificación para ayudar a los usuarios a encontrar países según sus preferencias. El producto también incluye una interfaz intuitiva y amigable, que permite una navegación fácil y una experiencia agradable para los usuarios. Con 'Countries', los usuarios pueden ampliar su conocimiento sobre diferentes países y acceder rápidamente a información clave para diversos propósitos como viajes, estudios, investigaciones y más. -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_. +### Características principales -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 las -usuarias, al lado derecho. +* Información detallada de países: Proporciona datos exhaustivos sobre países, incluyendo su nombre, capital, población, idiomas oficiales, zonas horarias, entre otros. -![pokemon-data-to-ui](https://user-images.githubusercontent.com/12631491/218505816-c6d11758-9de4-428f-affb-2a56ea4d68c4.png) +* Búsqueda de países: Permite a los usuarios buscar países específicos utilizando un cuadro de búsqueda, lo que facilita la localización rápida de información sobre un país en particular. -## 2. Resumen del proyecto +* Filtrado de países: Ofrece opciones de filtrado para ayudar a los usuarios a encontrar países según diferentes criterios, como continente, subregión y ordenamiento por población. -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. +* Clasificación de países: Permite ordenar los países en función de la población, ya sea en orden ascendente o descendente, lo que permite obtener una visión general de los países más y menos poblados. -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). +* Interfaz intuitiva: Cuenta con una interfaz fácil de usar y amigable, que facilita la navegación y la exploración de los datos de los países. -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. +* Diseño responsive: La aplicación está diseñada para adaptarse a diferentes dispositivos y tamaños de pantalla, lo que garantiza una experiencia consistente tanto en computadoras de escritorio como en dispositivos móviles. -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. +### Público objetivo -Estos son datos que te proponemos: +El público objetivo de "Countries" puede ser amplio y diverso, ya que el producto brinda información y herramientas útiles para cualquier persona interesada en explorar y conocer más sobre países de todo el mundo. Algunos posibles segmentos de público objetivo podrían incluir: -* [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) +* **Viajeros y entusiastas de los viajes:** Aquellos que disfrutan viajando y desean obtener información detallada sobre diferentes países antes de planificar sus viajes. -* [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) +* **Estudiantes y académicos:** Personas que buscan datos e información confiable sobre países para proyectos académicos, estudios de investigación o aprendizaje general. -* [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) +* **Profesionales y empresarios internacionales:** Individuos involucrados en negocios internacionales que necesitan conocer información relevante sobre países, como datos demográficos, indicadores económicos y culturales. -* [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) +* **Curiosos y entusiastas de la cultura:** Personas interesadas en aprender sobre la diversidad cultural, tradiciones, idiomas y costumbres de diferentes países. -* [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) +* **Expatriados y migrantes:** Individuos que planean o están viviendo en un país extranjero y desean obtener información detallada sobre su destino actual o potencial. -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. +En resumen, el público objetivo de "Countries" abarca a cualquier persona que tenga interés en explorar y obtener información precisa y confiable sobre países de todo el mundo, ya sea por motivos personales, académicos, profesionales o de viaje. -## 3. Objetivos de aprendizaje +### Funcionalidades -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. +Los Filtros utilizados en "Countries" incluyen: -### HTML +1. **Filtro por continente:** Permite a los usuarios seleccionar un continente específico para ver los países correspondientes a esa región geográfica. -- [ ] **Uso de HTML semántico** +2. **Filtro por lenguaje:** Permite a los usuarios filtrar los países según los idiomas oficiales hablados en cada país. Esto ayuda a los usuarios a encontrar países que compartan un idioma común. -
Links

+3. **Filtro por subregión:** Permite a los usuarios filtrar los países según una subregión específica, lo que ayuda a refinar la búsqueda y explorar países más específicos dentro de una región. - * [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) -

+4. **Filtro y ordenamiento por población:** Permite ordenar los países según su población, ya sea de forma ascendente (de menor a mayor) o descendente (de mayor a menor), lo que permite visualizar los países más o menos poblados en función de las necesidades del usuario. -### CSS +5. **Filtro por área:** Permite a los usuarios filtrar los países según su área geográfica, lo que ayuda a identificar países más grandes o más pequeños en términos de superficie terrestre. -- [ ] **Uso de selectores de CSS** +6. **Densidad de población:** Junto con la información de población, se muestra la densidad de población de cada país, que es el número de personas por unidad de área. Esto proporciona una perspectiva sobre la concentración de la población en cada país. -
Links

+7. Adicionamente se agrego un **cálculo relacionado con el promedio de la densidad poblacional por continentes**, esto brinda una visión comparativa de la densidad de población promedio en diferentes regiones del mundo. - * [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) -

+### Cómo usar la aplicación -- [ ] **Modelo de caja (box model): borde, margen, padding** +1. Accede a la aplicación [aquí](https://andreastefbustos.github.io/DEV009-data-lovers/src) +2. Una vez cargada la página, verás un listado de países en la pantalla principal. Puedes comenzar a explorar esta lista o utilizar las funcionalidades de búsqueda y filtrado para encontrar países específicos. +3. Búsqueda de países: En la barra de búsqueda, puedes ingresar el nombre común del país, y los resultados se irán mostrando a medida que escribes. Haz clic en el país deseado para ver su información detallada, como capital, si el país es independiente o no, y su zona horaria. +4. Al lado izquierdo encontrarás un aside con filtros disponibles como: continente, lenguaje, sub-región, población, área y densidad de población. +5. Al ingresar en población, área o densidad de población podrás ordenarla de manera ascendente o descendente. +6. Estadísticas y cálculos agregados: En la aplicación, encontrarás estadísticas agregadas, como el promedio de densidad de población por continente. Estos datos te brindarán una visión general de las diferencias demográficas entre los continentes. +7. En contrarás una lista de letras de la A-Z donde podrás seleccionar alguna de ellas y mostrará los nombres de los países que pertenecen a dicha letra a su vez, encontrarás un `ALL` que al hacer clic mostrará de nuevo toda la lista de los países. -
Links

+### Diseño de la página - * [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/) -

+### Paleta de colores -- [ ] **Uso de flexbox en CSS** +Se elegi la siguiente paleta de colores por su: +* Versatilidad +* Enfoque en el contenido +* Elegancia y simplicidad +* Mejor legibilidad -
Links

+![paleta-de-colores](./img/paleta-de-colores.jpeg) - * [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) -

+### Tipografía utilizada -### Web APIs +* Encabezados y tílulos : Stoke +* Texto de la lista de los países: Sans-serif +* Aside: Georgia -- [ ] **Uso de selectores del DOM** +### Iconografía -
Links

+Se utilizaron algunos íconos en el proyecto, la cual fueron tomados de la siguiente página: - * [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) -

+* [Icono de menú](https://stock.adobe.com/ca/images/id/551953059?k=menu+icon&clickref=1101lwV2J3GJ&mv=affiliate&mv2=Freepik&as_camptype=&as_channel=affiliate&as_source=partnerize&as_campaign=Flaticon&as_content=api&as_audience=srp&sdid=6WTV6YJ5&asset_id=551953059) -- [ ] **Manejo de eventos del DOM (listeners, propagación, delegación)** +* [Icono de Sort](https://www.flaticon.com/free-icon/sort_4662255?term=sort&page=1&position=3&origin=search&related_id=4662255) -
Links

+### Tecnologías utilizadas - * [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) -

+En este proyecto, se utilizaron las tecnologías fundamentales de desarrollo web: **JavaScript**, **HTML** y **CSS**. Cada una de estas tecnologías desempeña un papel clave en la creación de una página web dinámica, atractiva y funcional. -- [ ] **Manipulación dinámica del DOM** +**HTML (HyperText Markup Language)** es el lenguaje de marcado estándar utilizado para estructurar el contenido de una página web. Con HTML, se definen los elementos y la organización de la información, como encabezados, párrafos, imágenes, enlaces y otros elementos visuales. -
Links

+**CSS (Cascading Style Sheets)** se encarga de la presentación y el diseño visual de una página web. Con CSS, se pueden definir estilos, como colores, fuentes, márgenes, tamaños y posiciones de los elementos HTML. Esto permite personalizar la apariencia de la página y lograr un diseño coherente y atractivo. - * [Introducción al DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) - * [Node.appendChild() - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/appendChild) - * [Document.createElement() - MDN](https://developer.mozilla.org/es/docs/Web/API/Document/createElement) - * [Document.createTextNode()](https://developer.mozilla.org/es/docs/Web/API/Document/createTextNode) - * [Element.innerHTML - MDN](https://developer.mozilla.org/es/docs/Web/API/Element/innerHTML) - * [Node.textContent - MDN](https://developer.mozilla.org/es/docs/Web/API/Node/textContent) -

+**JavaScript** es un lenguaje de programación de alto nivel que se utiliza para agregar interactividad y funcionalidad a una página web. Con JavaScript, se pueden realizar acciones dinámicas en respuesta a eventos, como hacer que los elementos cambien de estilo, realizar validaciones de formularios, mostrar y ocultar contenido, y comunicarse con servicios web para obtener y mostrar datos actualizados. -### JavaScript +Al combinar estas tres tecnologías, **JavaScript**, **HTML** y **CSS**, se crea una base sólida para el desarrollo web. **JavaScript** proporciona la capacidad de interactuar con el usuario y realizar acciones dinámicas, HTML estructura el contenido y CSS da estilo y diseño a la página. Juntas, estas tecnologías permiten crear experiencias web atractivas y funcionales para los usuarios. -- [ ] **Diferenciar entre tipos de datos primitivos y no primitivos** +### Control de versiones -- [ ] **Arrays (arreglos)** +Se ha utilizado Git como sistema de control de versiones para mantener un registro detallado de los cambios realizados en el proyecto. -
Links

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

+### *Historia de Usuario 1* -- [ ] **Objetos (key, value)** +Mostrar los nombres comunes de los países más la imagen de la bandera. -
Links

+* **Yo como** estudiante académico ó persona interesada en el tema sobre países. - * [Objetos en JavaScript](https://curriculum.laboratoria.la/es/topics/javascript/05-objects/01-objects) -

+* **Quiero** ver el listado de los países con sus respectivos nombres comunes y la imagen de las banderas. -- [ ] **Variables (declaración, asignación, ámbito)** +* **Para** saber si la base de datos tiene incluido el país del cual necesito buscar información. -
Links

+#### Criterios de Aceptación - * [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) -

+* Al desplegarse la UI el usuario pueda ver una página con los nombres comunes de los países y sus banderas ordenados alfabéticamente y agrupados por letras. +* Podrá realizar scroll -- [ ] **Uso de condicionales (if-else, switch, operador ternario, lógica booleana)** +#### Definición de terminado -
Links

+* El código cumple con la guía de estilos acordada. +* El código está subido al repositorio. +* El código tiene y pasa las tests necesarios. +* El código ha sido hecho, al menos en parte, en pair-programming y alguien le hizo code-review. +* La historia implementada ha sido testeada con al menos 3 usuarios y se han incorporado la mejoras que se identificaron en esos testeos de usabilidad. - * [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) -

+### *Historia de Usuario 2* -- [ ] **Uso de bucles/ciclos (while, for, for..of)** +Tener una caja de texto (Buscador) donde el usuario ingrese el país que desea ver, escribiendo en minúsculas ó mayúsculas. -
Links

+* **Yo como** estudiante académico ó persona interesada en el tema sobre países. - * [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) -

+* **Quiero** escribir en un buscar ó caja de texto, un país de mi selección. -- [ ] **Funciones (params, args, return)** +* **Para** que se me facilité al momento de realizar la búsqueda correspondiente. +#### Criterios de Aceptación -
Links

+* La página principal deberá tener un input que será una caja de texto, este será el buscador. +* Al momento de escribir algún nombre este se podrá escribir en minúsculas, mayúsculas ó las dos al mismo tiempo es decir ej. AbCd. +* La página principal también tendrá 2 botonos, 1. para limpiar el input y la lista de los países generada y 2. que deberá mostrar de nuevo la lista de los países con sus nombres comunes y respectivas banderas nuevamente. - * [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) -

+#### Definición de terminado -- [ ] **Pruebas unitarias (unit tests)** +* El código cumple con la guía de estilos acordada. +* El código está subido al repositorio. +* El código tiene y pasa las tests necesarios. +* El código ha sido hecho, al menos en parte, en pair-programming y alguien le hizo code-review. +* La historia implementada ha sido testeada con al menos 3 usuarios y se han incorporado la mejoras que se identificaron en esos testeos de usabilidad -
Links

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

+#### *Historia de Usuario #3.1* -- [ ] **Módulos de ECMAScript (ES Modules)** +Incluir un navegador con las letras del alfabeto de la A-Z, para realizar un filtrado por letra. -
Links

+* **Yo como** estudiante académico ó persona interesada en el tema sobre países. - * [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) -

+* **Quiero** poder visualizar un navegador donde incluya el alfabeto con las letras de la A-Z. -- [ ] **Uso de linter (ESLINT)** +* **Para** poder realizar mas fácil el proceso de búsqueda. -- [ ] **Uso de identificadores descriptivos (Nomenclatura y Semántica)** +#### Criterios de Aceptación -- [ ] **Diferenciar entre expresiones (expressions) y sentencias (statements)** +* La página principal deberá tener un navegador donde aparece la palabra ALL y las letras de la A-Z en mayúscula. +* Este navegador deberá ir en el centro de la página y tener las propiedades de responsive. +* Al momento de seleccionar alguna letra, en el listado de países solo debe de verse reflejado los nombre de los países de la letra seleccionada. +* Al momento de hacer click en ALL deberá de aparecer la lista completa de los países con sus respectivas bandera nuevamente. -### Control de Versiones (Git y GitHub) +#### Definición de terminado -- [ ] **Git: Instalación y configuración** +* El código cumple con la guía de estilos acordada. +* El código está subido al repositorio. +* El código tiene y pasa las tests necesarios. +* La historia implementada ha sido testeada con al menos 3 usuarios y se han incorporado la mejoras que se identificaron en esos testeos de usabilidad. -- [ ] **Git: Control de versiones con git (init, clone, add, commit, status, push, pull, remote)** +#### *Historia de Usuario #3.2.1* -- [ ] **Git: Integración de cambios entre ramas (branch, checkout, fetch, merge, reset, rebase, tag)** +Implementar un Aside donde se podrán implementar diferentes filtros mostrando información básica, como: continente (calculo agregado de promedio de densidad población por continente), lenguaje, subregión, población, área, densidad poblacional (Desktop y mobile con la version de un menú que se despliegará el mismo aside con dicha información "versión responsive"). -- [ ] **GitHub: Creación de cuenta y repos, configuración de llaves SSH** +* **Yo como** estudiante académico ó persona interesada en el tema sobre países. -- [ ] **GitHub: Despliegue con GitHub Pages** +* **Quiero** poder visualizar un aside con acceso a filtros por: continente, lenguaje, subregión, población, área, densidad poblacional. -
Links

+* **Para** poder filtrar toda la data y solo visualizar los países que cumplan alguno de los criterios anteriores. - * [Sitio oficial de GitHub Pages](https://pages.github.com/) -

+#### Criterios de Aceptación -- [ ] **GitHub: Colaboración en Github (branches | forks | pull requests | code review | tags)** +* En la página principal se deberá visualizar un aside con su respectiva información: continente, lenguaje, subregión, población, área, densidad poblacional (Desktop aside). +* Se deberá realizar un proceso de filtrado para cada categoría. +* Los filtros se visulizaran. -### Centrado en el usuario +#### Definición de terminado -- [ ] **Diseñar y desarrollar un producto o servicio poniendo a las usuarias en el centro** +* El código cumple con la guía de estilos acordada. +* El código está subido al repositorio. +* El código tiene y pasa las tests necesarios. +* La historia implementada ha sido testeada con al menos 3 usuarios y se han incorporado la mejoras que se identificaron en esos testeos de usabilidad. -### Diseño de producto +### *Historia de Usuario 4* -- [ ] **Crear prototipos de alta fidelidad que incluyan interacciones** +Hacer click en el nombre del país y desplegar información relevante, como: capital, si el país es independiente, y su zona horaria. -- [ ] **Seguir los principios básicos de diseño visual** +* **Yo como** estudiante académico ó persona interesada en el tema sobre países. -### Investigación +* **Quiero** poder seleccionar un país y que este se despliegue una ventana con cierta información relevante de dicho país. -- [ ] **Planear y ejecutar testeos de usabilidad de prototipos en distintos niveles de fidelidad** +* **Para** conocer sobre: capital, país independiente y zona horaria. -
Links

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

+* Cuando el usuario hace click en el nombre de un país se debe abrir una vista con toda la información disponible del país seleccionado la cual será: capital, país independiente y zona horaria. +* Luego al volver hacer click la información debe de esconderse nuevamente. -## 4. Consideraciones generales +#### Definición de terminado -* Este proyecto se debe resolver en duplas. -* El rango de tiempo estimado para completar el proyecto es de 3 a 4 Sprints. -* El proyecto será entregado subiendo tu código a GitHub (commit/push) y la - interfaz será desplegada usando [GitHub Pages](https://pages.github.com/). +* El código cumple con la guía de estilos acordada. +* El código está subido al repositorio. +* El código tiene y pasa las tests necesarios. +* La historia implementada ha sido testeada con al menos 3 usuarios y se han incorporado la mejoras que se identificaron en esos testeos de usabilidad. -## 5. Criterios de aceptación mínimos del proyecto +## 3. Prototipos de baja fidelidad -Los criterios para considerar que has completado este proyecto son: +![prototipo-desktop](./img/boceto-baja-fidelidad-countries.png) -### Definición del producto +## 4. Prototipos de alta fidelidad -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. +* DESKTOP -### Historias de usuario +![prototipo-alta-desktop](./img/prototipo-alta-desktop1.png) -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. +* MOBILE -Asegúrate de incluir la definición de terminado (_definition of done_) y los -Criterios de Aceptación para cada una. +![prototipo-alta-mobile](./img/prototipo-alta-mobile.png) +![prototipo-alta-mobile-menu](./img/prototipo-alta-mobile-menu.png) -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). +Se obtuvieron algunos feedback -### Diseño de la Interfaz de Usuario +* Paulina Torres +* Diana Morales +* Mafer Orostegui -#### Prototipo de baja fidelidad +**Propuesta de Pulina:** -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`. +*Para desktop:* -#### Prototipo de alta fidelidad +buscaria otra imagen no queda claro para que es este boton, o quizas indicar "haz click aqui para ver detalle de la poblacion" por ejemplo tipo hover +a nivel experiencia usuario me gusta queda claro para que es la pagina, si en css redondearia los bordes para que no se vean tan toscos, unificandolos cuadraros como el del titulo "countries" -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. +![prototipo-alta-paulina-desktop](./img/feedback-desktop-borde.png) -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_. +![prototipo-alta-paulina-desktop](./img/feedback-desktop-icon-population.png) -#### Testeos de usabilidad +*Para mobile:* -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. +intentaria agrandar mas la letra +me encanta como lograron hacer el responsive de escritorio a mobile, bonito y elegante. -### Implementación de la Interfaz de Usuario (HTML/CSS/JS) +![prototipo-alta-paulina-mobile](./img/feedback-mobile-menu-aside.png) -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 +![prototipo-alta-paulina-mobile](./img/feedback-movile-letterBig.png) -Como mínimo, tu implementación debe: +**Propuesta de Mafer:** -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_. +*Para desktop:* -### Pruebas unitarias +Considero que la estructura está limpia y la jerarquización también. Es tan serio como esperaría que lo fuera una app que me brinde información de este tipo😍 Me encanta! -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. +![prototipo-alta-mafer-desktop](./img/feedback-desktop.png) -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). +*Para mobile:* -## 6. Hacker edition +Para empezar me encanta lo minimalista y ordenado que luce, es refrescante para mi mente!! En el caso de este search sería estupendo que tuviese más protagonismo; por lo demás todo está perfecto😍 -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. +![prototipo-alta-mafer-mobile](./img/feedback-mobile.png) -Features/características extra sugeridas: +**Propuesta de Diana:** -* En lugar de consumir la data estática brindada en este repositorio, puedes - consumir la data de forma dinámica, cargando un archivo JSON por medio de - `fetch`. La carpeta `src/data` contiene una versión `.js` y una `.json` de - de cada set datos. -* Agregarle a tu interfaz de usuario implementada visualizaciones gráficas. Para - ello te recomendamos explorar librerías de gráficas como - [Chart.js](https://www.chartjs.org/) - o [Google Charts](https://developers.google.com/chart/). -* 100% Coverage - -## 7. Consideraciones técnicas - -La lógica del proyecto debe estar implementada completamente en JavaScript -(ES6), HTML y CSS. En este proyecto NO está permitido usar librerías o -frameworks, solo [vanilla JavaScript](https://medium.com/laboratoria-how-to/vanillajs-vs-jquery-31e623bbd46e), -con la excepción de librerías para hacer gráficas (charts); ver -[_Parte opcional_](#6-hacker-edition) más arriba. - -El _boilerplate_ contiene una estructura de archivos como punto de partida así -como toda la configuración de dependencias: - -```text -. -├── EXTRA.md -├── README.md -├── package.json -├── src -| ├── data (según con qué data trabajes) -| | ├── lol -| | | ├── lol.js -| | | ├── lol.json -| | | └── README.md -| | ├── pokemon -| | | ├── pokemon.js -| | | ├── pokemon.json -| | | └── README.md -| | └── rickandmorty -| | | ├── rickandmorty.js -| | | ├── rickandmorty.json -| | | └── README.md -| | └── athletes -| | | ├── athletes.js -| | | ├── athletes.json -| | | └── README.md -| | └── ghibli -| | | ├── ghibli.js -| | | ├── ghibli.json -| | | └── README.md -| ├── data.js -| ├── index.html -| ├── main.js -| └── style.css -└── test - └── data.spec.js - -directory: 7 file: 20 -``` - -### `src/index.html` - -Como en el proyecto anterior, existe un archivo `index.html`. Como ya sabes, -acá va la página que se mostrará al usuario. También nos sirve para indicar -qué scripts se usarán y unir todo lo que hemos hecho. - -### `src/main.js` - -Recomendamos usar `src/main.js` para todo tu código que tenga que ver con -mostrar los datos en la pantalla. Con esto nos referimos básicamente a la -interacción con el DOM. Operaciones como creación de nodos, registro de -manejadores de eventos (_event listeners_ o _event handlers_), .... - -Esta no es la única forma de dividir tu código, puedes usar más archivos y -carpetas, siempre y cuando la estructura sea clara para tus compañeras. - -En este archivo encontrarás una serie de _imports_ _comentados_. Para _cargar_ -las diferentes fuentes de datos tendrás que _descomentar_ la línea -correspondiente. - -Por ejemplo, si "descomentamos" la siguiente línea: - -```js -// import data from './data/lol/lol.js'; -``` - -La línea quedaría así: - -```js -import data from './data/lol/lol.js'; -``` - -Y ahora tendríamos la variable `data` disponible en el script `src/main.js`. - -### `src/data.js` - -El corazón de este proyecto es la manipulación de datos a través de arreglos -y objetos. - -Te recomendamos que este archivo contenga toda la funcionalidad que corresponda -a obtener, procesar y manipular datos (tus funciones). Por ejemplo: - -* `filterData(data, condition)`: esta función `filter` o filtrar recibiría la - data, y nos retornaría aquellos datos que sí cumplan con la condición. - -* `sortData(data, sortBy, sortOrder)`: esta función `sort` u ordenar - recibe tres parámetros. - El primer parámetro, `data`, nos entrega los datos. - El segundo parámetro, `sortBy`, nos dice con respecto a cuál de los campos de - la data se quiere ordenar. - El tercer parámetro, `sortOrder`, indica si se quiere ordenar de manera - ascendente o descendente. - -* `computeStats(data)`: la función `compute` o calcular, nos permitirá hacer - cálculos estadísticos básicos para ser mostrados de acuerdo a la data - proporcionada. - -Estos nombres de funciones y de parámetros son solamente referenciales, lo que -decidas depende de tu propia implementación. - -Estas funciones deben ser [_puras_](https://medium.com/laboratoria-developers/introducci%C3%B3n-a-la-programaci%C3%B3n-funcional-en-javascript-parte-2-funciones-puras-b99e08c2895d) -e independientes del DOM. Estas funciones serán después usadas desde el archivo -`src/main.js`, al cargar la página, y cada vez que el usuario interactúe (click, -filtrado, ordenado, ...). - -### `src/data` - -En esta carpeta están los datos de las diferentes fuentes. Encontrarás una -carpeta por cada fuente, y dentro de cada carpeta dos archivos: uno con la -extensión `.js` y otro `.json`. Ambos archivos contienen la misma data; la -diferencia es que el `.js` lo usaremos a través de una etiqueta ` diff --git a/src/main.js b/src/main.js index 71c59f2d..fad380e5 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,475 @@ -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 countries from "./data/countries/countries.js"; +import { + searchCountries, + generateAlphabet, + filterByContinents, + filterBySubregion, + filterByLanguages, + addPopulationDensity, + sortByPopulationDensity, + sortByPopulation, + sortByArea, +} from "./data.js"; -console.log(example, data); +const toggleButton=document.querySelector(".toggleButton"); +const section = document.querySelector(".countries-main"); +const countryInput = document.getElementById("country-input"); +const allLetters = document.querySelector(".active"); +const continentList = document.querySelectorAll(".continent-name-li"); +const languageList = document.querySelectorAll(".language-li"); +const subRegionsList = document.querySelectorAll('.subregion-li'); +const sortList = document.querySelectorAll('.sort-li'); +const sideBarAside=document.querySelector('.side-bar-aside'); +const containerTable=document.querySelector('.container-table'); +const mobileMenuContainer = document.querySelector('.mobile-menu-container'); + + +let asideOpen = false; + +// Función para abrir el aside +const openAside = () => { + sideBarAside.classList.toggle('show'); + mobileMenuContainer.classList.toggle('show'); + asideOpen = true; +}; + +// Función para cerrar el aside y mostrar la información seleccionada +const closeAsideAndShowInfo = () => { + sideBarAside.classList.remove('show'); + mobileMenuContainer.classList.remove('show'); + asideOpen = false; +}; + +toggleButton.addEventListener('click', () => { + if(asideOpen) { + closeAsideAndShowInfo(); + } else { + openAside(); + } +}); + +// Agregar el evento click a los elementos del aside +continentList.forEach((element) => { + element.addEventListener('click', closeAsideAndShowInfo); +}); + +languageList.forEach((element) => { + element.addEventListener('click', closeAsideAndShowInfo); +}); + +subRegionsList.forEach((element) => { + element.addEventListener('click', closeAsideAndShowInfo); +}); + +sortList.forEach((element) => { + element.addEventListener('click', closeAsideAndShowInfo); +}); + +// Esta función genera la section con los ul vacíos +const generateSection = (id, tittle, clearSection = "yes") => { + if (clearSection === "yes") section.innerHTML = ""; + containerTable.style.display='none'; + + const htmlSection = ` +
+

${tittle}

+ + `; + + section.insertAdjacentHTML("beforeend", htmlSection); + section.style.backgroundColor='rgba(245, 245, 245, 0.7)' + +}; + +// Esta función genera los li con los nombres de los países y sus respectivas banderas +const generateCountriesUl = (data, tittle) => { + const containerList = document.querySelector(`.common-countries-name-ul-${tittle}`); + + for (const country of data) { + const countryName = country.name.common; + const flagCountry = country.flags.png; + const html = ` +
  • flag country + ${countryName} + +
    • + `; + containerList.insertAdjacentHTML("beforeend", html); + + // Obtener todos los elementos
  • recién insertados + // const countryItems = containerList.querySelectorAll('.country-item-li'); + + // Agregar evento de clic a cada elemento
  • + // countryItems.forEach((countryItem) => { + // countryItem.addEventListener('click', function () { + // const infoContainer = this.querySelector('.country-info-container'); + // if(infoContainer.classList.contains('hidden')) { + // infoContainer.classList.remove('hidden'); // Mostrar la información + // } else { + // infoContainer.classList.add('hidden'); // Ocultar la información + // } + // }); + // }); + + // Otra opción para arreglar el problema + containerList.addEventListener('click', function (event) { + const clickedElement = event.target; + if (clickedElement.classList.contains('country-item-li')) { + const infoContainer = clickedElement.querySelector('.country-info-container'); + infoContainer.classList.toggle('hidden'); // Mostrar u ocultar la información del país + } + }); + } +}; + +// Esta función genera la section de los countries con sus respectivas li que contienen los nombres comunes y la imagen de la bandera +const generatesCountriesList = () => { + section.innerHTML = ""; + + for (let i = 65; i <= 90; i++) { + const sectionLetter = String.fromCharCode(i); + const sectionCountries = searchCountries( + countries.countries, + sectionLetter + ); + + // Section Creation + if (sectionCountries.length > 0) { + const sectionId = sectionLetter; + const sectionTittle = sectionLetter; + generateSection(sectionId, sectionTittle, "not"); + } + + // Countries list creation + generateCountriesUl(sectionCountries, sectionLetter); + } +}; + +// La función `clearCountriesList` borra todo el contenido presente en el elemento HTML identificado como section, dejándolo vacío. +const clearCountriesList = () => { + section.innerHTML = ""; +} + +// Al llamarla se genera la lista de los paises. +generatesCountriesList(); + +// en la siguiente linea modificada la data, es decir tiene incluido la densidad poblacional +addPopulationDensity(countries.countries); + +// caja de texto que controla el evento de entrada en el campo de búsqueda y genera dinámicamente secciones y listas de países basadas en el texto de búsqueda ingresado por el usuario. +countryInput.addEventListener("input", () => { + const countryInputText = countryInput.value; + const countryToSearch = + countryInputText.charAt(0).toUpperCase() + + countryInputText.slice(1).toLowerCase(); + clearCountriesList(); + const countriesFinded = searchCountries(countries.countries, countryToSearch); + if (countryInputText.length > 0 && countriesFinded.length === 0) { + clearCountriesList(); + section.textContent = "Country not found"; + } else { + const tittleLetter = countryInputText.charAt(0).toUpperCase(); + const idLetter = countryInputText.charAt(0).toUpperCase(); + generateSection(idLetter, tittleLetter); + generateCountriesUl(countriesFinded, tittleLetter); + } + if (countryInputText.length === 0) { + generatesCountriesList(); + } +}); + +allLetters.addEventListener('click',() => { + generatesCountriesList(); +}) + +// Generar elementos del alfabeto y agregar controladores de eventos +const alphabet = generateAlphabet(); +const alphabetContainer = document.querySelector(".alphabet-list"); + + +// Genera la barra de navegación por letras +alphabet.forEach((letter) => { + const htmlAlphabetList = `
  • ${letter}
    • `; + alphabetContainer.insertAdjacentHTML("beforeend", htmlAlphabetList); +}); + +const alphabetList = document.querySelectorAll(".letter"); + +alphabetList.forEach((letter) => { + letter.addEventListener("click", () => { + const actualLetter = letter.getAttribute("id"); + const actualTittle = letter.getAttribute("id"); + handleLetterClick(actualLetter, actualTittle); + }); +}); + +const handleLetterClick = (actualLetter, actualTittle) => { + const letterCountriesList = searchCountries(countries.countries, actualLetter); + generateSection(actualLetter, actualTittle); + generateCountriesUl(letterCountriesList, actualLetter); +}; + +languageList.forEach((language) => { + language.addEventListener("click", () => { + const actualLanguage = language.getAttribute("id"); + const actualTittle = language.getAttribute("tittle"); + handleLanguageClick(actualLanguage, actualTittle); + }); +}); + +const handleLanguageClick = (actualLanguage, actualTittle) => { + const languageCountriesList = filterByLanguages(countries.countries, actualLanguage); + generateSection(actualLanguage, actualTittle); + generateCountriesUl(languageCountriesList, actualLanguage); +}; + +continentList.forEach((continent) => { + continent.addEventListener("click", () => { + const actualContinent = continent.getAttribute("id"); + const actualTittle = continent.getAttribute("tittle"); + handleContinentClick(actualContinent, actualTittle); + }); +}); + +const handleContinentClick = (actualContinent, actualTittle) => { + const continentCountriesList = filterByContinents(countries.countries, actualContinent); + generateSection(actualContinent, actualTittle); + generateCountriesUl(continentCountriesList, actualContinent); +}; + +subRegionsList.forEach((subregion) => { + subregion.addEventListener('click',() => { + // const actualId=subregion.getAttribute('id'); + const actualSubRegion = subregion.getAttribute('id'); + const actualTittle = subregion.getAttribute('tittle'); + handleSubRegionClick(actualSubRegion,actualTittle); + }) +}) + +let sortOrderType; + +const handleSubRegionClick = (actualSubRegion,actualTittle) => { + const subRegionsCountriesList = filterBySubregion(countries.countries,actualTittle); + // console.log(subRegionsCountriesList); + generateSection(actualSubRegion,actualTittle); + generateCountriesUl(subRegionsCountriesList,actualSubRegion); +} + +let actualFilter; +let actualTittle; + + +window.addEventListener("load", () => { + + sortList.forEach((sortBy) => { + sortBy.addEventListener('click',() => { + actualFilter = sortBy.getAttribute('id'); + actualTittle = sortBy.getAttribute('tittle'); + handleFilterClick(actualFilter,actualTittle); + }) + }); + + const handleFilterClick = (actualFilter,actualTittle) => { + containerTable.innerHTML = ''; + let countriesSortBy; + sortOrderType = 1; + switch (actualFilter) { + case "population": { + countriesSortBy = sortByPopulation(countries, 1) + break; + } + case "area": { + countriesSortBy = sortByArea(countries, 1) + break; + } + case "populationDensity": { + countriesSortBy = sortByPopulationDensity(countries, 1) + break; + } + } + + generateTableForSortedData(countriesSortBy,actualFilter,actualTittle); + } + + const generateTableForSortedData = (data, filterKind, filterTitle) => { + section.innerHTML=''; + + const htmlTittleTable= + `
    +

    Countries sorted by ${filterTitle}

    + icon-sort +
    +
    +
    Country
    +
    ${filterTitle}
    +
    `; + + + containerTable.insertAdjacentHTML("beforeend", htmlTittleTable); + containerTable.style.display='block'; + + // Se obtiene la referencia del icono de la flecha + const iconArrow = document.querySelector(".icon-arrow"); + + let countriesSortedBy + + + // Se agrega el evento al icono de la flecha + + iconArrow.addEventListener('click', () => { + containerTable.innerHTML = ''; + sortOrderType = sortOrderType * -1 + switch (filterKind) { + case "area": { + countriesSortedBy = sortByArea(countries, sortOrderType); + break; + } + case "population": { + countriesSortedBy = sortByPopulation(countries, sortOrderType); + break; + } + case "populationDensity": { + countriesSortedBy = sortByPopulationDensity(countries, sortOrderType); + break; + } + } + generateTableForSortedData(countriesSortedBy,filterKind,actualTittle); + }); + + data.forEach((country) => { + const filterVarArea = country.area; + const filterVarPopulation = country.population; + const filterVarPopulationDensity = country.populationDensity; + const countryName = country.name.common; + const flagCountry = country.flags.png; + + let filterVar; + + switch (filterKind) { + case "area": { + filterVar = filterVarArea + break; + } + case "population": { + filterVar = filterVarPopulation + break; + } + case "populationDensity": { + filterVar = filterVarPopulationDensity + break; + } + } + + const htmlRowTable =` +
    +
    + +
    +
    ${filterVar}
    +
    ` + containerTable.insertAdjacentHTML("beforeend", htmlRowTable); + }); + }; +}) + +/////////////////////////////////////////////////////////////////////// + +///////////// Test para los filtros /////////////// + +// let countriesSortedByPopulationUp; + +// buttonSortPopulationUp.addEventListener('click',() => { +// const filterKind = 'population'; +// countriesSortedByPopulationUp = sortByPopulation(countries, 1); +// generateTableForSortedData(countriesSortedByPopulationUp,filterKind); +// }); + +// countriesSortedByPopulationUp = sortByPopulation(countries, 1); +// console.log(countriesSortedByPopulationUp); + +// let countriesSortedByAreaUp; + +// buttonSortPopulationUp.addEventListener('click',() => { +// const filterKind = 'area'; +// countriesSortedByAreaUp = sortByArea(countries, 1); +// generateTableForSortedData(countriesSortedByAreaUp,filterKind); +// }); + + + +// const dataCountries=countries.countries; + +// const filterCountriesByContinent=(data,continent)=>{ +// data.countries.filter(country=>country.continents.includes(continent)); +// } +// const testFilter=countries.countries.filter(country=>{ +// country.continents==="America"}) + +// console.log(filterCountriesByContinent(countries,'America')); + + +// const countriesOfAmerica=filterCountriesByContinent(countries.countries,"America"); +// console.log(countriesOfAmerica); + +// const countriesByG = filterByLetter(countries.countries, "G"); +// console.log(countriesByG); + +// const countriesSortedByPopulationDown = sortByPopulation(countries, -1); +// console.log("Sorted by population down"); +// console.log(countriesSortedByPopulationDown); + +// const countriesSortedByPopulationUp = sortByPopulation(countries, 1); +// console.log("Sorted by population up"); +// console.log(countriesSortedByPopulationUp); + +// const countruiessortedByAreaUp = sortByArea(countries, 1); +// console.log("Sorted by area up"); +// console.log(countruiessortedByAreaUp); + +// const countruiessortedByAreaDown = sortByArea(countries, -1); +// console.log("Sorted by area down"); +// console.log(countruiessortedByAreaDown); + +// console.log("Filter Asia countries:"); +// console.log(filterByContinents(countries, "America")); + +// console.log("Filter countries by subregion Eastern Asia"); +// console.log(filterBySubregion(countries.countries, "Eastern Asia")); + +// console.log("Filter countries by subregion Western Europe"); +// console.log(filterBySubregion(countries, "Western Europe")); + +//Testing filtering by language +// console.log("Filter countries spanish language:"); +// console.log(filterByLanguages(countries, "spa")); + +// console.log("Filter countries Portuguese language"); +// console.log(filterByLanguages(countries, "por")); + +// console.log("Filter by population density up"); +// console.log(sortByPopulation(countries, 1)); + +// console.log("Filter by population density down"); +// console.log(sortByPopulation(countries, -1)); + +// const testPopDensityAmerica=averagePopulationDensityByContinent(countries.countries,"America"); +// console.log(testPopDensityAmerica); + +// const tttt=filterPopulationDensityByContinent(countries.countries,"America"); +// console.log(tttt); +//////////////// aque terminan pruebas de filtros ////////////////// \ No newline at end of file diff --git a/src/style.css b/src/style.css index e69de29b..d9dcc89f 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,701 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + font-family: sans-serif; + line-height: 1.4; + background-image: url(./images/pexels-monstera-7412094.jpg); + background-size: 100%; + background-position: center; + background-attachment: fixed; + margin: 2px 2px; +} + +.toggleButton{ + border: none; + background-color: rgba(245, 245, 245, 0.1); + position: absolute; + top:10px; + left:10px; + display: none; +} + +.toggleButton:hover{ + cursor: pointer; +} + +header{ + display: grid; + grid-template-columns: 1fr; + background-color: rgba(245, 245, 245, 0.6); + position:relative; + align-items: center; + text-align: center; + font-size: xx-large; + font-weight: bolder; + padding: 15px; + border-radius: 10px; + margin-bottom: 15px; +} + +.title-heading { + font-family: stoke; + font-style: normal; + font-weight: 400; + font-size: 40px; + line-height: 50px; + text-align: center; + color: #000000; + margin: 50px auto; + padding: 10px; + background-color: #ffffff; + width: 200px; + border-radius: 10px; +} + +.search-section { + border: none; + width: 200px; + height: 30px; + position: absolute; + top:10px; + right: 5px; +} + +ul.alphabet-list { + display: flex; + list-style: none; + background-color: #ffffff; + width: 60%; + justify-content: space-evenly; /*reparte el espacio equitativamente */ + padding: 10px; +} + +#country-input { + position: absolute; + top: 10px; + right: 5px; + background-image: url("./images/search-icon.png"); /* Add a search icon to input */ + background-position: 10px 10px; /*Position the search icon */ + background-size: 25px; + background-repeat: no-repeat; /* Do not repeat the icon image */ + width: 200px; /* Full-width */ + font-size: 16px; /* Increase font-size */ + padding: 12px 20px 12px 40px; /* Add some padding */ + border: 1px solid #ddd; /* Add a grey border */ + margin-bottom: 12px; /* Add some space below the input */ + margin: 5px, auto; + border-radius: 5px; +} + +.row { + display: flex; + grid-template-columns: 4fr 1fr; + margin: 10px 100px; + gap: 75px; + margin-bottom: 60px; + align-items: self-start; + justify-content: space-between; +} + +.countries-main { + border-radius: 10px; + background-color: #ffffff; + margin-top: 40px; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + gap: 30px; +} + +.countries-table{ + background-color: #ffffff; + margin-top: 40px; + display: block; + align-items: center; + gap: 30px; + +} + +#container_Table{ + background-color: rgba(245, 245, 245, 0.8); +} + +.container-table { + grid-row: 2 / span 3; + background-color: rgba(245, 245, 245, 0.8); + border-radius: 1rem; +} + +.table-tittle{ + display: flex; + justify-content: center; + align-items: center; + font-size: larger; + font-weight: bold; +} + +.table-row { + padding: 0.5rem 4rem; + display: grid; + grid-template-columns: 2fr 1fr; + column-gap: 50px; + + align-items: center; + border-bottom: 1px solid #eee; +} + +.inline-list { + display: inline; + padding-left: 0; +} + +.inline-list li { + display: inline; + margin-right: 10px; +} + +.alphabet-section { + background-color: #ffffff; + width: 70%; +} + +h3 { + margin:2px 10px; + padding: 0; + font-family: stoke; + font-size: x-large; +} + +ul#common-countries { + list-style: none; + column-count: 2; + padding: 0px 20px 20px 20px; + margin: 0px 20px 20px 20px; +} + +ul.common-countries { + list-style: none; + column-count: 2; + padding: 0px 20px 20px 20px; + margin: 0px 20px 20px 20px; +} + +li:hover { + cursor: pointer; +} + +li.country-item-li { + margin: 5px; + display: block; + background-color: rgba(245, 245, 245, 0.8); + padding: 12px; /* Add some padding */ + text-decoration: none; /* Remove default text underline */ + font-size: 18px; /* Increase the font-size */ + color: black; /* Add a black text color */ +} + +li a { + margin-top: -1px; /* Prevent double borders */ + padding: 12px; /* Add some padding */ + text-decoration: none; /* Remove default text underline */ + font-size: 16px; /* Increase the font-size */ + color: #000000; +} + +.container-list-aside{ + padding: 0; +} + +.dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + margin-left:60px; + margin-top: -20px; + padding: 2px 5px 5px 5px; + z-index: 1; +} + +.dropdown:hover .dropdown-content { + display: block; +} + +@media screen and (max-width: 600px) { + .toggleButton{ + border: none; + background-color: rgba(245, 245, 245, 0.1); + position: absolute; + top:20px; + left:10px; + display: block; + } + + .title-heading { + font-size: x-large; + height: 50px; + margin: 10px auto; + background-color: #ffffff; + } + + #country-input { + top: 10px; + right: 5px; + background-position: 5px 12px; /*Position the search icon */ + background-size: 15px; + width: 110px; /* Full-width */ + font-size: 12px; /* Increase font-size */ + padding: 12px 10px 6px 20px; /* Add some padding */ + margin-bottom: 12px; /* Add some space below the input */ + margin: 2px, auto; + } + + .countries-container { + justify-content: center; + } + + ul#common-countries { + list-style: none; + column-count: 1; + padding: 0px 2px 2px 2px; + margin: 0px 3px 30px 3px; + } + + h3 { + margin: 0; + padding-left: 10px; + font-size: 24px; + } + + li.country-item-li { + margin: 5px; + display: block; + background-color: #f6f6f6; + padding: 12px; /* Add some padding */ + text-decoration: none; /* Remove default text underline */ + font-size: 16px; /* Increase the font-size */ + color: black; /* Add a black text color */ + } + + .countries-main { + margin-top: 0; + background-color: #f6f6f6; + } + + .search-section { + border: none; + width: 100px; + height: 20px; + position: absolute; + top:10px; + right: 5px; + } + + ul.alphabet-list { + display: flex; + list-style: none; + background-color: #ffffff; + font-size: 12px; + width: 80%; + justify-content: space-evenly; /*reparte el espacio equitativamente */ + /* align-items: center; */ + padding: 5px; + } + + .alphabet-section { + background-color: #ffffff; + width: 70%; + } + + /* .alphabet-item { + z-index: 4; + } */ + + .row { + display: flex; + grid-template-columns: 4fr 0.5fr; + margin: 10px 30px; + gap: 75px; + margin-bottom: 60px; + align-items: self-start; + justify-content: space-between; + } + + .col1{ + padding-left: 5px; + } + + .col2-content{ + font-size: 12px; + } + + ul.common-countries{ + list-style: none; + column-count: 1; + padding: 0px 2px 2px 2px; + margin: 0px 3px 30px 3px; + } + + li a { + margin-top: -1px; /* Prevent double borders */ + padding: 12px; /* Add some padding */ + text-decoration: none; /* Remove default text underline */ + font-size: 12px; /* Increase the font-size */ + color: #000000; + } + + .table-tittle{ + font-size: 10px; + } + + .sort-img{ + width: 20px; + } + + .flag-country{ + width: 20px; + } + + .table-row { + padding: 0; + display: grid; + grid-template-columns: 2fr 1fr; + column-gap: 20px; + align-items: center; + border-bottom: 1px solid #eee; + } + + .table-row { + padding: 5px; + display: grid; + grid-template-columns: 2fr 0.5fr; + column-gap: 20px; + align-items: center; + border-bottom: 1px solid #eee; + } + + .search-section { + border: none; + width: 70%; + height: 30px; + opacity: 60%; + display: block; + margin: 0 auto; + z-index: 2; + } + + .side-bar-aside { + position: fixed; + top: 0; + left: -100%; + width: 80%; + height: 100%; + background: #000; + color: #fff; + transition: left 0.3s ease-in-out; + z-index: 9999; + display: none; + } + + .side-bar-aside.show { + position: relative; + left: 0; + background-color: #353740; + width: 200px; + height: 560px; + margin-top: 0; + overflow-y: scroll; + overflow-x: scroll; + padding: 20px; + border: 1px solid #ccc; + font-family: Georgia, 'Times New Roman', Times, serif; + z-index: 1; + } + + .mobile-menu-container { + position: fixed; + top: 0; + left: 0; + width: 200px; + height: 100%; + overflow: hidden; + z-index: 3; + } + + .mobile-menu-container.show { + overflow: auto; + } + + .show { + display: block; + } + + ul.dropdown-content { + background-color: #353740; + color: #eee; + display: none; + position: absolute; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + margin-left:30px; + padding: 2px 20px 20px 20px; + margin-top: -20px; + z-index: 1; + background-color: rgba(0, 0, 0, 0.7) + } + + .icon-arrow { + z-index: 2; + } + + .hidden { + display: none; + z-index: 2; + } +} + +@media screen and (min-width: 600px) and (max-width: 1000px) { + + .toggleButton{ + border: none; + background-color: rgba(245, 245, 245, 0.1); + position: absolute; + top:20px; + left:10px; + display: block; + } + + .tittle-header{ + font-size: xx-large; + } + + #country-input { + position: absolute; + top: 10px; + right: 5px; + background-position: 3px 12px; /*Position the search icon */ + background-size: 15px; + width: 150px; /* Full-width */ + font-size: 15px; /* Increase font-size */ + padding: 12px 10px 6px 20px; /* Add some padding */ + margin-bottom: 12px; /* Add some space below the input */ + margin: 2px, auto; + } + + .alphabet-section { + background-color: #ffffff; + width: 60%; + } + + ul.alphabet-list { + display: flex; + list-style: none; + background-color: #ffffff; + font-size: 16px; + width: 50%; + justify-content: space-evenly; /*reparte el espacio equitativamente */ + padding: 5px; + z-index: 2; + } + + .countries-main { + margin-top: 0; + background-color: #f6f6f6; + justify-content: center; + } + + .country-item-li { + margin-left: 1px; + padding-left: 1px; + } + + .search-section { + display: flex; + border: none; + width: 70%px; + height: 30px; + opacity: 60%; + display: block; + align-items: center; + z-index: 2; + } + + .alphabet-section { + background-color: #ffffff; + width: 70%; + } + + h3 { + font-family: stoke; + font-size: 24px; + margin-top: 10px; + margin-bottom: 10px; + } + + ul#common-countries { + list-style: none; + column-count: 1; + padding: 0px 2px 2px 2px; + margin: 0px 3px 30px 3px; + } + + li.country-item-li { + margin: 5px; + display: block; + background-color: #f6f6f6; + text-decoration: none; /* Remove default text underline */ + font-size: 12px; /* Increase the font-size */ + color: black; /* Add a black text color */ + } + + li a { + margin-top: -1px; /* Prevent double borders */ + /* padding: 12px; Add some padding */ + text-decoration: none; /* Remove default text underline */ + font-size: 16px; /* Increase the font-size */ + color: #000000; + } + + li { + margin-bottom: 10px; + margin-top: 10px; + } + + ul.dropdown-content { + background-color: #353740; + color: #eee; + display: none; + position: absolute; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + margin-left:60px; + padding: 2px 20px 20px 20px; + margin-top: -20px; + z-index: 1; + background-color: rgba(0, 0, 0, 0.7) + } + + .search-section { + border: none; + width: 70%; + height: 30px; + opacity: 60%; + display: block; + margin: 0 auto; + } + + .mobile-menu-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + z-index: 1; + } + + .side-bar-aside { + position: fixed; + top: 0; + left: -100%; + width: 80%; + height: 100%; + background: #000; + color: #fff; + transition: left 0.3s ease-in-out; + z-index: 9999; + display: none; + } + + .side-bar-aside.show { + left: 0; + background-color: #353740; + width: fit-content; + height: 560px; + margin-top: 0; + overflow-y: scroll; + overflow-x: scroll; + padding: 20px; + border: 1px solid #ccc; + font-family: Georgia, 'Times New Roman', Times, serif; + } + + .mobile-menu-container.show { + overflow: auto; + } + + .show { + display: block; + } + + .icon-arrow { + z-index: 2; + } + + .hidden { + display: none; + z-index: 2; + } +} + +nav.alphabet-navigation { + display: flex; + justify-content: center; + margin-top: 30px; +} + +ul.alphabet-list li.active { + color: #22a6f5; + text-decoration: underline; +} + +.alphabet-item:hover { + text-decoration: underline; +} + +article.countries-container { + width: 100%; + margin-bottom: 0; +} + +aside.side-bar-aside { + flex: 0 0 auto; + background-color: rgba(245, 245, 245, 0.8); + padding: 0 40px; + margin-top: 40px; + border-radius: 10px; + padding: 2px 20px 20px 20px; +} + +ul.container-side-bar-ul { + column-count: 1; + list-style: none; +} + +ol.container-continent-ol { + list-style: none; +} + +ol.container-languages-ol { + list-style: none; +} + +.container-list-aside { + list-style: none; +} +.subregion-li{ + list-style: none; +} + +.icon-arrow:hover { + cursor: pointer; +} + +.hidden { + display: none; +} diff --git a/test/data.spec.js b/test/data.spec.js index 09b1f23f..34125c2a 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,23 +1,506 @@ -import { example, anotherExample } from '../src/data.js'; +// import { example, anotherExample } from '../src/data.js'; +import { + searchCountries, + generateAlphabet, + filterByContinents, + filterBySubregion, + filterByLanguages, + // sortByArea, + addPopulationDensity, + // sortByPopulationDensity, + // averagePopulationDensityByContinent, + // filterPopulationDensityByContinent +} from "../src/data.js"; +//crear una const que sera igual a un objeto -describe('example', () => { - it('is a function', () => { - expect(typeof example).toBe('function'); +const countries = { "countries" : [ + { + "name": { + "common": "Guatemala", + "official": "Republic of Guatemala" + }, + "tld": [ + ".gt" + ], + "independent": true, + "capital": [ + "Guatemala City" + ], + "subregion": "Central America", + "languages": { + "spa": "Spanish" + }, + "borders": [ + "BLZ", + "SLV", + "HND", + "MEX" + ], + "area": 108889, + "flag": "🇬🇹", + "population": 16858333, + "gini": { + "2014": 48.3 + }, + "fifa": "GUA", + "timezones": [ + "UTC-06:00" + ], + "continents": [ + "America" + ], + "flags": { + "png": "https://flagcdn.com/w320/gt.png", + "svg": "https://flagcdn.com/gt.svg", + "alt": "The flag of Guatemala is composed of three equal vertical bands of light blue, white and light blue, with the national coat of arms centered in the white band." + } + }, + { + "name": { + "common": "Singapore", + "official": "Republic of Singapore" + }, + "tld": [ + ".sg", + ".新加坡", + ".சிங்கப்பூர்" + ], + "independent": true, + "capital": [ + "Singapore" + ], + "subregion": "South-Eastern Asia", + "languages": { + "zho": "Chinese", + "eng": "English", + "msa": "Malay", + "tam": "Tamil" + }, + "area": 710, + "flag": "🇸🇬", + "population": 5685807, + "fifa": "SIN", + "timezones": [ + "UTC+08:00" + ], + "continents": [ + "Asia" + ], + "flags": { + "png": "https://flagcdn.com/w320/sg.png", + "svg": "https://flagcdn.com/sg.svg", + "alt": "The flag of Singapore is composed of two equal horizontal bands of red and white. On the hoist side of the red band is a fly-side facing white crescent which partially encloses five small five-pointed white stars arranged in the shape of a pentagon." + } + }, + { + "name": { + "common": "Bosnia and Herzegovina", + "official": "Bosnia and Herzegovina" + }, + "tld": [ + ".ba" + ], + "independent": true, + "capital": [ + "Sarajevo" + ], + "subregion": "Southeast Europe", + "languages": { + "bos": "Bosnian", + "hrv": "Croatian", + "srp": "Serbian" + }, + "borders": [ + "HRV", + "MNE", + "SRB" + ], + "area": 51209, + "flag": "🇧🇦", + "population": 3280815, + "gini": { + "2011": 33 + }, + "fifa": "BIH", + "timezones": [ + "UTC+01:00" + ], + "continents": [ + "Europe" + ], + "flags": { + "png": "https://flagcdn.com/w320/ba.png", + "svg": "https://flagcdn.com/ba.svg", + "alt": "The flag of Bosnia and Herzegovina has a blue field, at the center of which is a large yellow hoist-side facing right-angled triangle that is based on the top edge and spans the height of the field. Adjacent to the hypotenuse of this triangle are nine adjoining five-pointed white stars with the top and bottom stars cut in half by the edges of the field." + } + }, + { + "name": { + "common": "Maldives", + "official": "Republic of the Maldives" + }, + "tld": [ + ".mv" + ], + "independent": true, + "capital": [ + "Malé" + ], + "subregion": "Southern Asia", + "languages": { + "div": "Maldivian" + }, + "area": 300, + "flag": "🇲🇻", + "population": 540542, + "gini": { + "2016": 31.3 + }, + "fifa": "MDV", + "timezones": [ + "UTC+05:00" + ], + "continents": [ + "Asia" + ], + "flags": { + "png": "https://flagcdn.com/w320/mv.png", + "svg": "https://flagcdn.com/mv.svg", + "alt": "The flag of Maldives has a red field, at the center of which is a large green rectangle bearing a fly-side facing white crescent." + } + }, + { + "name": { + "common": "Latvia", + "official": "Republic of Latvia" + }, + "tld": [ + ".lv" + ], + "independent": true, + "capital": [ + "Riga" + ], + "subregion": "Northern Europe", + "languages": { + "lav": "Latvian" + }, + "borders": [ + "BLR", + "EST", + "LTU", + "RUS" + ], + "area": 64559, + "flag": "🇱🇻", + "population": 1901548, + "gini": { + "2018": 35.1 + }, + "fifa": "LVA", + "timezones": [ + "UTC+02:00" + ], + "continents": [ + "Europe" + ], + "flags": { + "png": "https://flagcdn.com/w320/lv.png", + "svg": "https://flagcdn.com/lv.svg", + "alt": "The flag of Latvia has a carmine-red field with a thin white horizontal band across the middle of the field." + } + }, + { + "name": { + "common": "Greece", + "official": "Hellenic Republic" + }, + "tld": [ + ".gr" + ], + "independent": true, + "capital": [ + "Athens" + ], + "subregion": "Southern Europe", + "languages": { + "ell": "Greek" + }, + "borders": [ + "ALB", + "BGR", + "TUR", + "MKD" + ], + "area": 131990, + "flag": "🇬🇷", + "population": 10715549, + "gini": { + "2018": 32.9 + }, + "fifa": "GRE", + "timezones": [ + "UTC+02:00" + ], + "continents": [ + "Europe" + ], + "flags": { + "png": "https://flagcdn.com/w320/gr.png", + "svg": "https://flagcdn.com/gr.svg", + "alt": "The flag of Greece is composed of nine equal horizontal bands of blue alternating with white. A blue square bearing a white cross is superimposed in the canton." + } + }, + { + "name": { + "common": "Puerto Rico", + "official": "Commonwealth of Puerto Rico" + }, + "tld": [ + ".pr" + ], + "independent": false, + "capital": [ + "San Juan" + ], + "subregion": "Caribbean", + "languages": { + "eng": "English", + "spa": "Spanish" + }, + "area": 8870, + "flag": "🇵🇷", + "population": 3194034, + "fifa": "PUR", + "timezones": [ + "UTC-04:00" + ], + "continents": [ + "America" + ], + "flags": { + "png": "https://flagcdn.com/w320/pr.png", + "svg": "https://flagcdn.com/pr.svg" + } + }, +]} + +const countriesAmerica = [ + { + "name": { + "common": "Guatemala", + "official": "Republic of Guatemala" + }, + "tld": [ + ".gt" + ], + "independent": true, + "capital": [ + "Guatemala City" + ], + "subregion": "Central America", + "languages": { + "spa": "Spanish" + }, + "borders": [ + "BLZ", + "SLV", + "HND", + "MEX" + ], + "area": 108889, + "flag": "🇬🇹", + "population": 16858333, + "gini": { + "2014": 48.3 + }, + "fifa": "GUA", + "timezones": [ + "UTC-06:00" + ], + "continents": [ + "America" + ], + "flags": { + "png": "https://flagcdn.com/w320/gt.png", + "svg": "https://flagcdn.com/gt.svg", + "alt": "The flag of Guatemala is composed of three equal vertical bands of light blue, white and light blue, with the national coat of arms centered in the white band." + } + }, + { + "name": { + "common": "Puerto Rico", + "official": "Commonwealth of Puerto Rico" + }, + "tld": [ + ".pr" + ], + "independent": false, + "capital": [ + "San Juan" + ], + "subregion": "Caribbean", + "languages": { + "eng": "English", + "spa": "Spanish" + }, + "area": 8870, + "flag": "🇵🇷", + "population": 3194034, + "fifa": "PUR", + "timezones": [ + "UTC-04:00" + ], + "continents": [ + "America" + ], + "flags": { + "png": "https://flagcdn.com/w320/pr.png", + "svg": "https://flagcdn.com/pr.svg" + } + }, +]; + +const countriesCaribbean = [ + { + "name": { + "common": "Puerto Rico", + "official": "Commonwealth of Puerto Rico" + }, + "tld": [ + ".pr" + ], + "independent": false, + "capital": [ + "San Juan" + ], + "subregion": "Caribbean", + "languages": { + "eng": "English", + "spa": "Spanish" + }, + "area": 8870, + "flag": "🇵🇷", + "population": 3194034, + "fifa": "PUR", + "timezones": [ + "UTC-04:00" + ], + "continents": [ + "America" + ], + "flags": { + "png": "https://flagcdn.com/w320/pr.png", + "svg": "https://flagcdn.com/pr.svg" + } + }, +]; + + +const TEST_TEXT_ALPHABET = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] + +// Test function `searchCountries` +describe('searchCountries', () => { + it("Should return an object with a country information", () => { + expect(typeof searchCountries(countries.countries, "Si")).toEqual("object"); + }); +}); + +// Test function `generateAlphabet` +describe('generateAlphabet', () => { + it('Should return an array of alphabet', () => { + expect(generateAlphabet()).toEqual(TEST_TEXT_ALPHABET) + }) +}); + +// Test function `filterByContinents` +describe('FilterByContinents("America")', () => { + it("Should return an object with an array of countries that belong America", () => { + expect(typeof filterByContinents(countries.countries, "America")).toBe("object"); }); - it('returns `example`', () => { - expect(example()).toBe('example'); + it ("Should return empty array",() => { + expect(filterByContinents(countries.countries,"Africa")).toEqual([]) }); }); +test('filterByContinents should return countries from the specified continent',() => { + const continent = 'America'; + const result = filterByContinents(countries.countries,continent); -describe('anotherExample', () => { - it('is a function', () => { - expect(typeof anotherExample).toBe('function'); + expect(result).toEqual(countriesAmerica); +}); + +// Test function `filterBySubregion` +describe('filterBySubregion("Caribbean")', () => { + it("Should return an object", () => { + expect(typeof filterBySubregion(countries.countries, "Caribbean")).toBe("object"); }); - it('returns `anotherExample`', () => { - expect(anotherExample()).toBe('OMG'); + const result = filterBySubregion(countries.countries,'Caribbean'); + expect(result).toEqual(countriesCaribbean); + + it("Should return an empty array for non-existing subregion", () => { + expect(filterBySubregion(countries.countries, "NonExistingSubregion")).toEqual([]); }); }); + +// Test function `filterByLanguages` +describe('filterByLanguages', () => { + it("Should return an object", () => { + expect(typeof filterByLanguages(countries.countries, "spa")).toBe("object"); + }); +}); + +// Test function `sortByPopulation` +describe('addPopulationDensity', () => { + it("Should return an object", () => { + expect(typeof addPopulationDensity(countries.countries)).toBe("object"); + }); +}); + + +//////////////////////// Examples ///////////////////////////// +// describe("generateCountriesList result should be a function", () => { +// it("is a function", () => { +// expect(typeof generateCountriesList).toBe("function"); +// }); +// }); + +// describe("generateCountriesList", () => { +// it("Should return an array with countries names", () => { +// expect(generateCountriesList(countries)).toEqual( +// [ +// "Singapore", +// "Bosnia and Herzegovina", +// "Guatemala", +// "Latvia", +// "Maldives", +// 'Anguilla', +// ].sort() +// ); +// }); +// }); + + + +// describe('example', () => { +// it('is a function', () => { +// expect(typeof example).toBe('function'); +// }); + +// it('returns `example`', () => { +// expect(example()).toBe('example'); +// }); +// }); + +// describe('anotherExample', () => { +// it('is a function', () => { +// expect(typeof anotherExample).toBe('function'); +// }); + +// it('returns `anotherExample`', () => { +// expect(anotherExample()).toBe('OMG'); +// }); +// }); diff --git a/test/orderPopulation.spec.js b/test/orderPopulation.spec.js new file mode 100644 index 00000000..a13a4f58 --- /dev/null +++ b/test/orderPopulation.spec.js @@ -0,0 +1,103 @@ +import { sortByPopulation +} from "../src/data.js"; + +const countries = { "countries" : [ + { + "name": { + "common": "Guatemala", + "official": "Republic of Guatemala" + }, + "population": 16858333, + + }, + { + "name": { + "common": "Singapore", + "official": "Republic of Singapore" + }, + "population": 5685807, + }, + { + "name": { + "common": "Bosnia and Herzegovina", + "official": "Bosnia and Herzegovina" + }, + "population": 3280815, + }, + { + "name": { + "common": "Maldives", + "official": "Republic of the Maldives" + }, + "population": 540542, + }, + { + "name": { + "common": "Latvia", + "official": "Republic of Latvia" + }, + "population": 1901548, + }, + { + "name": { + "common": "Puerto Rico", + "official": "Commonwealth of Puerto Rico" + }, + "population": 3194034, + }, +]} + + +const countriesSortByPopulation = [ + { + "name": { + "common": "Guatemala", + "official": "Republic of Guatemala" + }, + "population": 16858333, + + }, + { + "name": { + "common": "Singapore", + "official": "Republic of Singapore" + }, + "population": 5685807, + }, + { + "name": { + "common": "Bosnia and Herzegovina", + "official": "Bosnia and Herzegovina" + }, + "population": 3280815, + }, + { + "name": { + "common": "Puerto Rico", + "official": "Commonwealth of Puerto Rico" + }, + "population": 3194034, + }, + { + "name": { + "common": "Latvia", + "official": "Republic of Latvia" + }, + "population": 1901548, + }, + { + "name": { + "common": "Maldives", + "official": "Republic of the Maldives" + }, + "population": 540542, + }, +]; + +// Test sortByPopulation +test('sortByPopulation should return countries sorted in ascending order',() => { + const result = sortByPopulation(countries,-1); + expect(result).toEqual(countriesSortByPopulation); + expect(result).not.toHaveLength(7); + expect(result).toHaveLength(6); +}); \ No newline at end of file