Laboratoria · Ysmari · 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/subdamerica.jpg b/src/Imagenes/subdamerica.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/index.html b/src/index.html
@@ -2,11 +2,25 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Data Lovers</title>
+    <title>Data Lovers 1</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/subdamerica.jpg" id="Subdamerica">Cultura-travels</h1>
+    <anside>
+      <button id="button1">Ordenar de la A a la Z</button> 
+      <button id="button2">Filtrar países limitantes</button>
+      <button id="button3">Calcula área total de cada país</button>
+    </anside>  
+    <div id="root">
+      </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,62 @@
 import { example } from './data.js';
 // import data from './data/lol/lol.js';
-import data from './data/pokemon/pokemon.js';
+import data from './data/countries/countries.js';
 // import data from './data/rickandmorty/rickandmorty.js';
 
 console.log(example, data);
+
+const root = document.getElementById('root');
+
+let contentRoot = '';
+for (let i= 0; i<data.countries.length; i++) {  
+    if(data.countries[i].subregion === "South America") {
+       contentRoot += `<img src="${data.countries[i].flags.png}" class="Bandera">`;    
+    }
+
+}
+root.innerHTML=contentRoot;
+
+const buttons = document.querySelectorAll('anside button');
+
+function getRandomColor() {
+  const letters = '0123456789ABCDEF';
+  let color = '#';
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+
+function changeButtonColor() {
+  buttons.forEach(button => {
+    const randomColor = getRandomColor();
+    button.style.backgroundColor = randomColor;
+  });
+}
+
+// Cambiar el color de los botones automáticamente cada 2 segundos
+setInterval(changeButtonColor, 2000);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,90 @@
+body{
+    background-image:url('Imagenes/SALAR-DE-UYUNI-REVISTA-TIME.jpg');
+
+}
+
+h1{
+    display: flex; /* visualizar contenido  */
+    justify-content:center; /* se aplica a display: flex  para que el texto quede centrado*/
+    padding: 10px; 
+    background-color: #3ede2f; 
+    color: #f5eeee; /*Color de letra*/
+    margin: 40px;
+    }
+
+#Subdamerica{
+    width: 60px;
+}
+
+#root{
+    margin: 30px;
+    width: 800px; 
+}
+
+anside {
+    padding: 100px;           /* Espaciado interno en el aside */
+    display: flex-direction;
+    justify-content:space-between;
+    width: 250px; 
+    height: 40px; 
+
+}
+
+anside button {               /* Estilos para los botones dentro de <aside> */
+    display: inline-block;    /* Hace que los botones se muestren en línea */
+    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;
+
+}
+
+footer{
+    font-size: 15px; /* cambia tamaño del letra de pagina */
+}
+
+.Bandera{
+    margin: 10PX;
+    width: 200PX;
+    height: 130PX;
+    font-size: 15px;
+} 
+
+/* 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;
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,3 +7,5 @@ export const example = () => {
		export const anotherExample = () => {
		return 'OMG';
		};