Laboratoria · angiephb · Feb 4, 2022 · Feb 4, 2022 · Feb 4, 2022 · Feb 4, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/bienvenida.otf b/src/bienvenida.otf
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,40 @@
-// estas funciones son de ejemplo
+import data from './data/ghibli/ghibli.js';// estas funciones son de ejemplo
 
-export const example = () => {
-  return 'example';
-};
+const filtervehicles =() =>{ //filtro de vehiculos
+  let vehicles2 = data.films.filter( film => film.vehicles.length !==0) 
 
-export const anotherExample = () => {
-  return 'OMG';
-};
+  console.log(vehicles2); 
+}
+
+const filterlocation =() =>{ //filtro de locaciones
+  let location2 = data.films.filter( film => film.locations.length !==0)
+  console.log(location2);
+}
+// Filtros por score
+const rtgood = () =>{
+  let rtscorebuena= data.films.filter(film =>film.rt_score >= 90)// filtro de puntaje pelicula buena
+  console.log('bueno',rtscorebuena); 
+}
+const rtregular = () =>{
+  let rtscoreregular= data.films.filter(film => film.rt_score >= 80 && film.rt_score < 90 )// filtro de puntaje pelicula regular
+  console.log('regular', rtscoreregular)
+}
+const rtbad = () =>{
+  let rtscorebad= data.films.filter( film=> film.rt_score < 80)// filtro de puntaje pelicula mala
+  console.log('malo', rtscorebad)
+}
+// filtros por personajes
+const characters =() =>{
+  let characters2= data.films.filter( film => {
+   film.people.map(personaje=> console.log(personaje.name))
+   })
+
+  console.log(characters2)
+   /* {
+
+      console.log('nombres personajes', characters2,"nombre",nombres)
+  }*/
+
+  }  
+
+export {filtervehicles, filterlocation, rtgood, rtregular, rtbad, characters};
diff --git a/src/imagenes.img/img1.jpg b/src/imagenes.img/img1.jpg
diff --git a/src/imagenes.img/img2.jpg b/src/imagenes.img/img2.jpg
diff --git a/src/imagenes.img/img3.jpg b/src/imagenes.img/img3.jpg
diff --git a/src/imagenes.img/img4.jpg b/src/imagenes.img/img4.jpg
diff --git a/src/imagenes.img/img5.png b/src/imagenes.img/img5.png
diff --git a/src/imagenes.img/img6.jpg b/src/imagenes.img/img6.jpg
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,117 @@
-<!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>
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Data Lovers</title>
+    <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+    <!--Aqui va la pagina  -->
+
+    <section id="pag1" class="pag1">
+        <div class="textoenc">
+            <h1>Ghibli Lovers</h1>
+            <h2>Bienvenidos!</h2>
+            <button type="button" id="btn1" class="btn1">Continuar</button>
+        </div>
+
+        <!--Aqui va slider pagina 1 -->
+
+        <div class="slider">
+
+            <ul>
+                <li> <img src="imagenes.img/img1.jpg" alt=""> </li>
+                <li> <img src="imagenes.img/img2.jpg" alt=""> </li>
+                <li> <img src="imagenes.img/img3.jpg" alt=""> </li>
+                <li> <img src="imagenes.img/img4.jpg" alt=""> </li>
+            </ul>
+
+        </div>
+    </section>
+
+    <!--Aqui va la pagina 2 -->
+
+    <section id="pag2">
+        <main id="username" class="flex-container">
+            <div class="grid">
+                <h3>Hola</h3>
+                <input type="text" id="name" placeholder="Ingresa tu nombre">
+                <button type="button" id="btn2" class="btn2">Ingresar</button>
+                <p id="msg"> </p>
+            </div>
+            <div class="list">
+                <ul id="list">
+
+                </ul>
+                <button type="button" id="btn3" class="btn3">Ver más...</button>
+            </div>
+        </main>
+
+    </section>
+
+    <!--Aqui va la pagina 3 -->
+
+    <main id="pag3">
+      <header>
+        <h4> <a href="https://gilliam24.github.io/BOG004-data-lovers/src/index.html">Ghibli Lovers</a></h4>
+      </header>
+
+    <!--Aqui van los filtros -->
+
+        <aside id="filterfimls" class="filterfilms">
+              <section id="filtersrt">
+                  <p id="score">RT-Score</p>
+                  <input type="radio" name="score" id="btnrt1" value="bueno">
+                  <label for="btnrt1">Bueno</label>                  
+                  <input type="radio" name="score" id="btnrt2" value="regular">
+                  <label for="btnrt2">Regular</label>                    
+                  <input type="radio" name="score" id="btnrt3" value="mala">
+                  <label for="btnrt3">Mala</label>
+              </section>
+              <section id="filtersvh">
+                  <label for="vehicles">Films que tienen Vehiculos</label>
+                  <input type="radio" name="vehicles" id="vehicles">
+              </section>
+              <section id="filterslc">
+                  <label for="location">Films con locaciones</label>
+                  <input type="radio" name="location" id="location">
+              </section>
+              <section id="filterspj">
+                  <label for="characters">Mostrar todos los personajes</label>
+                  <input type="radio" name="characters" id="characters">
+              </section>
+        </aside>
+
+    <!--Aqui va el orden -->
+        <aside>
+            <section id="orderaz">
+                <input type="radio" name="az" id="ascendente" value="ascendente">
+                <label for="ascendente">Ordenar A-Z</label>
+            </section>
+            <section id="orderza">
+                <input type="radio" name="za" id="descendente" value="descendente">
+                <label for="descendente">Ordenar Z-A</label>
+            </section>
+            <section id="years">                
+                <p>Ordenar por Año de Lanzamiento</p>
+                  <input type="radio" name="yearsorder" id="btny1" value="reciente">
+                  <label for="btnrt2">Más Reciente</label>                    
+                  <input type="radio" name="yearsorder" id="btny2" value="Antigua">
+                  <label for="btnrt3">Más Antiguo</label>
+            </section>
+
+
+
+
+
+        </aside>
+
+    </main>
+
+    <div id="root"></div>
+    <script src="main.js" type="module"></script>
+</body>
+
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,45 @@
-import { example } from './data.js';
-// import data from './data/lol/lol.js';
-import data from './data/pokemon/pokemon.js';
+import {filtervehicles, filterlocation, rtgood, rtregular, rtbad, characters} from './data.js';
+ //import data from './data/lol/lol.js';
+import data from './data/ghibli/ghibli.js';
 // import data from './data/rickandmorty/rickandmorty.js';
 
-console.log(example, data);
+document.getElementById("pag2").style.display="none";
+
+const btn= document.getElementById("btn1");
+btn.addEventListener("click", open1 =>{
+ document.getElementById("pag2").style.display="block";
+ document.getElementById("pag1").style.display="none";
+})
+
+let msg= document.getElementById("msg");
+msg.innerHTML= " ";
+
+let get= document.getElementById("btn2");
+get.addEventListener("click", open2=>{
+const nameuser= document.getElementById("name").value;
+ msg.innerHTML = nameuser + ' Aquí podras ver una pelicula a tu gusto y conocer algunas curiosidades ';
+})
+const crear =() =>{
+    const template = data.films.map((films) => `<li>${films.title } ${ - films.release_date}</li>`);
+    console.log( template );
+    let list=document.getElementById("list");
+    list.innerHTML = template.join('')
+
+  }
+
+document.getElementById("pag3").style.display="none";
+
+const btn1= document.getElementById("btn3");
+btn1.addEventListener("click", open3 =>{
+ document.getElementById("pag3").style.display="block";
+ document.getElementById("pag2").style.display="none";
+ document.getElementById("pag1").style.display="none";
+})
+console.log(data);
+crear();
+filtervehicles();
+filterlocation();
+rtgood();
+rtregular();
+rtbad();
+characters();