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,30 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Data Lovers</title>
+    <title>Data Lovers 1</title>
     <link rel="stylesheet" href="style.css" />
   </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,40 @@
 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;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,62 @@
+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; 
+}
+
+button{
+    display: flex-direction;
+    justify-content:center;
+    width: 250px; 
+    height: 40px; 
+    padding: 10px;
+    background-color:  rgb(227, 233, 220);
+}
+
+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 p {
+    font-size: 15px; /* cambia tamaño del letra de pagina */
+}
+
+.Bandera{
+    margin: 10PX;
+    width: 200PX;
+    height: 130PX;
+    font-size: 15px;
+} 
+
+
+
+
+
+
+
+
+
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,3 +7,5 @@ export const example = () => {
		export const anotherExample = () => {
		return 'OMG';
		};