Laboratoria · DianaJ-Dev · Jul 31, 2023 · Jul 31, 2023 · Jul 31, 2023 · Aug 1, 2023
diff --git a/src/Imagenes/Imagen principal.jpg b/src/Imagenes/Imagen principal.jpg
diff --git a/src/Imagenes/SALAR-DE-UYUNI-REVISTA-TIME.jpg b/src/Imagenes/SALAR-DE-UYUNI-REVISTA-TIME.jpg
diff --git a/src/Imagenes/imagen 3.jpg b/src/Imagenes/imagen 3.jpg
diff --git a/src/Imagenes/sudamerica.jpg b/src/Imagenes/sudamerica.jpg
diff --git a/src/data.js b/src/data.js
@@ -7,3 +7,5 @@ export const example = () => {
 export const anotherExample = () => {
   return 'OMG';
 };
+
+
diff --git a/src/data/countries/countries.js b/src/data/countries/countries.js
@@ -2675,9 +2675,9 @@ export default {
       "borders": [
         "BOL",
         "BRA",
-        "CHL",
-        "PRY",
-        "URY"
+        "CHI",
+        "PAR",
+        "URU"
       ],
       "area": 2780400,
       "flag": "🇦🇷",

diff --git a/src/index.html b/src/index.html
@@ -2,11 +2,32 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Data Lovers</title>
+    <title>Data Lovers </title>
     <link rel="stylesheet" href="style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Etiqueta para controlar la escala en dispositivos móviles -->
   </head>
-  <body>
-    <div id="root"></div>
+  <body> 
+    <h1>
+      <img src = "Imagenes/sudamerica.jpg" id="sudamerica">Cultura-travels</h1>
+    <header>
+      <form id="filtroForm"> <!--aplicar filtro a boton (paises limites)-->
+        <label for="nombrePais">Nombre de pais o idioma:</label>
+        <input type="text" id="input" name="input">
+        <label for="filtrar">Filtrar:</label>
+        <button id="limitantes" type="button">Países limitantes</button>
+        <button id="idioma" type="button">Idioma</button> 
+      </form>
+
+      <button id="button3">Calcula área total </button>
+      <button id="button1">Ordenar paises de la A a la Z</button>  
+    </header>  
+
+    <div id="root"> <!--principal de html para ser llamado en js-->
+    </div>
+
     <script src="main.js" type="module"></script>
+    <footer>
+    <p>Desarrollado Por: Diana Matamoros e Ysmari Mendoza</p>
+  </footer>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,118 @@
 import { example } from './data.js';
-// import data from './data/lol/lol.js';
-import data from './data/pokemon/pokemon.js';
-// import data from './data/rickandmorty/rickandmorty.js';
+import data from './data/countries/countries.js';
 
 console.log(example, data);
+
+const root = document.getElementById('root');
+
+//movimiento de las banderas 
+
+let contentRootInfo = '';
+for (let i = 0; i < data.countries.length; i++) {
+  if (data.countries[i].subregion === 'South America') {
+      const country = data.countries[i];
+      const languages = Object.values(country.languages).join(', ');
+
+      contentRootInfo += `<div class="bandera-container">
+          <div class="bandera-wrapper">
+              <img src="${country.flags.png}" class="Bandera" id="bandera-${i}">
+              <h4>${country.name.common}</h4> 
+          </div>
+          <div class="info-back">
+              <h4>${country.name.common}</h4>
+              <p>Población: ${country.population}</p>
+              <p>Área: ${country.area}</p>
+              <p>Países Frontera: ${country.borders}</p>
+              <p>Idiomas: ${languages}</p>
+          </div>
+      </div>`;
+  }
+}
+
+root.innerHTML=contentRootInfo;
+
+const banderaImages = document.querySelectorAll('.Bandera');
+
+banderaImages.forEach(image => {
+  const container = image.closest('.bandera-container');
+  const infoBack = container.querySelector('.info-back');
+
+  image.addEventListener('click', function () {
+    container.classList.toggle('show-info');
+    image.classList.toggle('rotate');
+  });
+
+  infoBack.addEventListener('click', function () {
+    container.classList.remove('show-info');
+    image.classList.remove('rotate');
+  });
+});
+
+//Boton de filtros paises limitantes.
+
+// Debemos llamar las funciones que vamos a uctilizar 
+const  btnLimites = document.getElementById('limitantes'); // El boton 
+
+btnLimites.addEventListener("click", function () { // Activo la funcion del botones
+  const inputPais = document.getElementById('input'); // Traigo el inpu que se creo para colocar el nombre 
+  let banderasLimitantes = ''; // Variable con cadena de texto vacia 
+  for (let i= 0; i<data.countries.length; i++) { // Este for es para que me busque la palabra que coloque en la data
+    if(data.countries[i].name.common== inputPais.value) { //Se hace el recorrido cuando sea el mismo nombre lo debe traer 
+      let borders = data.countries[i].borders // Creo una variable que sea igual a la data segun lo que se requiera 
+
+
+      for (let j= 0; j<borders.length; j++) {  // Este for me trae los bordes paises limites de cada pais 
+        for (let k= 0; k<data.countries.length; k++) {  // Este for me trae la imagen de la badera con el nombre 
+          if(borders[j] === data.countries[k].fifa) { // si los bordes son iguales a lo que tengo en la data me traiga imagenes
+              banderasLimitantes += `<div class="bandera-wrapper"> 
+              <img src="${data.countries[k].flags.png}" class="Bandera" 
+              <h4>${data.countries[k].name.common}</h4> 
+             </div>`;   
+          }
+        }
+      }
+    }
+  }
+  root.innerHTML = banderasLimitantes;
+  });
+
+// Boton de filtro Idioma 
+  const btnIdioma = document.getElementById('idioma')
+  let banderasByIdioma = '';
+
+  btnIdioma.addEventListener('click',function () {
+    const inputIdioma = document.getElementById('input');
+    for (let i=0; i<data.countries.length; i++){
+      let lenguajes = data.countries[i].languages;
+      for(const key in lenguajes) {
+        if(lenguajes[key]=== inputIdioma.value) {
+          banderasByIdioma += `<div class="bandera-wrapper"> 
+              <img src="${data.countries[i].flags.png}" class="Bandera" 
+              <h4>${data.countries[i].name.common}</h4> 
+             </div>`;
+        }
+      }    
+    }
+    root.innerHTML = banderasByIdioma;
+  })
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,177 @@
+body{
+    background-image:url('Imagenes/SALAR-DE-UYUNI-REVISTA-TIME.jpg');
+
+}
+
+h1{
+    display: flex; /* visualizar contenido  */
+    justify-content:center; /* se aplica a display: center para que el texto quede centrado*/
+    padding: 10px; 
+    background-color: #3ede2f; 
+    color: #f5eeee; /*Color de letra*/
+    margin: 40px;
+    }
+
+#sudamerica{ /* imagen que esta en el titulo*/
+    width: 60px;
+}
+
+#root{  /* todo lo del estilo cajon de banderas*/
+    width: 1200px; /* me trae el ancho del cajon*/
+    display: flex; /* me muestra las banderas distribuidas en toda la pagina */
+    flex-wrap: wrap; /* Permite que las banderas se denvuelvan en filas */
+    justify-content: space-between; /* Distribuye las filas horizontalmente */
+    padding: 30px; 
+    justify-content: center; /* Centra horizontalmente */
+
+}
+
+anside {                      /*botones */
+    padding: 300px;           /* Espaciado interno en la caja donde estan los botones*/  
+}
+
+anside button {               /* Estilos para los botones */
+    margin: 10px;           /* Margen izquierdo y derecho de los botones */
+    padding: 10px 15px;       /* Relleno interno de los botones */
+    cursor: pointer;          /* Cambia el cursor al pasar sobre los botones */   
+}
+
+
+footer {
+    text-align: center; /* Centra el contenido del pie de página */
+    background-color: #3ede2f ; /* Color de fondo del pie de página */
+    padding: 5px; /* Espaciado interno para el recuadro */
+    font-family: "arial", "helvetica", sans-serif; /* tipo de letra del pie de pagina */
+    color: #f5eeee;
+    margin: 40px;
+    font-size: 15px; /* cambia tamaño del letra de pagina */
+
+}
+
+.Bandera{  /*estilo de banderas */
+    transition: transform 0.5s ease-in-out;  /* Transición suave para la propiedad 'transform' en 0.5 segundos con efecto de aceleración suave */
+    cursor: pointer;
+    margin: 20PX;
+    width: 250PX;
+    height: 150PX;
+    font-size: 1000px;
+    z-index: 1; /* Establece un índice z para las banderas */
+} 
+
+.Bandera.rotate {
+    transform: rotateY(180deg);  /* Gira la imagen en el eje Y, creando un efecto de volteo */
+    overflow: hidden;           /* Oculta el contenido que se desborda del contenedor */
+    z-index: 1;                 /* Establece el índice z para controlar la superposición de elementos */
+
+}
+
+
+
+/* Consulta de medios para dispositivos móviles */
+@media (max-width: 767px) {
+    /* Estilos específicos para dispositivos móviles */
+    h1 {
+        font-size: 24px;
+        margin: 20px;
+    }
+
+    anside {
+        padding: 5px;
+    }
+
+    anside button {
+        margin: 5px 10px;
+        padding: 5px 10px;
+    }
+}
+
+.nombres {
+    color: aqua;
+}
+
+/* Estilos para el contenedor envolvente de la bandera */
+.bandera-wrapper {
+    display: flex;
+    flex-direction: column; 
+    align-items: center; 
+}
+
+/* Estilos para el formato de texto en la tarjeta trasera de información */
+.info-back{
+    white-space: normal ;  /* Controla cómo se manejan los espacios en blanco y saltos de línea */
+    word-break: break-all;  /* Controla cómo se rompen las palabras en caso de que excedan el ancho */
+}
+
+.bandera-container.show-info {
+    display: flex;
+    flex-direction: column; 
+    align-items: center; 
+    position: fixed;    /* Posición fija en la ventana del navegador */
+    top: 0;   /* Ubicación en la parte superior de la ventana */
+    left: 0;  /* Ubicación en el extremo izquierdo de la ventana */
+    width: 100%;   /* Ancho ocupa toda la ventana */
+    height: 100%;   /* Alto ocupa toda la ventana */
+    display: center; /* Utiliza el modelo de caja flexible */
+    justify-content: center;  /* Centra elementos horizontalmente */
+    align-items: center;   /* Centra elementos verticalmente */
+    background-color: rgba(0, 0, 0, 0.8); /* Fondo semitransparente para el efecto de superposición */
+    z-index: 9999;  /* Capa de apilamiento alta para mostrar encima de otros elementos */
+  }
+
+  .info-back {
+
+    height: 30%;  /*Alto de la tarjeta trasera en relación al contenedor envolvente */
+    width: 30%;   /* Ancho de la tarjeta trasera en relación al contenedor envolvente */
+    background-color: rgb(218, 243, 198);  /* Color de fondo de la tarjeta trasera */
+    border-radius: 5px; /* Borde redondeado para la tarjeta trasera */
+    display: none;  /* Oculta la tarjeta trasera por defecto */
+    opacity: 0;  /* Opacidad inicial de la tarjeta trasera (transparente) */
+    transform: rotateY(180deg) scale(0);  /* Volteo y escala para animación de entrada */
+    transition: opacity 1s ease-in-out, transform 1s ease-in-out, width 0.5s ease-in-out, height 0.5s ease-in-out;   /* Transiciones suaves para animaciones */
+    display: flex;  /* Utiliza el modelo de caja flexible para contenido interno */
+    flex-direction: column;   /* Alinea elementos verticalmente en una columna */
+    justify-content: 100%; /* Ajusta el ancho del texto al 100% del contenedor */
+    position: absolute; /* Posiciona el elemento de forma absoluta en relación a su contenedor padre */
+    z-index: 2; /* Establece un índice z mayor para el cuadro de texto */
+    padding: 3px; /* Agrega un margen alrededor del contenido del cuadro */
+    box-sizing: 100%; /* Incluye el padding en el ancho y alto total del elemento */
+    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
+    overflow: visible; /* Oculta el texto que desborda el contenedor */
+    text-overflow: ellipsis; /* Muestra "..." al final del texto que desborda */
+}  
+
+/* Estilos para mostrar la información ampliada en la bandera (parte trasera) */
+.bandera-container.show-info .info-back {
+    display: center;   /* Muestra el contenido de la parte trasera */
+    opacity: 1;  /* Opacidad completa para hacer visible el contenido */
+    transform: rotateY(0deg) scale(2); /* Vuelve a la posición normal y escala la tarjeta */
+}
+
+/* Estilos para el título en la parte trasera de la bandera */
+.info-back h4{
+    display: flex; /* Utiliza el modelo de caja flexible */
+    justify-content: center;  /* Centra el contenido horizontalmente */
+}
+
+.info-back p{
+    font-size: x-small;
+    line-height: 0.2;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,3 +7,5 @@ export const example = () => {
		export const anotherExample = () => {
		return 'OMG';
		};
-Original file line number
+Diff line change
@@ Expand Up / @@ -2675,9 +2675,9 @@ export default { @@
           "borders": [
             "BOL",
             "BRA",
-            "CHL",
-            "PRY",
-            "URY"
+            "CHI",
+            "PAR",
+            "URU"
           ],
           "area": 2780400,
           "flag": "🇦🇷",
@@ Expand Down @@