Laboratoria · maluhuillcaelguera · Mar 15, 2024 · Mar 20, 2024 · Mar 20, 2024 · Mar 21, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/data/dataset.js b/src/data/dataset.js
diff --git a/src/data/img/El Señor de los Anillos_ Las Dos Torres (2002) - Peter Jackson.jpg b/src/data/img/El Señor de los Anillos_ Las Dos Torres (2002) - Peter Jackson.jpg
diff --git a/...ata/img/El señor de los anillos_ El retorno del rey (2003) tt0167260 c_esp_.jpg b/...ata/img/El señor de los anillos_ El retorno del rey (2003) tt0167260 c_esp_.jpg
diff --git a/src/data/img/Frodo.jpg b/src/data/img/Frodo.jpg
diff --git a/src/data/img/The Lord of the Rings _ The Fellowship of the Ring (2001).jpg b/src/data/img/The Lord of the Rings _ The Fellowship of the Ring (2001).jpg
diff --git a/src/data/img/aragorn.jpg b/src/data/img/aragorn.jpg
diff --git a/src/data/img/arwen .jpg b/src/data/img/arwen .jpg
diff --git a/src/data/img/balrog.jpeg b/src/data/img/balrog.jpeg
diff --git a/src/data/img/bilbo_720.jpg b/src/data/img/bilbo_720.jpg
diff --git a/src/data/img/boca_de_sauron_720.jpg b/src/data/img/boca_de_sauron_720.jpg
diff --git a/src/data/img/boromirdel.jpg b/src/data/img/boromirdel.jpg
diff --git a/src/data/img/denethor_720.jpg b/src/data/img/denethor_720.jpg
diff --git a/src/data/img/descarga (3).jpg b/src/data/img/descarga (3).jpg
diff --git a/src/data/img/elrond_720.jpg b/src/data/img/elrond_720.jpg
diff --git a/src/data/img/eowyn_720.jpg b/src/data/img/eowyn_720.jpg
diff --git a/src/data/img/faramir_720.jpg b/src/data/img/faramir_720.jpg
diff --git a/src/data/img/galadriel_720.jpg b/src/data/img/galadriel_720.jpg
diff --git a/src/data/img/gandalf.jpg b/src/data/img/gandalf.jpg
diff --git a/src/data/img/gimli.jpg b/src/data/img/gimli.jpg
diff --git a/src/data/img/gollum.jpg b/src/data/img/gollum.jpg
diff --git a/src/data/img/legolas.jpg b/src/data/img/legolas.jpg
diff --git a/src/data/img/logo1.jpeg b/src/data/img/logo1.jpeg
diff --git a/src/data/img/nazgul.jpg b/src/data/img/nazgul.jpg
diff --git a/src/data/img/sam.jpg b/src/data/img/sam.jpg
diff --git a/src/data/img/saruman.jpg b/src/data/img/saruman.jpg
diff --git a/src/data/img/sauron.jpg b/src/data/img/sauron.jpg
diff --git a/src/data/img/shadowfax.jpg b/src/data/img/shadowfax.jpg
diff --git a/src/data/img/shelob_720.jpg b/src/data/img/shelob_720.jpg
diff --git a/src/data/img/treebeard.jpg b/src/data/img/treebeard.jpg
diff --git a/src/data/img/wargos_720.jpg b/src/data/img/wargos_720.jpg
diff --git a/src/dataFunctions.js b/src/dataFunctions.js
@@ -7,3 +7,11 @@ export const example = () => {
 export const anotherExample = () => {
   return [];
 };
+
+document.getElementById('limpiar').addEventListener('click', function() {
+  // Restablecer los valores predeterminados de los selectores
+  document.getElementById('filtro1').selectedIndex = 0;
+  document.getElementById('filtro2').selectedIndex = 0;
+  document.getElementById('filtro3').selectedIndex = 0;
+  document.getElementById('filtro4').selectedIndex = 0;
+});
diff --git a/src/index.html b/src/index.html
@@ -3,9 +3,91 @@
   <head>
     <meta charset="utf-8">
     <title>Dataverse</title>
-    <link rel="stylesheet" href="style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css"/>
   </head>
   <body>
+  <header>
+    <div class="logo">
+      <img src="data/img/logo1.jpeg" alt="Logo de la página">
+    </div>
+    <h1>Personajes Del Señor de los Anillos</h1>
+    <nav>
+      <a href="#">Películas</a>
+      <a href="#">Personajes</a>
+      <a href="#">Blog</a>
+   </nav>
+    <button id="suscribirse">Suscríbete</button>
+    <br>
+  </header>
+    <main>
+      <h2>¡Embárcate en la búsqueda del Anillo y descubre la Tierra Media!</h2>
+      <h3>Explora el universo épico de <strong>El Señor de los Anillos</strong></h3>
+      <div class="filtros">
+        <label for="filtro1">Filtra tu búsqueda</label>
+        <select id="filtro1" name="filtro1">
+            <option value="raza">Raza</option>
+            <option value="edad">Hobbit</option>
+            <option value="estatura">Maia</option>
+            <option value="año">Hombre</option>
+            <option value="año">Elfo</option>
+            <option value="año">Enano</option>
+            <option value="año">Ent</option>
+            <option value="año">Caballo</option>
+            <option value="año">Criatura</option>
+        </select>
+        <label for="filtro2"></label>
+        <select id="filtro2" name="filtro2">
+            <option value="raza">Edad</option>
+            <option value="año">Menos de 100 años</option>
+            <option value="año">Entre 100 y 999 años</option>
+            <option value="año">Entre 1000 y 1999 años</option>
+            <option value="año">2000 años o más</option>
+            <option value="año">Desconocido</option>
+        </select>
+        <label for="filtro3"></label>
+        <select id="filtro3" name="filtro3">
+            <option value="raza">Estatura</option>
+            <option value="edad">Menos de 1.5 metros</option>
+            <option value="estatura">Entre 1.5 y 1.9 metros</option>
+            <option value="año">2 metros o más</option>
+            <option value="año">Desconocida</option>
+        </select>
+        <label for="filtro4"></label>
+        <select id="filtro4" name="filtro4">
+            <option value="raza">Año de Nacimiento</option>
+            <option value="edad">Antes de 1000</option>
+            <option value="estatura">Entre 1000 y 1999</option>
+            <option value="año">Entre 2000 y 2899</option>
+            <option value="estatura">Entre 2890 y 2999</option>
+            <option value="año">Desconocido</option>
+        </select>
+        <button id="limpiar">Borrar filtros</button>
+    </div>
+    <ul id="root"></ul>
+       <button id="" class="boton-suscribirse">Mostrar más</button>
+    <div class="texto-centrado">
+        <p>¡Bienvenido a nuestro santuario virtual para los amantes de la trilogía de El Señor de los Anillos!
+           Nuestra página es tu guía definitiva para explorar los personajes más icónicos de la saga, desde los valientes miembros de la Comunidad del Anillo hasta los temibles señores oscuros de Mordor. </p>
+    </div>
+    <div class="texto-centrado-peliculas">
+      <p>Aprende más sobre las películas</p>
+    </div>
+    <div class="peliculas">
+      <img src="https://i.pinimg.com/564x/1f/90/fe/1f90feb940a015ecd3918df90e094b58.jpg" alt="Nombre de la imagen">
+      <img src="https://i.pinimg.com/564x/ea/72/0f/ea720f5c160e5286df9ee3feb749e213.jpg" alt="Nombre de la imagen">
+      <img src="https://i.pinimg.com/564x/df/1c/a6/df1ca6dddcc57ae659f9966d4d5f9fdf.jpg" alt="Nombre de la imagen">
+    </div>
+    </main>
+    <footer>
+      <div class="logo-footer">
+        <img src="data/img/logo1.jpeg" alt="Logo de la página">
+      </div>
+      <p>Dirección: En algún lugar de la Tierra Media <br>
+      Contacto: 1600 - LA COMARCA <br>
+      Email: lacomarca@elseñordelosanillos.com <br>
+      © 2024 Laboratoria. All Rights Reserved - Designed by DV07</p>
+    </footer>
     <script src="main.js" type="module"></script>
   </body>
-</html>
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,9 @@
 import { example } from './dataFunctions.js';
 import { renderItems } from './view.js';
-
 import data from './data/dataset.js';
-
 console.log(example, renderItems(data), data);
+const itemsList = renderItems(data); // creamos una constante para guardar los datos en una lista e invocar sólo una 1 vez renderItems para no duplicar datos
+// tiene que ser un sólo contenedor para todos los 24 elementos para no duplicarlos
+const container = document.querySelector('#root');
+container.appendChild(itemsList.cloneNode(true));
+
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,178 @@
+body {
+    background-image: url('data/img/descarga\ \(3\).jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: fixed;
+    width: 1200px; /* Ancho máximo de la página */
+    height: 3000px;
+    margin: 0 auto;
+}
+header {
+    background-color: #000000;
+    color: #CBB279;
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+
+
+.logo img {
+    width: 70px;
+    height: 70px;
+}
+h1 {
+    text-align: center;
+    color:  #CBB279;
+    font-size: 20px;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+nav {
+    display: flex;
+}
+nav a {
+    color:  #CBB279;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    margin-right: 10px;
+    padding: 0 10px;
+}
+h2 {
+    text-align: center;
+    color: white;
+    font-size: 50px;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    margin: 30px;
+}
+h3 {
+    text-align: center;
+    color: white;
+    font-size: 32px;
+    font-weight: normal;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    margin: 50px;
+}
+.texto-centrado {
+    font-weight: normal;
+    font-size: 36px;
+    color: #fff;
+    text-align: center;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+label[for="filtro1"] {
+    color: white;
+    font-weight: normal;
+    font-size: 25px;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  }
+main {
+    padding-top: 50px;
+}
+.filtros {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+}
+.filtros select, .filtros button {
+    margin: 20px;
+    padding: 10px;
+    border-radius: 15px;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    font-size: 16px;
+}
+img {
+    width: 232px;
+    height: 361px;
+}
+
+#root {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 4rem;
+    position: relative;
+}
+.item {
+    max-width: 260px;
+    height: 400px;
+    text-align: center;
+    color: #fff;
+    box-shadow: 5px 5px 40px darkorange;
+    transition: .5s ease-in;
+    margin-top: 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+.item p {
+    color: #fff;
+    font-size: 16px;
+    justify-content: center;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+.item img {
+    width: 250px;
+    height: 250px;
+    border-radius: 5px;
+    border:5px rgba(220, 205, 205, 0.3) solid;
+}
+.item:hover {
+    transform: scale(1.1);
+}
+button {
+    background-color: #D1991A;
+    color: white;
+    font-size: 16px;
+    padding: 10px 20px;
+    cursor: pointer;
+    border-radius: 15px;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+.boton-suscribirse {
+    background-color: #D1991A;
+    color: white;
+    padding: 10px 20px;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+    border-radius: 15px;
+    display: block;
+    margin: 0 auto;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+.texto-centrado-peliculas {
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    font-size: 30px;
+    color: #fff;
+    text-align: left;
+    font-weight: bold;
+    margin: 30px;
+}
+.peliculas {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+.peliculas img {
+    width: 360px;
+    height: 600px;
+    margin: 20px;
+}
+footer {
+    background-color: #000000;
+    color: #CBB279;
+    display: flex;
+    padding: 20px;
+    text-align: left;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    font-size: 14px;
+}
+.logo-footer img{
+    width: 70px;
+    height: 70px;
+    margin-left: 20px;
+    margin-right: 20px;
+}
diff --git a/src/view.js b/src/view.js
@@ -1,6 +1,39 @@
 export const renderItems = (data) => {
-  console.log(data)
-  // Aquí comienza tu código y puedes retornar lo que tu necesites
-  return 'example';
+  // Crear un elemento <ul>
+  const ulElement = document.createElement('ul');
+
+  // Recorrer la data
+  data.forEach(item => {
+    // Crear un elemento <li> para cada item
+    const liElement = document.createElement('li');
+    const liImg = document.createElement('img');
+    const liDescription = document.createElement('p');
+
+    //Asignar la clase item al <li>
+    liElement.classList.add("item");
+
+
+    // Asignar el contenido del item al <li>
+    liImg.src = item.imageUrl;
+    liElement.textContent = item.name;
+    liDescription.textContent = item.shortDescription;
+
+    // Asignar el atributo itemtype a los elementos <li>
+    liElement.setAttribute("itemtype", "actors");
+    liElement.setAttribute("itemscope","")
+
+    // Agregar la imagen y la descripción como hijos de <li>
+    liElement.appendChild(liImg);
+    liElement.appendChild(liDescription);
+
+    // Agregar el <li> al <ul>
+    ulElement.appendChild(liElement);
+  });
+
+
+  // Retornar el elemento <ul>
+  return ulElement;
 };
 
+
+
diff --git a/test/data.js b/test/data.js
@@ -1,5 +1,48 @@
 // Aqui puedes agregar los datos que necesites para tus pruebas
 // al menos debe tener uno que se llame "data"
 
-export const data = [];
+export const data = [
+
+  {
+    "id": "frodo_bolson",
+    "name": "Frodo Bolsón",
+    "shortDescription": "Portador del Anillo Único",
+    "description": "Frodo Bolsón, un hobbit de la Comarca, es elegido para llevar el Anillo Único a Mordor y destruirlo en el Monte del Destino. A pesar de su modesta estatura, muestra una valentía extraordinaria y una determinación inquebrantable en su peligroso viaje. Su carga lo lleva al borde de la desesperación, pero su amistad con Sam y el apoyo de sus compañeros lo guían en su difícil tarea, enfrentando peligros inimaginables para salvar a la Tierra Media de la oscuridad que amenaza con consumirla. ",
+    "imageUrl": "data/img/Frodo.jpg",
+    "facts": {
+      "race": "Hobbit",
+      "age": 33,
+      "height": "1.5m",
+      "yearOfBirth": 2968
+    }
+  },
+
+  {
+    "id": "sam_gamyi",
+    "name": "Sam Gamyi",
+    "shortDescription": "Fiel compañero de Frodo",
+    "description": "Sam Gamyi, leal compañero de Frodo, demuestra una valentía y lealtad inquebrantables en su viaje para destruir el Anillo Único. Como jardinero de la Comarca, inicialmente se une a Frodo como su cocinero, pero su papel se vuelve crucial cuando se convierte en el soporte emocional y físico de Frodo en los momentos más oscuros. Su coraje y sacrificio son ejemplares, y su amor por su hogar y sus amigos lo impulsan a superar desafíos aparentemente insuperables en su búsqueda para salvar a la Tierra Media.",
+    "imageUrl": "data/img/sam.jpg",
+    "facts": {
+      "race": "Hobbit",
+      "age": 38,
+      "height": "1.4m",
+      "yearOfBirth": 2980
+    }
+  },
+
+  {
+    "id": "gandalf",
+    "name": "Gandalf",
+    "shortDescription": "El mago gris",
+    "description": "Gandalf, conocido como el Mago Gris, es una figura venerada y poderosa en la Tierra Media. Su sabiduría y habilidades mágicas lo convierten en un guía esencial para la Comunidad del Anillo en su lucha contra las fuerzas oscuras de Sauron. Aunque puede parecer distante y enigmático, Gandalf tiene un profundo amor por los pueblos libres y está dispuesto a arriesgar todo por su protección. Su papel como mentor y estratega es crucial en la guerra contra la oscuridad, y su sacrificio final en la batalla contra el Balrog es un acto de pura valentía y devoción.",
+    "imageUrl": "data/img/gandalf.jpg",
+    "facts": {
+      "race": "Maia",
+      "age": 2019,
+      "height": "2.1m",
+      "yearOfBirth": 1000
+    }
+  },
+];