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,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>
+
+    <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>
+  </div>
+  <div class="contenedorMenu">
+    <div class="alinear">BUSCAR POR... </div>
+    <div>
+    <div type="text" id="peliculaTitle"  class="btn1"> <img class="imagen2" src="img/pngwing.com (1).png">TITULOS </div>  
+    <div class="tituloPelicula" id="tituloPelicula"></div>
+    <br>
+    <br>
+    <br>
+    <div type="text" id="director"  class="btn1"><img class="imagen3" src="img/pngwing.com (2).png">DIRECTORES </div>
+    <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>
+
+    <div class="btn1" id="anio"><img class="imagen4" src="img/pngwing.com.png">AÑO DE ESTRENO</div>
+  </div>
+  <div id="tituloPelicula" class="estiloTarjetas"> </div>
+  <div id="direc"></div>
+  <div id="imagen"></div>
+  <div id="direc1"></div>
+  <div id="imagen1"></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,275 @@
-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';
+
+
+
+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(){
+// =======
+// 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");
+// 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);
+// }
+//  })
+
+
+// const open= document.getElementById("botonPersonaje");
+// const contenedorGeneral= document.getElementById("contenedor_general");
+
+
+
+
+
+// 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) )*/
+
 
-console.log(example, data);