Laboratoria · PamelaSanLuis · 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,7 +1,11 @@
 // 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 = () => {

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,88 @@
 <!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>
+    <header > GHIBLILOVERS
+     <img class="imagen" src="img/ponio.png">
+      <img class="imagen1" src="img/totoromain.png">
+    </header>
+
+
+
+
+<br>
+    <div class="frase">Un lugar para amantes de las peliculas de Studio Ghibli</div>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br> 
+    <br>
+    <br>
+    <br>
+    <br> 
+    <br>
+    <br>
+    <br> 
+    <br>
+    <br>
+    <br>
+    <br> 
+    <br>
+    <br>
+  </div>
+  <div class="contenedorMenu">
+    <div class="alinear">BUSCAR POR... </div>
+    <br>
+
+    <button type="text" id="peliculaTitle"  class="btn1"> TITULOS </button>
+    <img class="imagen2" src="img/pngwing.com (1).png">
+
+    <br>
+    <br>
+    <br>
+    <br>
+    <button type="text" id="directoresP" class="btn1"> Hayao Miyasaki </button>
+    <button type="text" id="directoresP1" class="btn1"> Gorō Miyasaki </button>
+    <button type="text" id="directoresP2" class="btn1"> Isao Takahata </button>
+    <button type="text" id="directoresP3" class="btn1"> Hiromasa Yonebayashi </button>
+    <button type="text" id="directoresP4" class="btn1"> Yoshifumi Kondō </button>
+    <button type="text" id="directoresP5" class="btn1"> Hiroyuki Morita </button>
+
+
+    <br>
+    <br>
+    <br>
+    <br>
+
+    <button class="btn1" id="anio">AÑO DE ESTRENO</button>
+    <img class="imagen4" src="img/pngwing.com.png">
+  </div>
+  <div id="tituloPelicula" class="estiloTarjetas"> </div>
+  <div id="direc"></div>
+  <div id="imagen"></div>
+  <div id="direc1"></div>
+  <div id="imagen1"></div>
+
+
+
+
+
+
+
+  <script src="main.js" type="module">
+
+  </script>
+</body>
+
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,271 @@
-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';
 
-console.log(example, data);
+
+let datosPelicula = data.films;
+
+//BOTON FILTRADO HAYAO
+const botonDirectores = document.getElementById("directoresP");
+botonDirectores.addEventListener("click", function () {
+    const directoresNode = document.getElementById("direc");
+    const imageNode = document.getElementById("imagen");
+
+    const miyasaki = datosPelicula.filter(function (datosPelicula) {
+        return datosPelicula.director === 'Hayao Miyazaki';
+
+    });
+
+    const miyasakyData = miyasaki.map((miyasaki) =>  miyasaki.title);
+    const miyasakyDataimg = miyasaki.map((miyasaki) =>  miyasaki.poster);
+
+    const direc = document.createElement("div")
+    const imagen = document.createElement("img")
+    //console.log(ojala)    
+    //console.log(arrayNew)
+    direc.textContent = miyasakyData;
+    imagen.src = miyasakyDataimg;
+    directoresNode.appendChild(direc);
+    imageNode.appendChild(imagen);
+})
+
+
+//BOTON FILTRADO GORO
+const botonGoro = document.getElementById("directoresP1");
+botonGoro.addEventListener("click", function () {
+    const directoresNode = document.getElementById("direc1");
+    const imageNode = document.getElementById("imagen");
+
+    const goro = datosPelicula.filter(function (datosPelicula) {
+        return datosPelicula.director === 'Gorō Miyazaki';
+
+    });
+
+    const goroData = goro.map((goro) =>  goro.title);
+    const goroDataimg = goro.map((goro) =>  goro.poster);
+
+    const direc1 = document.createElement("div")
+    const imagen = document.createElement("img")
+  //console.log(goroData)    
+    //console.log(arrayNew)
+   direc1.textContent = goroData;
+    imagen.src = goroDataimg;
+    directoresNode.appendChild(direc1);
+    imageNode.appendChild(imagen);
+})
+//BOTON DE DIRECTOR ISAO
+
+const botonIsao = document.getElementById("directoresP2");
+botonIsao.addEventListener("click", function () {
+    const directoresNode = document.getElementById("direc1");
+    const imageNode = document.getElementById("imagen");
+
+    const isao = datosPelicula.filter(function (datosPelicula) {
+        return datosPelicula.director === 'Isao Takahata';
+
+    });
+
+    const isaoData = isao.map((isao) => isao.title);
+    const isaoDataimg = isao.map((isao) =>  isao.poster);
+
+    const direc1 = document.createElement("div")
+    const imagen = document.createElement("img")
+  //console.log(goroData)    
+    //console.log(arrayNew)
+   direc1.textContent = isaoData;
+    imagen.src = isaoDataimg;
+    directoresNode.appendChild(direc1);
+    imageNode.appendChild(imagen);
+})
+
+//BOTON DE DIRECTOR Hiromasa Yonebayashi
+
+const botonyone = document.getElementById("directoresP3");
+botonyone.addEventListener("click", function () {
+    const directoresNode = document.getElementById("direc1");
+    const imageNode = document.getElementById("imagen");
+
+    const yone = datosPelicula.filter(function (datosPelicula) {
+        return datosPelicula.director === 'Hiromasa Yonebayashi';
+
+    });
+
+    const yoneData = yone.map((yone) => yone.title);
+    const yoneDataimg = yone.map((yone) =>  yone.poster);
+
+    const direc1 = document.createElement("div")
+    const imagen = document.createElement("img")
+  //console.log(goroData)    
+    //console.log(arrayNew)
+   direc1.textContent = yoneData;
+    imagen.src =yoneDataimg;
+    directoresNode.appendChild(direc1);
+    imageNode.appendChild(imagen);
+}) 
+
+//BOTON DE DIRECTOR Yoshifumi Kondō
+const botonkondo = document.getElementById("directoresP4");
+botonkondo.addEventListener("click", function () {
+    const directoresNode = document.getElementById("direc1");
+    const imageNode = document.getElementById("imagen");
+
+    const yone = datosPelicula.filter(function (datosPelicula) {
+        return datosPelicula.director === 'Yoshifumi Kondō';
+
+    });
+    const kondoData = yone.map((kondo) =>kondo.title);
+    const kondoDataimg = yone.map((kondo) =>  kondo.poster);
+
+    const direc1 = document.createElement("div")
+    const imagen = document.createElement("img")
+  //console.log(goroData)    
+    //console.log(arrayNew)
+   direc1.textContent =kondoData;
+    imagen.src =kondoDataimg;
+    directoresNode.appendChild(direc1);
+    imageNode.appendChild(imagen);
+})
+
+//BOTON DE DIRECTOR Hiroyuki Morita
+const botonmorita = document.getElementById("directoresP5");
+botonmorita.addEventListener("click", function () {
+    const directoresNode = document.getElementById("direc1");
+    const imageNode = document.getElementById("imagen");
+
+    const yone = datosPelicula.filter(function (datosPelicula) {
+        return datosPelicula.director === 'Hiroyuki Morita';
+
+    });
+    const moritaData = yone.map((morita) =>morita.title);
+    const moritaDataimg = yone.map((morita) => morita.poster);
+
+    const direc1 = document.createElement("div")
+    const imagen = document.createElement("img")
+  //console.log(goroData)    
+    //console.log(arrayNew)
+   direc1.textContent =moritaData;
+    imagen.src =moritaDataimg;
+    directoresNode.appendChild(direc1);
+    imageNode.appendChild(imagen);
+})
+   /* const movilCarNode = document.createElement("div");
+    movilCarNode.classList.add("movieCard");
+    const image = document.createElement("img")
+    image.src  = datosPelicula[direc].poster;
+    const titlee = document.createElement("p");
+    titlee.textContent = datosPelicula[direc].title;
+    tituloPelisNode.appendChild(titlee);
+    tituloPelisNode.appendChild(image);*/
+
+   // const dataEP = datosPelicula.map((datosPelicula ) => datosPelicula.title + datosPelicula.director); BUSQUEDA CON MAP PARA FILTRAR DIRECTOR
+
+//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
+
+//crear un boton que muestre la data de los directores, muestra TODOS Y REPETIDAMENTE los directores
+/*const directoresNode = document.getElementById("direc"); //nombre del div donde se va guardar la información para mostrar en la web
+const botonDirectores = document.getElementById("directoresP");
+botonDirectores.addEventListener("click", function(){
+   const direc =document.createElement("p");// crear el p donde se va guardar la informacion
+   direc.textContent = datosPelicula.map((datosPelicula) => datosPelicula.director)
+   directoresNode.appendChild(direc);
+})*/
+
+
+
+/*for(let i=0; i<sumaNew.lenght; i++){
+   if(sumaNew[i]){
+       let directorEspecifico = datosPelicula => datosPelicula.director === "Isao Takahata";
+       let filtroED = datosPelicula.find(directorEspecifico);
+
+       let comparacion = sumaNew[i] == filtroED;
+       console.log(comparacion);
+   }else{
+       console.log("aun no se que va aqui");
+   }
+}*/
+
+/*const tituloPelisNode = document.getElementById("tituloPelicula");
+const directoresNode = document.getElementById("director");
+
+
+
+ //Crear un boton que muestre la data de los titulos
+ const botonTitlee = document.getElementById("peliculaTitle");
+ botonTitlee.addEventListener("click", function(){
+
+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);
+}
+ })
+
+
+
+
+//CREANDO ELEMENTOS CON EL DOM
+
+ //entrar a la etiqueta del HTML desde el DOM
+ /*const impresionData = document.getElementById('demo');
+
+ //Usando el dom
+ const botonPersonaje = document.getElementById("mensaje");
+  botonPersonaje.addEventListener("click", function(){
+        //BUSQUEDA DE UN DATO ESPECIFICO
+let btotoro = datosPelicula => datosPelicula.title === 'The Tale of the Princess Kaguya';
+let totoro = datosPelicula.find(btotoro); //METODO FIND
+console.log(totoro);
+//creación del div
+/*const div = document.createElement("div");
+impresionData.appendChild(div);
+
+const dataResulado = document.querySelector(".resultado")
+dataResulado.textContent = dataResulado.appendChild(totoro);
+})*/
+
+//peliculaArray = datosPelicula[1].description;
+
+//let mostarDato = document.getElementById("demo1");
+
+//mostarDato = peliculaArray;
+
+/*let dataFilms = [];
+for (let i; i<data.length; i++){
+    if(data[i].films === dataFilms){
+        dataFilms.push(data[i]);
+    }
+}
+
+console.log(data);*/
+
+
+//FILTRADO DE ARRAY CON METODO MAP ESPECIFICO 
+/*const nombredirector = datosPelicula.map((datosPelicula)=> datosPelicula.director)
+
+console.log(nombredirector);
+
+//FILTRADO CON METODO forEach
+ datosPelicula.forEach((datosPelicula) =>console.log(datosPelicula.title) )*/
+
+
+//personajes 
+
+const open= document.getElementById("botonPersonaje");
+const contenedorGeneral= document.getElementById("contenedor_general");
+
+open.addEventListener("click", () => {
+  contenedorGeneral.classList.add("show");
+  //alert("prueba");
+});
+
+close.addEventListener("click", () => {
+  contenedorGeneral.classList.remove("show");
+});
+
+//let personajesPorGenero = data.queryselectorAll(".gender");
+//console.log(personajesPorGenero);