Laboratoria · mariadanielaorregopotosi · May 29, 2023 · May 29, 2023 · May 29, 2023 · May 29, 2023
diff --git a/ImagenesHU/Buscador Peliculas.png b/ImagenesHU/Buscador Peliculas.png
diff --git a/ImagenesHU/Buscador Personajes.png b/ImagenesHU/Buscador Personajes.png
diff --git a/ImagenesHU/Datos Personaje.png b/ImagenesHU/Datos Personaje.png
diff --git a/ImagenesHU/Miniaturas.png b/ImagenesHU/Miniaturas.png
diff --git a/ImagenesHU/Personaje.png b/ImagenesHU/Personaje.png
diff --git a/ImagenesHU/Sinopsis.png b/ImagenesHU/Sinopsis.png
diff --git a/ImagenesHU/buscar.jpg b/ImagenesHU/buscar.jpg
diff --git a/ImagenesHU/directores.jpg b/ImagenesHU/directores.jpg
diff --git a/ImagenesHU/kiki.gif b/ImagenesHU/kiki.gif
diff --git a/ImagenesHU/ordenar.jpg b/ImagenesHU/ordenar.jpg
diff --git a/ImagenesHU/pagina.jpg b/ImagenesHU/pagina.jpg
diff --git a/ImagenesHU/personajes.png b/ImagenesHU/personajes.png
diff --git a/ImagenesHU/sinopsis1.jpg b/ImagenesHU/sinopsis1.jpg
diff --git a/ImagenesHU/sinopsis2.jpg b/ImagenesHU/sinopsis2.jpg
diff --git a/README.md b/README.md
diff --git a/image.png b/image.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "eslint": "^8.3.0",
     "gh-pages": "^3.1.0",
     "htmlhint": "^1.0.0",
-    "jest": "^27.0.1",
+    "jest": "^27.5.1",
     "opener": "^1.5.1",
     "serve": "^13.0.2"
   },
@@ -31,4 +31,4 @@
     "version": "6.2.0",
     "commit": "da890e27d7d1949d74bbea9f12216b48ff8185e9"
   }
-}
+}
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,66 @@
-// estas funciones son de ejemplo
-
-export const example = () => {
-  return 'example';
+// importa data de ghibli.js//
+import ghibli from "./data/ghibli/ghibli.js";
+//se crea const=getData
+export const getData = () => {
+  return ghibli.films;
 };
 
-export const anotherExample = () => {
-  return 'OMG';
-};
+export function buscarPeliculas(pelis, titulo) {
+  const peliculasEncontradas = pelis.filter((pelicula) =>
+    pelicula.title.toLowerCase().includes(titulo.toLowerCase())
+  );
+
+  return peliculasEncontradas;
+}
+
+export function ordenarPeliculas(peliculas, tipoDeOrden) {
+  if (tipoDeOrden === "year") {
+    peliculas.sort(function (a, b) {
+      const parametroa = a.release_date.toLowerCase();
+      const parametrob = b.release_date.toLowerCase();
+
+      if (parametroa === parametrob) {
+        return 0;
+      }
+      if (parametroa < parametrob) {
+        return -1;
+      }
+      return 1;
+    });
+  }
+  if (tipoDeOrden === "az") {
+    peliculas.sort(function (a, b) {
+      const parametroa = a.title.toLowerCase();
+      const parametrob = b.title.toLowerCase();
+
+      if (parametroa === parametrob) {
+        return 0;
+      }
+      if (parametroa < parametrob) {
+        return -1;
+      }
+      return 1;
+    });
+  }
+  if (tipoDeOrden === "za") {
+    peliculas.sort(function (a, b) {
+      const parametroa = a.title.toLowerCase();
+      const parametrob = b.title.toLowerCase();
+
+      if (parametroa === parametrob) {
+        return 0;
+      }
+      if (parametroa > parametrob) {
+        return -1;
+      }
+      return 1;
+    });
+  }
+  return peliculas;
+}
+export function filtrarPeliculas(peliculas, tipoFiltrado) {
+
+  return peliculas.filter(
+    (pelicula) => pelicula.director.toLowerCase() === tipoFiltrado
+  );
+}
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,69 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <title>Data Lovers</title>
+    <meta charset="utf-8" />
+    <title>Data de Peliculas</title>
     <link rel="stylesheet" href="style.css" />
+    <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=Poppins&display=swap" rel="stylesheet">
   </head>
+
   <body>
+    <img id="gif" src="https://pa1.aminoapps.com/6611/9a69bd112b266c1545b4685ea6055c152e3d5125_hq.gif" width="70px" alt="GIF">
+
+    <div class="container">
+      <img
+        src="https://i0.wp.com/www.sir-apfelot.de/wp-content/uploads/2017/03/studio-ghibli-logo-620x288.png"
+        alt="titulo"
+      />
+      <form></form>
+        <input
+          type="text"
+          name="search"
+          id="listaPeliculas"
+          placeholder="Buscar Películas..."
+        />
+
+        <button id="buscar" type="submit"><strong>BUSCAR</strong></button>
+        <select id="ordenar"> 
+          <option>Ordenar</option>
+          <option value="year">Año de lanzamiento</option>
+          <option value= "az">A-Z</option>
+          <option value="za">Z-A</option>
+        </select>
+
+        <select id="director">
+          <option >Directores</option>
+          <option value="hayao miyazaki">Hayao Miyazaki</option>
+          <option value="isao takahata">Isao Takahata</option>
+          <option value="yoshifumi kondō">Yoshifumi Kondō</option>
+          <option value="hiroyuki morita">Hiroyuki Morita</option>
+          <option value="gorō miyazaki">Gorō Miyazaki</option>
+          <option value="hiromasa yonebayashi">Hiromasa Yonebayashi</option>
+        </select>
+        <button id = "limpiar"><strong>LIMPIAR</strong></button>
+    </div>
+
+    <ul id="peliculas-container"></ul>
+
     <div id="root"></div>
     <script src="main.js" type="module"></script>
+
   </body>
-</html>
+  <footer>
+    <div class="container grid-3">
+      <div class="copyright">
+        <h1>STUDIO GHIBLI</h1>
+        <p>Copyright &copy; 2023</p>
+      </div>
+      <div class="profiles">
+        <a href="https://twitter.com/i/flow/login?input_flow_data=%7B%22requested_variant%22%3A%22eyJsYW5nIjoiZXMifQ%3D%3D%22%7D"><em class="fab fa-twitter fa-2x"></em><img src="https://cdn.cms-twdigitalassets.com/content/dam/help-twitter/twitter_logo_blue.png.twimg.768.png" alt="twitter"></a>
+        <a href="https://www.instagram.com/accounts/login/?source=reset_password"><em class="fab fa-instagram fa-2x"></em><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Instagram-Icon.png/769px-Instagram-Icon.png" alt="instagram"></a>
+        <a href="https://es-la.facebook.com/login/device-based/regular/login/"><em class="fab fa-facebook fa-2x"></em><img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/04/Facebook_f_logo_%282021%29.svg/1200px-Facebook_f_logo_%282021%29.svg.png" alt="facebook"></a>
+        <a href="https://web.whatsapp.com/"><em class="fab fa-whatsapp fa-2x"></em><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/1200px-WhatsApp.svg.png" alt="whatsapp"></a>
+      </div>
+    </div>
+  </footer>
+
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,61 @@
-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 { getData, buscarPeliculas, ordenarPeliculas, filtrarPeliculas} from "./data.js";
+const peliculas = getData();
+//console.log(peliculas);
 
-console.log(example, data);
+function mostrarPeliculas(dataset) {
+  const contenedor = document.getElementById("peliculas-container");
+  contenedor.innerHTML = "";
+  for (let i = 0; i < dataset.length; i++) {
+    const plantilla = `<li><img src = ${dataset[i].poster}></img><h1> ${dataset[i].title}</h1<p2>${dataset[i].director}</p2> <details>
+    <summary>Historia</summary>
+    <p3>${dataset[i].description}</p3>
+  </details></li>`;
+    contenedor.innerHTML += plantilla;
+  }
+}
+
+document.addEventListener("mousemove", function (event) {
+  const gif = document.getElementById("gif");
+  const x = event.clientX - gif.width / 1;
+  const y = event.clientY - gif.height / 1;
+  gif.style.left = x + "px";
+  gif.style.top = y + "px";
+});
+
+mostrarPeliculas(peliculas);
+
+const peliculasOrdenadas = ordenarPeliculas(peliculas, "year")
+
+mostrarPeliculas(peliculasOrdenadas);
+
+function inicio() {
+  const botonbusqueda = document.getElementById("buscar");
+  botonbusqueda.addEventListener("click", function (evento) {
+    evento.preventDefault();
+    const titulo = document.getElementById("listaPeliculas").value;
+
+    const encontrarPeliculas = buscarPeliculas(peliculas, titulo);
+    mostrarPeliculas(encontrarPeliculas);
+  });
+}
+inicio();
+
+const selectOrdenar = document.getElementById("ordenar");
+selectOrdenar.addEventListener("change", function () {
+  const tipoDeOrden = document.getElementById("ordenar").value;
+
+  const orden = ordenarPeliculas(peliculas, tipoDeOrden);
+
+  mostrarPeliculas(orden);
+
+});
+
+const selectDirectores = document.getElementById("director");
+selectDirectores.addEventListener("change", function () {
+  const tipoDirector = document.getElementById("director").value;
+
+  const directores = filtrarPeliculas(peliculas,tipoDirector);
+
+  mostrarPeliculas(directores);
+
+} );