Laboratoria · danielapadronf · Sep 19, 2023 · Sep 20, 2023 · Sep 19, 2023 · Sep 25, 2023
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "htmlhint": "htmlhint src/*.html test/*.html",
     "eslint": "eslint --ext .js src/ test/",
     "pretest": "npm run eslint && npm run htmlhint",
-    "test": "jest --verbose --coverage test/*.spec.js",
+    "test": "jest --verbose --coverage test/",
     "test:e2e": "playwright test",
     "test:oas": "jest --verbose tests-read-only/oa/",
     "pretest:oas-html": "npm run pretest",

diff --git a/src/Img/Casa_Tyrell.webp b/src/Img/Casa_Tyrell.webp
diff --git a/src/Img/Game of Thrones.jpeg b/src/Img/Game of Thrones.jpeg
diff --git a/src/Img/Img-inicio.jpg b/src/Img/Img-inicio.jpg
diff --git a/src/Img/Letras-doradas.ico b/src/Img/Letras-doradas.ico
diff --git a/src/Img/Letras-doradas.png b/src/Img/Letras-doradas.png
diff --git a/src/Img/Letras.png b/src/Img/Letras.png
diff --git a/src/Img/Targaryen.ico b/src/Img/Targaryen.ico
diff --git a/src/Img/Targaryen.png b/src/Img/Targaryen.png
diff --git a/src/Img/baratheon.png b/src/Img/baratheon.png
diff --git a/src/Img/d2679381-b917-48e6-8944-56cc476f5078.jfif b/src/Img/d2679381-b917-48e6-8944-56cc476f5078.jfif
diff --git a/src/Img/imagen1.jpeg b/src/Img/imagen1.jpeg
diff --git a/src/Img/imagen2.jpeg b/src/Img/imagen2.jpeg
diff --git a/src/Img/imagen3.jpeg b/src/Img/imagen3.jpeg
diff --git a/src/Img/lannister.png b/src/Img/lannister.png
diff --git a/src/Img/stark.png b/src/Img/stark.png
diff --git a/src/Img/tarly.jpg b/src/Img/tarly.jpg
diff --git a/src/dataFunctions.js b/src/dataFunctions.js
@@ -1,9 +1,56 @@
-// estas funciones son de ejemplo
+import data from './data/got/got.js';
+// import { renderItems } from './view.js';
+// const root = document.getElementById('root')
 
-export const example = () => {
-  return 'example';
-};
+export const mostrarPagina = (pagina) => {
+  const paginas = document.querySelectorAll('.pagina');
+  paginas.forEach(p => p.classList.remove('pagina-activa'));
+
+  const paginaSeleccionada = document.getElementById(pagina);
+  paginaSeleccionada.classList.add('pagina-activa');
+}
+export const sortFamilia = (value) => {
+  const familia = data.got;
+
+  if (value === "desc") {
+    familia.sort((a, b) => b.family.localeCompare(a.family));
+  }
+
+  if (value === "asc") {
+    familia.sort((a, b) => a.family.localeCompare(b.family));
+  }
+
+  return familia; // Devuelve la lista ordenada
+}
+// Función para filtrar la lista de personajes
+export const filterBy = ((data, filterBy, value) =>{
+  const arrayFamily = data.filter(family => {
+    if (family [filterBy] === value){
+      return family;
+    }
+  })
+  return arrayFamily
+});
+
+export const getAgeAverage = () => {
+  const allTheBornDate = data.got.reduce((prev, current) => {
+    const bornString = current&&current.born || '0'; // Si es null o undefined, se convierte en 0
+    const bornNumber = parseInt(bornString.replace(/[^0-9]/g, ''), 10);
+    return prev + bornNumber;
+  }, 0);  
+
+  const totalOfCharts = data.got.length
+
+  const average = allTheBornDate / totalOfCharts
+
+  const averageRounded = average.toFixed(2); // Limitar a dos decimales
+
+  const averageTag = document.createElement("p");
+  averageTag.textContent =  `Año promedio de nacimiento DC : ${averageRounded}, del total de personajes: ${totalOfCharts}`
+  averageTag.classList.add("average");
+  root.appendChild(averageTag);
+
+}
+
+getAgeAverage(root)
 
-export const anotherExample = () => {
-  return [];
-};
diff --git a/src/index.html b/src/index.html
@@ -1,11 +1,79 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Data Lovers</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <script src="main.js" type="module"></script>
-  </body>
-</html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Juego de Tronos</title>
+  <link rel="stylesheet" href="style.css" />
+  <link rel="icon" type="image/x-icon" href="/src/Img/Targaryen.ico">
+</head>
+<body>
+    <header>
+      <h1>
+        <img src="./Img/Letras-doradas.png" alt="letras doradas game of thrones"/>
+      </h1>
+      <div class="contenedor-barra-principal">
+        <nav class="barra-navegacion">
+          <button class="boton-inicio">Inicio</button>
+          <button class="botonPersonajes">Personajes</button>
+        </nav>
+      </div>
+    </header>
+  <!-- Contenido de la página 1 -->
+    <div id="pagina1" class="pagina pagina-activa">
+      <main>
+        <h2> “Una reina que no confía en nadie es tan tonta como una reina que confía en todo el mundo”.</h2>
+        <h3>(Daenerys Targaryen)</h3>
+      </main>
+      <footer>Jessica Clemente y Daniela Padron<br>@DataLovers</footer>
+      </div>   
+  <!-- Contenido de la página 2 -->
+    <div id="pagina2" class="pagina">
+      <div class="contenedor-barra-principal">
+        <div class="filters">
+      <label for="select-filter">Filtrar Casa:</label>
+        <select id="select-filter" data-testid="select-filter" name="family">
+          <option value="House Stark">Stark</option>
+          <option value="Worm">Worm</option>
+          <option value="House Tyrell">Tyrell</option>
+          <option value="Qyburn">Qyburn</option>
+          <option value="House Targaryen">Targaryen</option>
+          <option value="House Tarly">Tarly</option>
+          <option value="House Baratheon">Baratheon</option>
+          <option value="House Lannister">Lannister</option>
+          <option value="House Greyjoy">Greyjoy</option>
+          <option value="House Clegane">Clegane</option>
+          <option value="House Baelish">Baelish</option>
+          <option value="House Seaworth">Seaworth</option>
+          <option value="Unkown">Unknown</option>
+          <option value="Free Folk">Free Folk</option>
+          <option value="Tarth">Tarth</option>
+          <option value="Naathi">Naathi</option>
+          <option value="None">None</option>
+          <option value="Bolton">Bolton</option>
+          <option value="Naharis">Naharis</option>
+          <option value="Mormont">Mormont</option>
+          <option value="Sparrow">Sparrow</option>
+          <option value="Viper">Viper</option>
+          <option value="Sand">Sand</option>
+          <option value="Greyjoy">Greyjoy</option>
+          <option value="Lorathi">Lorathi</option>  
+        </select>
+        <label for="sort-order">Ordenar:</label>
+  <select id="sort-order" data-testid="select-sort" name="abc">
+  <option value="asc">A-Z</option>
+  <option value="desc">Z-A</option>
+</select>
+<form action="">
+  <button class="button-clear" type="button" data-testid="button-clear">Limpiar</button>
+</form>
+    </div>
+    </div>
+    <section id="root"></section>
+    </div>
+  <script type="module" src="view.js"></script>
+  <script type="module" src="main.js"></script>
+  <script type="module" src="dataFunctions.js"></script>
+</body>
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,8 +1,56 @@
-import { example } from './dataFunctions.js';
+import data from './data/got/got.js';
 import { renderItems } from './view.js';
+import { sortFamilia, filterBy, mostrarPagina, getAgeAverage } from './dataFunctions.js';
+
+const listaPersonajes = data.got; 
+let clonData = [...listaPersonajes]
+const contenedorPersonajes = document.getElementById('root');
+const botonInicio = document.querySelector('.boton-inicio');
+const botonPersonajes = document.querySelector('.botonPersonajes'); 
+const sort = document.getElementById("sort-order");
+const selectFilter = document.querySelector("#select-filter");
+const resetButton = document.querySelector(".button-clear");
+
+
+const ul = renderItems(listaPersonajes);
+
+contenedorPersonajes.appendChild(renderItems(listaPersonajes));
+document.addEventListener('DOMContentLoaded', function() {
+
+  // Agrega event listeners para cada botón
+  botonInicio.addEventListener('click', function() {
+    mostrarPagina('pagina1');
+  });
+
+  botonPersonajes.addEventListener('click', function() {
+    mostrarPagina('pagina2');
+    getAgeAverage()
+  });
+
+  resetButton.addEventListener('click', function() {
+
+    contenedorPersonajes.replaceChildren();
+    contenedorPersonajes.appendChild(ul)
+  });
+});
+
+
+sort && sort.addEventListener("change", function(event) {
+  const selectedValue = event.target.value;
+  const FamiliaOrdenada = sortFamilia(selectedValue);
+  const ul = renderItems(FamiliaOrdenada); 
+  contenedorPersonajes.replaceChildren();
+  contenedorPersonajes.appendChild(ul);
+});
+
+selectFilter.addEventListener("change",(e) => {
+  const filtroFamilia = filterBy(listaPersonajes,"family", e.target.value);
+  contenedorPersonajes.innerHTML = "";
+  clonData = filtroFamilia;
+  contenedorPersonajes.appendChild(renderItems(clonData));
+});
+
+
+
 
-// import data from './data/lol/lol.js';
-import data from './data/pokemon/pokemon.js';
-// import data from './data/rickandmorty/rickandmorty.js';
 
-console.log(example, renderItems, data);