Laboratoria · PauTrujillo · Apr 27, 2020 · Apr 28, 2020 · Apr 28, 2020 · Apr 28, 2020
diff --git a/Images_readme/Diagrama1.png b/Images_readme/Diagrama1.png
diff --git a/Images_readme/Diagrama_Final.png b/Images_readme/Diagrama_Final.png
diff --git a/Images_readme/GUION.jpg b/Images_readme/GUION.jpg
diff --git a/Images_readme/Screenshot 2020-05-04 at 00.26.15.png b/Images_readme/Screenshot 2020-05-04 at 00.26.15.png
diff --git a/Images_readme/Sketchs/1.png b/Images_readme/Sketchs/1.png
diff --git a/Images_readme/Sketchs/2.png b/Images_readme/Sketchs/2.png
diff --git a/Images_readme/Sketchs/3.png b/Images_readme/Sketchs/3.png
diff --git a/Images_readme/Sketchs/4.png b/Images_readme/Sketchs/4.png
diff --git a/Images_readme/Sketchs/5.png b/Images_readme/Sketchs/5.png
diff --git a/Images_readme/Sketchs/6.png b/Images_readme/Sketchs/6.png
diff --git a/Images_readme/Usuarios-clientes.jpg b/Images_readme/Usuarios-clientes.jpg
diff --git a/README.md b/README.md
diff --git a/src/Images_proyect/Banner.png b/src/Images_proyect/Banner.png
diff --git a/src/Images_proyect/fondo_1.png b/src/Images_proyect/fondo_1.png
diff --git a/src/Images_proyect/fondo_amor.png b/src/Images_proyect/fondo_amor.png
diff --git a/src/Images_proyect/fondo_enemigo.png b/src/Images_proyect/fondo_enemigo.png
diff --git a/src/Images_proyect/fondo_general.jpg b/src/Images_proyect/fondo_general.jpg
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,105 @@
-// estas funciones son de ejemplo
+//FUNCIONES PERSONAJES
 
-export const example = () => {
-  return 'example';
-};
+export const filterordenaA_Z = (data, ordena) => { // Se crea funcion filterordenaA_Z con los parametros data y ordena
+  const personajes_ordena_alfa = data.sort((per1, per2) => {
+    if (ordena === "Ordenar A-Z") {
+      return (per1.name < per2.name) ? -1 : 1
+    } else {
+      return (per1.name > per2.name) ? -1 : 1
+    }
+  });
+  return personajes_ordena_alfa
+}
 
-export const anotherExample = () => {
-  return 'OMG';
-};
+export const filterRelevancia = (data, categoria) => {
+  let personajesRelevancia = data.sort((ascen, desce) => {
+    if (categoria === "Menor Relevancia") {
+      return (ascen.categories < desce.categories) ? -1 : 1;
+    } else {
+      return (ascen.categories > desce.categories) ? -1 : 1;
+    }
+  })
+  return personajesRelevancia
+}
+
+
+//FUNCIONES PAREJA
+
+export const filterData = (data, genero) => {
+  let selecciona_genero = data.filter(function (filtragenero) {
+    return (filtragenero.gender === (genero));
+  });
+  return selecciona_genero
+}
+
+
+export const filterCasa = (data, casa) => {
+
+  let selecciona_casa = data.filter(function (filtracasa) {
+    return (filtracasa.house === (casa));
+  });
+  return selecciona_casa
+}
+
+
+export const filterMadera = (data, madera) => {
+  let selecciona_madera = data.filter(function (filtraMadera) {
+    return (filtraMadera.wand.wood === (madera));
+  });
+  return selecciona_madera
+}
+
+
+export const filterHechizo = (data, hechizo) => {
+  let selecciona_hechizo = data.filter(function (filtraHechizo) {
+    return (filtraHechizo.patronus === (hechizo));
+  });
+  return selecciona_hechizo
+}
+
+
+export const filterAncestro = (data, ancestro) => {
+  let selecciona_ancestro = data.filter(function (filtraAncestros) {
+    return (filtraAncestros.ancestry === (ancestro));
+  });
+  return selecciona_ancestro
+}
+
+
+//FUNCIONES SECCION ENEMIGOS
+
+export const filterNucleo = (data, nucleo) => {
+  let selecciona_nucleo = data.filter(function (filtraNucleo) {
+    return (filtraNucleo.wand.core === (nucleo));
+  });
+  return selecciona_nucleo
+}
+
+export const filterCasaEnemigo = (data, casaEnemigo) => {
+
+  let selecciona_casaEnemigo = data.filter(function (filtracasaEnemigo) {
+    return (filtracasaEnemigo.house === (casaEnemigo));
+  });
+  return selecciona_casaEnemigo
+}
+
+export const filterAncestroEnemigo = (data, ancestroEnemigo) => {
+  let selecciona_ancestroEnemigo = data.filter(function (filtraAncestrosEnemigo) {
+    return (filtraAncestrosEnemigo.ancestry === (ancestroEnemigo));
+  });
+  return selecciona_ancestroEnemigo
+}
+
+export const filterEspecie = (data, especie) => {
+  let selecciona_Especie = data.filter(function (filtraEspecie) {
+    return (filtraEspecie.species === (especie));
+  });
+  return selecciona_Especie
+}
+
+export const filterHechizoEnemigo = (data, hechizoEnemigo) => {
+  let selecciona_hechizoEnemigo = data.filter(function (filtraHechizoEnemigo) {
+    return (filtraHechizoEnemigo.patronus === (hechizoEnemigo));
+  });
+  return selecciona_hechizoEnemigo
+}
diff --git a/src/data/potter/potter.js b/src/data/potter/potter.js
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,233 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>Data Lovers</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script src="main.js" type="module"></script>
-  </body>
+
+<head>
+  <meta charset="utf-8">
+  <meta content="width=device-width, initial-scale=1" name="viewport" />
+  <title>Data Lovers</title>
+  <link rel="stylesheet" href="style.css" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Lato&family=Manjari:wght@100;400;700&family=Merriweather&family=Metal+Mania&family=Montserrat&family=Open+Sans&display=swap"
+    rel="stylesheet">
+</head>
+
+<body>
+  <!--Acá estamos seteando el banner para todos los div-->
+  <header id="estiloBanner" class="bannerFondo">
+  </header>
+
+  <!--Portada -->
+  <div id="portada" class="imagenPortada">
+    <h2 class="textoPortada">
+
+      Descubre tu Pareja Mágica o tu Enemigo Encantado, en el mundo de los personajes de “Harry Potter: Wizards Unite”.
+
+      ¿Por dónde te gustaría comenzar?
+    </h2>
+    <section class="contenedorBotones">
+      <button id="boton1" class="botones">Conocer Pareja Mágica</button>
+      <button id="boton2" class="botones">Conocer Enemigo Mágico</button>
+      <button id="boton3" class="botones">Conocer Personajes de la Saga</button>
+    </section>
+  </div>
+
+  <!--Pantalla pareja-->
+  <div id="pareja" class="imagenPareja">
+    <h2 class="textoSecciones">Ya no necesitarás pociones de amor. Contesta algunas preguntas y sabrás que personaje de
+      la Saga, es tu pareja mágica ideal.</h2>
+
+    <div class="contenedorPreguntas">
+
+      <h3 class="textoPregunta">1. ¿Qué tipo de pareja buscas?</h3>
+      <select id="pregunta1Amor" class="textoSelect">
+        <option disabled selected>Escoge una Alternativa</option>
+        <option value="male">Hombre</option>
+        <option value="female">Mujer</option>
+        <option value="">No me fijo en eso, creo en el amor de almas</option>
+      </select>
+
+      <h3 class="textoPregunta">2. Si fueras estudiante de Hogwarts, ¿A qué casa mágica te gustaría ir?</h3>
+      <select id="pregunta2Amor" class="textoSelect" disabled>
+        <option disabled selected>Escoge una Alternativa</option>
+        <option value="Hufflepuff">Hufflepuff</option>
+        <option value="Slytherin">Slytherin</option>
+        <option value="Gryffindor">Gryffindor</option>
+        <option value="Ravenclaw">Ravenclaw</option>
+        <option value="">La casa que el sombrero seleccionador prefiera para mi</option>
+      </select>
+
+
+      <h3 class="textoPregunta">3. Si vivieras en el mundo de "Harry Potter: Wizads Unite" ¿Qué linaje te gustaría
+        tener?</h3>
+
+      <select id="pregunta3Amor" class="textoSelect" disabled>
+        <option disabled selected>Escoge una Alternativa</option>
+        <option value="pure-blood">Sangre Pura</option>
+        <option value="half-blood">Mestizo</option>
+        <option value="muggleborn">Hijo de Muggle</option>
+        <option value="squib">Squib</option>
+        <option value="">No juzgo a nadie por su sangre</option>
+      </select>
+
+
+
+      <h3 class="textoPregunta">4. ¿Cuál de estos animales conecta con tu corazón?</h3>
+
+      <select id="pregunta4Amor" class="textoSelect" disabled>
+        <option disabled selected>Escoge una Alternativa</option>
+        <option value="horse">Caballo</option>
+        <option value="otter">Nutria</option>
+        <option value="lynx">Lince</option>
+        <option value="Jack Russell terrier">Perro</option>
+        <option value="swan">Cisne</option>
+        <option value="doe">Cierva</option>
+        <option value="persian cat">Gato Persa</option>
+        <option value="weasel">Comadreja</option>
+        <option value="stag">Ciervo</option>
+        <option value="wolf">Lobo</option>
+        <option value="hare">Liebre</option>
+        <option value="tabby cat">Gato atigrado</option>
+        <option value="">Ninguno de los anteriores</option>
+      </select>
+
+
+      <h3 class="textoPregunta">5. Si mañana despertaras en un bosque ¿Qué tipo de bosque te gustaría que fuera?</h3>
+
+      <select id="pregunta5Amor" class="textoSelect" disabled>
+        <option disabled selected>Escoge una Alternativa</option>
+        <option value="cypress">Bosque de Cipreces</option>
+        <option value="yew">Bosque de Tejos</option>
+        <option value="elm">Bosque de Olmos</option>
+        <option value="hawthorn">Bosque de Espinos</option>
+        <option value="ash">Bosque de Fresnos</option>
+        <option value="vine">Bosque de Enredaderas</option>
+        <option value="cherry">Bosque de Cerezos</option>
+        <option value="oak">Bosque de Robles</option>
+        <option value="holly">Bosque de Acebos</option>
+        <option value="walnut">Bosque de Nogales</option>
+        <option value="cedar">Bosque de Cedros</option>
+        <option value="birch">Bosque de Abedules</option>
+        <option value="willow">Bosque de Sauces</option>
+        <option value="">No me gustaría estar en un Bosque</option>
+      </select>
+
+      <section class="contenedorBotones">
+        <button class="botones" id="volverPareja">Atras</button>
+        <button class="botones" id="aceptarPareja">Aceptar</button>
+      </section>
+    </div>
+  </div>
+
+  <!--Pantalla enemigo-->
+  <div id="enemigo" class="imagenEnemigo">
+    <h1 class="textoSecciones">Si lo tuyo es el combate, aquí encontrarás a tu enemigo encantado perfecto.
+      Contesta algunas preguntas y tendrás la respuesta.</h1>
+    <div class="contenedorPreguntas">
+
+      <h3 class="textoPregunta">1. ¿Con cuál de estas criaturas mágicas te gustaría enfrentarte?</h3>
+      <select id="pregunta1Enemigo" class="textoSelect">
+        <option disabled selected>Escoge una Alternativa</option>
+        <option value="phoenix feather">Fénix</option>
+        <option value="dragon heartstring">Dragón</option>
+        <option value="unicorn tail-hair">Unicornio</option>
+        <option value="">Con cualquiera</option>
+      </select>
+
+
+      <h3 class="textoPregunta">2. Si fueras estudiante de Hogwarts, ¿En qué casa mágica no soportarías vivir?</h3>
+      <select id="pregunta2Enemigo" class="textoSelect" disabled>
+        <option disabled selected>Escoge una Alternativa</option>
+        <option value="Hufflepuff">Hufflepuff</option>
+        <option value="Slytherin">Slytherin</option>
+        <option value="Gryffindor">Gryffindor</option>
+        <option value="Ravenclaw">Ravenclaw</option>
+        <option value="">Me da lo mismo la casa mágica</option>
+      </select>
+
+      <h3 class="textoPregunta">3. ¿Con qué linaje mágico no te llevas bien?</h3>
+      <select id="pregunta3Enemigo" class="textoSelect" disabled>
+        <option disabled selected>Escoge una Alternativa</option>
+        <option value="pure-blood">Sangre Pura</option>
+        <option value="half-blood">Mestizo</option>
+        <option value="muggleborn">Hijo de Muggle</option>
+        <option value="squib">Squib</option>
+        <option value="">Ningún linaje me importa</option>
+      </select>
+
+
+      <h3 class="textoPregunta">4. ¿Con cuál de estas criaturas mágicas te atreverías a enfrentarte?</h3>
+      <select id="pregunta4Enemigo" class="textoSelect" disabled>
+        <option disabled selected>Escoge una Alternativa</option>
+        <option value="human">Humano</option>
+        <option value="werewolf">Hombre Lobo</option>
+        <option value="half-giant">Semi Gigante</option>
+        <option value="cat">Gato</option>
+        <option value="">Puedo enfrentarme a cualquier raza</option>
+      </select>
+
+
+      <h3 class="textoPregunta">5. ¿Cuál de estos animales es el que menos te gusta?</h3>
+      <select id="pregunta5Enemigo" class="textoSelect" disabled>
+        <option disabled selected>Escoge una Alternativa</option>
+        <option value="horse">Caballo</option>
+        <option value="otter">Nutria</option>
+        <option value="lynx">Lince</option>
+        <option value="Jack Russell terrier">Perro</option>
+        <option value="swan">Cisne</option>
+        <option value="doe">Cierva</option>
+        <option value="persian cat">Gato Persa</option>
+        <option value="weasel">Comadreja</option>
+        <option value="stag">Ciervo</option>
+        <option value="wolf">Lobo</option>
+        <option value="hare">Liebre</option>
+        <option value="tabby cat">Gato atigrado</option>
+        <option value="">Ninguno de los anteriores</option>
+      </select>
+
+      <section class="contenedorBotones">
+        <button class="botones" id="volverEnemigo">Atras</button>
+        <button class="botones" id="aceptarEnemigo">Aceptar</button>
+      </section>
+    </div>
+
+  </div>
+
+  <!--Pantalla personajes-->
+  <div id="personajes" class="imagenPersonaje">
+
+    <h1 class="textoSecciones">Clickea sobre la foto que quieras, para obtener más información.
+      Esperamos que encuentres lo que buscas...</h1>
+
+    <section class="selectoresOrden">
+      <select id="ordenar_Alfabeticamente" class="textoSelect">
+        <option disabled selected>--Ordenar Alfabeticamente--</option>
+        <option>Ordenar A-Z</option>
+        <option>Ordenar Z-A</option>
+      </select>
+      <select id="ordenar_Relevancia" class="textoSelect">
+        <option disabled selected>--Ordenar por Relevancia--</option>
+        <option>Mayor Relevancia</option>
+        <option>Menor Relevancia</option>
+      </select>
+    </section>
+
+
+  </div>
+
+  <div id="root"> </div>
+
+  <div id="modal" class="modal">
+    <div class="modal_Content"></div>
+  </div>
+
+  <div id="botonesJS"></div>
+  <div id="quieroMas"> </div>
+
+
+  <!-- Acá estamos seteando el footer para todo el proyecto-->
+  <footer class="pie">Copyright by Paula Trujillo & Yosliana Aguilar</footer>
+  <script src="main.js" type="module"></script> <!-- Acá se conecta archivo main js, y se hace en tipo módulo -->
+  <script src="data.js" type="module"></script><!-- Acá se conecta archivo data js, y se hace en tipo módulo-->
+</body>
+
 </html>