Laboratoria · DanielaCastrejon · May 23, 2023 · May 26, 2023 · May 29, 2023 · May 29, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Images/1605791.jpg b/src/Images/1605791.jpg
diff --git a/src/Images/desktop-wallpaper-game-of-thrones.jpg b/src/Images/desktop-wallpaper-game-of-thrones.jpg
diff --git a/src/Images/wp6808094.png b/src/Images/wp6808094.png
diff --git a/src/README.md b/src/README.md
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,43 @@
-// estas funciones son de ejemplo
+//Función de filtrado por orden alfabetico//
 
-export const example = () => {
-  return 'example';
-};
+export function sortData(order, arregloDePersonajes) {
+  let ordenalfabetico;
+  if (order === "abc") {
+    ordenalfabetico = arregloDePersonajes.sort((a, b) => {
+      if (a.fullName < b.fullName) {
+        return -1;
+      }
+      if (a.fullName > b.fullName) {
+        return 1;
+      }
+      return 0;
+    });
+  } else if (order === "cba") {
+    ordenalfabetico = arregloDePersonajes.sort((a, b) => {
+      if (a.fullName > b.fullName) {
+        return -1;
+      }
+      if (a.fullName < b.fullName) {
+        return 1;
+      }
+      return 0;
+    });
+  }
+  return ordenalfabetico;
+}
 
-export const anotherExample = () => {
-  return 'OMG';
-};
+//Filtrado de búsqueda//
+export function filterData(texto, personajes) {
+  const enElTrono = personajes.filter(
+    (personaje) => personaje.lastName.toLowerCase() === texto.toLowerCase()
+  );
+  return enElTrono;
+}
+
+//Filtrado por Casa//
+export function familias(filtroCasa, casas) {
+  const enCasa = casas.filter((casa) =>
+    casa.family.toLowerCase().includes(filtroCasa.toLowerCase())
+  );
+  return enCasa;
+}
diff --git a/src/data/got/got.js b/src/data/got/got.js
@@ -140,7 +140,7 @@ export default{
       "lastName": "Baratheon",
       "fullName": "Joffrey Baratheon",
       "title": "Lord of the Seven Kingdoms, Protector of the Realm",
-      "family": "House Lanister",
+      "family": "House Lannister",
       "imageUrl": "https://thronesapi.com/assets/images/joffrey.jpg",
       "born": "286 DC",
       "death": "300 DC"
@@ -151,7 +151,7 @@ export default{
       "lastName": "Lannister",
       "fullName": "Tyrion Lannister",
       "title": "Hand of the Queen",
-      "family": "House Lanister",
+      "family": "House Lannister",
       "imageUrl": "https://thronesapi.com/assets/images/tyrion-lannister.jpg",
       "born": "272 DC"
     },
@@ -273,10 +273,10 @@ export default{
     {
       "id": 26,
       "firstName": "Viserys",
-      "lastName": "Targaryan",
-      "fullName": "Viserys Targaryn",
+      "lastName": "Targaryen",
+      "fullName": "Viserys Targaryen",
       "title": "King Viserys III",
-      "family": "Targaryan",
+      "family": "Targaryen", 
       "imageUrl": "https://thronesapi.com/assets/images/viserys-targaryan.jpg",
       "born": "276 DC",
       "death": "298 DC"

diff --git a/src/header/titulo.png b/src/header/titulo.png
diff --git a/src/index.html b/src/index.html
@@ -2,10 +2,81 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Data Lovers</title>
+    <title>Game of Thrones</title>
+    <meta name="viewport" content="width=device-width initial-scale=1.0"> 
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Slabo+27px&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
+    <header class="active">
+      <img src="header/titulo.png" style="max-width:100%;height:180px;">
+    </header>
+    <br>
+
+    <nav>
+
+      <input type="search" id="buscador" placeholder="Apellido">
+    <button id="busqueda">
+      <span>Buscar</span></button>
+      <br>
+      <br>
+    <div class="selec-abc" id="order">
+      <select class="orden" id="ordenabc">
+        <option disabled selected>orden alfabetico</option>
+        <option value="abc"> A-Z</option>
+        <option value="cba">Z-A</option>
+      </select>
+    </div>
+    <br>
+    <select class= "casa" id="filtro-casas">
+      <option disabled selected>Casas</option>
+      <option value="todas">Todas</option>
+      <option value="Stark">Stark</option>
+      <option value="Targaryen">Targaryen</option>
+      <option value="Tarly">Tarly</option> 
+      <option value="Baratheon">Baratheon</option> 
+      <option value="Lannister">Lannister</option>
+    </select>
+  </nav>
+
+    <br>
+    <br>
+
+    <section class="Detalles" >
+    <article>
+    <details >
+      <p>En un mundo fantástico y en un contexto medieval varias familias, relativas a la nobleza, se disputan el poder para dominar el territorio ficticio de Poniente (Westeros) y tomar el control de los Siete Reinos desde el Trono de Hierro, lugar donde el rey ejerce el poder.
+
+            Mientras tiene lugar una guerra civil para conseguir el poder, detrás del Muro que divide el reino de Poniente y la zona norte, los muertos amenazan con librar la batalla contra los vivos.
+
+            Entretanto, Daenerys Targaryen, la hija del antiguo rey, regresa a Poniente para reclamar su lugar y así vengar el deceso de sus ascendientes en la guerra civil anterior.
+          </p>
+          </details>
+        </article>
+      </section>
+      <br>
+      <br>
+      <br>
+      <br>
+      <br>
+
+
+      <div class="container"  id="gotImg" ></div>
+
+    <!--  <section class="modal">
+        <div class="modal_container">
+          <img src="Images/wp6808094.png" class="modal_img">
+          <h2 class="modal_title">!Bienvenido al Juego de Tronos¡</h2>
+          <p class="modal_paragraph">"Cuando cae la nieve y los vientos blancos soplan, el lobo solitario muere, pero la manada sobrevive".
+            Ned Stark</p>
+          <a href="#" class="modal_close">Cerrar Modal</a>
+        </div> 
+      </section> -->
+
+
+
     <div id="root"></div>
     <script src="main.js" type="module"></script>
   </body>

diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,65 @@
-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 { filterData, sortData, familias } from "./data.js";
+import data from "./data/got/got.js";
 
-console.log(example, data);
+//Funcion muestra de tarjetas//
+const GOTcontainer = document.getElementById("gotImg");
+
+function gotImgCreator(gotImages) {
+  GOTcontainer.innerHTML = "";
+
+  for (const got of gotImages) {
+    const imagen = document.createElement("div");
+    imagen.setAttribute("id", "fullName");
+    imagen.setAttribute("class", "family");
+    imagen.innerHTML = ` <div class="card">
+                    <div><h2 class="nombrePersonaje" id="nombrecompleto" >${got.fullName}</h2>
+                    <img class="got-image.url" src=${got.imageUrl}
+                        alt="Imagen GOT" width=150 height=150 ></img>
+                    <p id="familia">${got.family}</p>
+                    <p id="titulo">${got.title}</p>
+                    <p id="nacimiento">${got.born} - ${got.death}</p>
+                    </div>
+            </div>`;
+    GOTcontainer.append(imagen);
+  }
+}
+gotImgCreator(data.got);
+
+//Filtrado de búsqueda por órden alfabetico//
+
+const ordenarselect = document.getElementById("ordenabc");
+ordenarselect.addEventListener("change", () => {
+  const ordenName = ordenarselect.value;
+  let ordenalfabetico;
+
+  if (ordenName === "abc") {
+    ordenalfabetico = sortData("abc", data.got);
+  } else if (ordenName === "cba") {
+    ordenalfabetico = sortData("cba", data.got);
+  }
+  document.getElementById("gotImg").innerHTML = "";
+
+  gotImgCreator(ordenalfabetico);
+});
+
+//Filtro de Búsqueda anclado//
+document.getElementById("busqueda").addEventListener("click", function () {
+  const texto = document.getElementById("buscador").value;
+  const enElTrono = filterData(texto, data.got);
+  gotImgCreator(enElTrono);
+});
+
+//Filtro por Casas//
+const filtroCasa = document.querySelector("#filtro-casas");
+filtroCasa.addEventListener("change", () => {
+  const casasOption = filtroCasa.value;
+  const enCasa = familias(casasOption, data.got);
+  gotImgCreator(enCasa);
+});
+
+//const closeModal = document.querySelector(".modal_close");
+
+//closeModal.addEventListener("click", (e) => {
+//e.preventDefault();
+//modal.classList.remove("modal--show");
+//});