Laboratoria · daNielaMartinezG · Jun 7, 2023 · Jun 7, 2023 · Jun 9, 2023 · Jun 9, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,20 @@
 // estas funciones son de ejemplo
 
-export const example = () => {
-  return 'example';
+
+
+export const filtroPeliculas = () => {
+
+
+  return 'aun no se como se usa esto mañana aprendo xd';
 };
 
-export const anotherExample = () => {
-  return 'OMG';
+export const ordenarPeliculasPorRT = (listadoDePeliculas) => {
+  let listadoDePeliculasOrdenadas = [data.films]
+  listadoDePeliculas.sort (function (a, b) {
+    if ( b.rt_score - a.rt_score) {
+      return 1;
+    } 
+  })
+
+  return listadoDePeliculasOrdenadas
 };
diff --git a/src/img/nuube.jpg b/src/img/nuube.jpg
diff --git a/src/img/pngwing.com (1).png b/src/img/pngwing.com (1).png
diff --git a/src/img/pngwing.com (2).png b/src/img/pngwing.com (2).png
diff --git a/src/img/pngwing.com.png b/src/img/pngwing.com.png
diff --git a/src/img/ponio.png b/src/img/ponio.png
diff --git a/src/img/totoromain.png b/src/img/totoromain.png
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">
+  <title>Data Lovers</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=Lilita+One&display=swap" rel="stylesheet">
+</head>
+
+<body>
+
+<div>
+<header> 
+    <div><img class="imagen1" src="img/totoromain.png"></div>
+    <h class="tituloPagina">GHIBLILOVERS</h>
+    <div><img class="imagen" src="img/ponio.png"></div>
+</header>
+<div class="frase"><h3>Un lugar para amantes de las peliculas de Studio Ghibli</h3></div> 
+</div>
+<div>
+
+<div class="contenedorGeneral">
+    <br>
+    <div class="contenedorMenu">
+        <div class="alinear">BUSCAR POR... </div>
+        <br>
+        <div type="text" id="peliculaTitle"  class="btn1"> <img class="imagen2" src="img/pngwing.com (1).png">TITULOS </div>           
+        <br>
+        <div type="text" id="director"  class="btn2"><img class="imagen3" src="img/pngwing.com (2).png"><li>DIRECTORES 
+          <ul class="submenu1"> 
+            <li type="text" id="directoresP" class="btn1"> Hayao Miyasaki </li>
+            <li type="text" id="directoresP1" class="btn1"> Gorō Miyasaki </li>
+            <li type="text" id="directoresP2" class="btn1"> Isao Takahata </li>
+            <li type="text" id="directoresP3" class="btn1"> Hiromasa Yonebayashi </li>
+            <li type="text" id="directoresP4" class="btn1"> Yoshifumi Kondō </li>
+            <li type="text" id="directoresP5" class="btn1"> Hiroyuki Morita </li>  
+          </ul>
+        </li></div>   
+        <br>
+        <div class="btn3" id="bestRTMovie"><img class="imagen4" src="img/pngwing.com.png">Best RT</div>
+    </div>
+
+    <div class="galleryFilterMovies">   
+        <h3 class="encabezadoPeliculas">Peliculas</h3>  
+           <div class="tituloPelicula" id="tituloPelicula"></div>   
+    </div>
+
+  </div>
+</div>
+
+
+
+
+  <script src="main.js" type="module">
+
+  </script>
+</body>
+
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,66 @@
-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 data from './data/ghibli/ghibli.js';
+import {ordenarPeliculasPorRT} from './data.js'
+let datosPelicula = data.films;
+//Mostrar los titulos de las peliculas 
+//Vamos a mostrar los titulos de las peliculas con la manipulación del DOM y la creacion de eventos 
+//crear elementos
+const tituloPelisNode = document.getElementById("tituloPelicula");
 
-console.log(example, data);
+ //Crear un boton que muestre la data de los titulos 
+
+// funcion de filtrado 
+const peliculasPorDirector = (arregloDePeliculas, director) => 
+{
+
+    const arregloResultado =  [];
+    // paso 1: recorro mi arreglo de peliculas (for hasta que recorra todos los elementos de arreglo depeliculas)
+    // por cada elemento que me encuentre -> [{ claves: valores }, { claves: valores }, { claves: valores }]
+    // preguntar al objeto por su valor en la clave director 
+    // si el valor coincide con directpr agregar ese objeto a el arreglo resultado 
+    // si no coinciode no hacer nada 
+    for (let i = 0; i<datosPelicula.length; i++)
+        {if (datosPelicula[i].director = title) {
+            arregloResultado.push (datosPelicula[i])
+
+        }
+
+        }
+        console.log(arregloResultado);
+
+
+    return arregloResultado; 
+}
+
+
+
+ const contenedorGeneralPeliculas = (datosPelicula) => {
+    for (let i = 0; i<datosPelicula.length; i++){
+        const movilCarNode = document.createElement("div");
+        movilCarNode.classList.add("movieCard");
+        const image = document.createElement("img")
+        image.src  = datosPelicula[i].poster;
+        const titlee = document.createElement("p");
+        titlee.textContent = datosPelicula[i].title;
+        tituloPelisNode.appendChild(titlee);
+        tituloPelisNode.appendChild(image);
+        //tituloPelisNode.appendChild(movilCarNode);
+
+}
+}
+contenedorGeneralPeliculas (datosPelicula)
+
+
+
+
+
+//Filtro de Best Rotten tomatoes
+const botonBestRT = document.getElementById("bestRTMovie");
+//bestRT = document.querySelectorAll("bestRTMovie");
+botonBestRT.addEventListener ("click", function(){
+
+    tituloPelisNode.innerHTML = ""
+    const peliculasOrdenadas = ordenarPeliculasPorRT (datosPelicula)
+    contenedorGeneralPeliculas(peliculasOrdenadas)
+
+
+})