Laboratoria · Danitap-97 · May 23, 2023 · May 29, 2023 · May 29, 2023 · May 30, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/DL14-data-lovers.code-workspace b/src/DL14-data-lovers.code-workspace
@@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": ".."
+		}
+	],
+	"settings": {}
+}
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,36 @@
-// estas funciones son de ejemplo
+import data from './data/ghibli/ghibli.js';
+export function mostrarPeliculas() {
+  return data.films;
+}
 
-export const example = () => {
-  return 'example';
-};
-
-export const anotherExample = () => {
-  return 'OMG';
-};
+export function ordenarPeliculas(dataghibli, orden) {
+  if (orden === 'a-z') {
+    return dataghibli.sort((a, b) => {
+      if (a.title < b.title) {
+        return -1;//al lado izquierdo//
+      }
+      if (a.title > b.title) {
+        return 1;//lado derecho
+      }
+      return 0;//ordena al medio
+    });
+  } else {
+    return dataghibli.sort((a, b) => {
+      if (a.title > b.title) {
+        return -1;
+      }
+      if (a.title < b.title) {
+        return 1;
+      }
+      return 0;
+    });
+  }
+}
+//index0f para ver en que indice esta cada letra
+export function filtrarPeliculas(dataghibli, valorAFiltrar) {
+  const peliculasFiltradas = dataghibli.filter((pelicula) => {
+    return pelicula.title.toLowerCase().indexOf(valorAFiltrar.toLowerCase()) !== -1
+  })
+  const peliculasOrdenadas = ordenarPeliculas(peliculasFiltradas);
+  return peliculasOrdenadas;
+}
diff --git a/src/data/ghibli/README.md b/src/data/ghibli/README.md
@@ -30,4 +30,37 @@ hallazgos.
 - Las animaciones tienen locaciones y vehículos únicos en cada una. Para
   nuestras usuarias es importante saber cuáles son.
 - Adicionalmente a esta información, para nuestras usuarias es importante poder
-  ver los tipos de especies que hay en cada animación.
+  ver los tipos de especies que hay en cada animación. 
+
+  studio ghibli (Data-lovers)
+en este proyecto el objetivo principal era manejar base de datos con el cual se pudo construir una pagina web basada en las peliculas del studio ghibli para todos aquellos usuarios amantes de esta serie de peliculas, el usuario encontrara un apocope del studio ghibli brindando informacion acerca del inicio del studio con sus productores y directores de cada pelicula,ademas de su fin.
+
+en la segunda seccion se les brinda una ficha tecnica de cada pelicula donde encuentran su descripcion,año de lanzamiento,productor y director,ademas de su puntaje.
+
+con la paginia web queremos brindarle mas informacion a los amantes del studio ghibli para que tengan una idea de como ver sus peliculas favoritas por ejemplo en orden de lanzamiento.
+
+Demo
+https://www.figma.com/file/DkHKC4wf39woIVjTTzafOJ/studio?type=design&node-id=1-2&t=0sijc7cr1doNODBW-0
+
+Screenshots
+prototipo de baja fidelidad:
+
+https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F26160125-a9ab-4dc7-9cb0-01edfe4d873f%2Fprototipo_baja_fidelidad.jpg?table=block&id=ac7fd8c4-917c-48f2-a804-56a9a9bf28f1&spaceId=f44e4430-fe40-4d83-829c-a17367b61970&width=40&userId=6aa0b515-41f2-4156-86ad-ef8bfeb22191&cache=v2
+
+Documentation
+historias de usuario:
+
+https://www.notion.so/HISTORIA-DE-USUARIO-1-video-7c8b611c33fe485e901f4af016ac20a3?pvs=4
+
+https://www.notion.so/3-1realizar-segunda-pantalla-6b050d5bb81745b29c378ff371a0f6bf?pvs=4
+
+https://www.notion.so/HISTORIA-DE-USUARIO-3-vista-de-peliculas-a5e1084a982846e6b362ebecc66ee1d9?pvs=4
+
+criterios de aceptacion:
+
+https://github.com/Danitap-97/DL14-data-lovers#5-criterios-de-aceptaci%C3%B3n-m%C3%ADnimos-del-proyecto
+
+Authors
+https://github.com/nancygonzalezrex/DL14-data-lovers
+
+https://github.com/Danitap-97/DL14-data-lovers
diff --git a/src/icono1/square-facebook.svg b/src/icono1/square-facebook.svg
diff --git a/src/icono1/square-instagram.svg b/src/icono1/square-instagram.svg
diff --git a/src/icono1/twitter.svg b/src/icono1/twitter.svg
diff --git a/src/icono1/youtube.svg b/src/icono1/youtube.svg
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,62 @@
 <!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>
-</html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, user-scalable=no, 
+    initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+  <title>Data Lovers</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <header class="header-ghibli" id="header">
+    <h1 class="titulo">The Studio Ghibli</h1>
+  </header>
+  <div class="primera-interfaz" id="primera-interfaz">
+    <div class="video-para-header">
+      <iframe class="iframe-header" src="https://www.youtube.com/embed/Jp5zKN31R1s" title="YouTube video player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowfullscreen>
+      </iframe>
+    </div>
+    <section class="irSection">
+      <button type="button" id="btn-ir">GO</button>
+    </section>
+  </div>
+  <!--<div id="root"></div>-->
+  <main class="main-style">
+    <div class="segunda-interfaz" id="segunda-interfaz">
+      <section class="buscador">
+        <input type="text" placeholder="movie search" maxlength="60" id="input-busqueda-de-peliculas" />
+      </section>
+      <section class="buscador">
+        <select id="orden-alfabetico" class="ordenador">
+          <option selected>Sort</option>
+          <option value="a-z">A - Z</option>
+          <option value="z-a">Z - A</option>
+        </select>
+      </section>
+      <ul id="contenedor-peliculas"></ul>
+      <section class="volverSection">
+        <button type="button" id="btn-volver">Return</button>
+      </section>
+    </div>
+  </main>
+  <footer>
+    <section class="redes-sociales">
+      <div class="contenedor">
+        <a class="twitter" href="https://twitter.com/gen_ghibli?lang=es"><img src="icono1/twitter.svg"></a>
+        <a class="facebook" href="https://www.facebook.com/generacionghibli/?locale=es_LA"><img
+            src="icono1/square-facebook.svg"></a>
+        <a class="youtube" href="https://www.youtube.com/embed/Jp5zKN31R1s"><img src="icono1/youtube.svg"></a>
+        <a class="instagram" href="https://www.instagram.com/ghibli.movies/?hl=es"><img
+            src="icono1/square-instagram.svg"></a>
+      </div>
+    </section>
+  </footer>
+  <script src="main.js" type="module"></script>
+</body>
+
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,55 @@
-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 { filtrarPeliculas, mostrarPeliculas, ordenarPeliculas } from "./data.js";
+const botonIr = document.getElementById("btn-ir");
+const botonVolver = document.getElementById("btn-volver");
+const peliculas = mostrarPeliculas();
+const filtrado = document.getElementById('input-busqueda-de-peliculas');
+const ordenAlfabetico = document.getElementById('orden-alfabetico');
 
-console.log(example, data);
+
+function visualizarPeliculasEnPantalla(dataghibli) {
+  const contenedor = document.getElementById("contenedor-peliculas");
+  contenedor.innerHTML = ''
+  for (let i = 0; i < dataghibli.length; i++) {
+    const listaPeliculas = `
+    <li class="pelicula">
+      <h2>${dataghibli[i].title}</h2>
+      <img src =${dataghibli[i].poster} class="imagen-pelicula" />
+      <p>${dataghibli[i].description}</p><p>year: ${dataghibli[i].release_date}</p><p>score: ${dataghibli[i].rt_score}</p><p>director: ${dataghibli[i].director}</p><p>producer: ${dataghibli[i].producer}</p>
+    </li>`;
+    contenedor.innerHTML += listaPeliculas;
+  }
+}
+
+const peliculasOrdenadas = ordenarPeliculas(peliculas, 'a-z');
+visualizarPeliculasEnPantalla(peliculasOrdenadas);
+
+//se crea escuchador de evento para los botones
+
+filtrado.addEventListener('keyup', function () {
+  const peliculasFiltradas = filtrarPeliculas(peliculas, filtrado.value);
+  visualizarPeliculasEnPantalla(peliculasFiltradas);
+});
+
+botonIr.addEventListener('click', alternarPantallas);
+botonVolver.addEventListener('click', alternarPantallas);
+ordenAlfabetico.addEventListener('change', function () {
+  const selectedOption = this.options[this.selectedIndex];
+  const peliculasOrdenadas = ordenarPeliculas(peliculas, selectedOption.value);
+  visualizarPeliculasEnPantalla(peliculasOrdenadas);
+});
+
+
+function alternarPantallas(e) {
+  e.preventDefault();
+
+  const primeraInterfaz = document.getElementById("primera-interfaz");
+  const segundaPantalla = document.getElementById("segunda-interfaz");
+
+  if (window.getComputedStyle(primeraInterfaz).display === "block") {
+    primeraInterfaz.style.display = "none";
+    segundaPantalla.style.display = "block";
+  } else if (window.getComputedStyle(segundaPantalla).display === "block") {
+    segundaPantalla.style.display = "none";
+    primeraInterfaz.style.display = "block";
+  }
+}