Laboratoria · Fabygranados · Jun 16, 2023 · Jun 17, 2023 · Jun 20, 2023 · Jun 22, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/src/animacionesGhibli.html b/src/animacionesGhibli.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Indica el tamaño de la pantalla-->
+  <title>Data Lovers</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="main.js" type="module"></script>
+
+  <header class="temaPeli">
+    <h1 class="tituloPrincipal"> Films Studio Ghibli</h1>
+  </header>
+  <nav class="navegacion">
+    <select id="ordenaPor" class="selector">
+      <option value="0">Sort By</option>
+      <option value="1">A-Z</option>
+      <option value="2">Z-A</option>
+      <option value="3">Year Recent First</option>
+      <option value="4">Year Old First</option>
+      <option value="5">Score Hightest First</option>
+      <option value="6">Score Lowest First</option>
+
+    </select>
+    <select id="Producers" class="selector">
+      <option value="Producers">Producers</option>
+      <option value="Isao Takahata">Isao Takahata</option>
+      <option value="Hayao Miyazaki">Hayao Miyazaki</option>
+      <option value="Toru Hara">Toru Hara</option>
+      <option value="Toshio Suzuki">Toshio Suzuki</option>
+      <option value="Yoshiaki Nishimura">Yoshiaki Nishimura</option>
+    </select>
+
+    <select id="Directors" class="selector">
+      <option value="Directors">Directors</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="principal">Back to Main Page</button>
+  </nav>
+  <main style="padding: 1px;;">
+    <section class="cards"> </section>
+  </main>
+  <footer>
+    <p>Creada por: Nancy Nallely Martinez Dominguez y Fabiola Granados</p>
+  </footer>
+  <script src="main.js" type="module"></script>
+</body>
+
+</html>
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,75 @@
-// estas funciones son de ejemplo
+const data = {
 
-export const example = () => {
-  return 'example';
-};
-
-export const anotherExample = () => {
-  return 'OMG';
-};
+  paginaPrincipal() {
+    window.location.href = "index.html";// Se agrega a la funcion principal la localizacion para direccionar 
+  },
+
+  OrdenaPeliculasAz(arrayPeliculas) {
+    const peliculasOrdenadas = arrayPeliculas.sort((a, b) => {// Declaramos variable peliculas ordenadas igual al arreglopeliculas se aplica el metodo sort y se le pasa una funcion que contien los parametros a y b
+      return a.title.localeCompare(b.title);// regresa el resultado de comparar el titulo a con el titulo b, localeCompare ordena alfabeticamente en el ciclo
+
+    });
+    return peliculasOrdenadas;
+  },
+
+  OrdenaPeliculasZa(arrayPeliculas) {
+    const peliculasOrdenadasZa = arrayPeliculas.sort((a, b) => {// Declaramos variable peliculas ordenadas igual al arreglopeliculas se aplica el metodo sort y se le pasa una funcion que contien los parametros a y b
+      return b.title.localeCompare(a.title);// regresa el resultado de comparar el titulo a con el titulo b, localeCompare ordena alfabeticamente en el ciclo
+
+    });
+    return peliculasOrdenadasZa;
+  },
+
+  OrdenaPeliculasAñoReciente(arrayPeliculas) {
+    const peliculasOrdenadasAñoReciente = arrayPeliculas.sort((a, b) => {// Declaramos variable peliculas ordenadas igual al arreglopeliculas se aplica el metodo sort y se le pasa una funcion que contien los parametros a y b
+      return b.release_date - a.release_date;// regresa el resultado de comparar el titulo a con el titulo b, localeCompare ordena alfabeticamente en el ciclo
+    });
+    return peliculasOrdenadasAñoReciente;
+  },
+
+  OrdenaPeliculasAñoViejo(arrayPeliculas) {
+    const peliculasOrdenadasAñoViejo = arrayPeliculas.sort((a, b) => {// Declaramos variable peliculas ordenadas igual al arreglopeliculas se aplica el metodo sort y se le pasa una funcion que contien los parametros a y b
+      return a.release_date - b.release_date;// regresa el resultado de comparar el titulo a con el titulo b, localeCompare ordena alfabeticamente en el ciclo
+    });
+    return peliculasOrdenadasAñoViejo;
+  },
+
+  OrdenaPeliculasScoreAlto(arrayPeliculas) {
+    const peliculasOrdenadasScoreAlto = arrayPeliculas.sort((a, b) => {// Declaramos variable peliculas ordenadas igual al arreglopeliculas se aplica el metodo sort y se le pasa una funcion que contien los parametros a y b
+      return b.rt_score - a.rt_score;// regresa el resultado de comparar el titulo a con el titulo b, localeCompare ordena alfabeticamente en el ciclo
+
+    });
+    return peliculasOrdenadasScoreAlto;
+  },
+
+  OrdenaPeliculasScoreBajo(arrayPeliculas) {
+    const peliculasOrdenadasScoreBajo = arrayPeliculas.sort((a, b) => {// Declaramos variable peliculas ordenadas igual al arreglopeliculas se aplica el metodo sort y se le pasa una funcion que contien los parametros a y b
+      return a.rt_score - b.rt_score;// regresa el resultado de comparar el titulo a con el titulo b, localeCompare ordena alfabeticamente en el ciclo
+
+    });
+    return peliculasOrdenadasScoreBajo;
+  },
+
+
+  OrdenaPeliculasProductor(arrayPeliculas, nombreProductor) {
+    const resultadoProductor = arrayPeliculas.filter(pelicula => pelicula.producer === nombreProductor);
+    if (nombreProductor === "Producers") {
+      return arrayPeliculas;
+    } else {
+      return resultadoProductor;
+    }
+  },
+
+  OrdenaPeliculasDirector(arrayPeliculas, nombreDirector) {
+    const resultadoDirector = arrayPeliculas.filter(pelicula => pelicula.director === nombreDirector);
+    if (nombreDirector === "Directors") {
+      return arrayPeliculas;
+    } else {
+      return resultadoDirector;
+    }
+  },
+
+}
+export default data;
+
+
diff --git a/src/index.html b/src/index.html
@@ -3,10 +3,23 @@
   <head>
     <meta charset="utf-8">
     <title>Data Lovers</title>
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="styleIndex.css" />
   </head>
   <body>
-    <div id="root"></div>
-    <script src="main.js" type="module"></script>
+    <video autoplay loop muted>
+      <source src="./multimedia/StudiosGhibli.mp4" type="video/mp4">
+    </video>
+    <audio id="myAudio" src="./multimedia/musicaGhibli.mp3" autoplay></audio>
+  <div class="contenido">
+    <header>
+      <h1 class="titulo">Studio Ghibli</h1>
+      <h5>Fanpage</h5>
+    </header>
+    <div class="botones">
+      <button onclick="location.href='./animacionesGhibli.html'">Films</button>
+      <button onclick="location.href='./personajes.html'">Personajes</button>
+    </div>
+  <footer>by Nancy Martinez✨ & Faby Granados💚</footer>
+  </div>
   </body>
-</html>
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,89 @@
-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';
 
-console.log(example, data);
+import data from './data.js';
+import peliculas from './data/ghibli/ghibli.js';// Se importa la data de studio ghibli
+
+const botonVolverPrincipal = document.getElementById("principal");// Se declara la variable botonVolverPrincipal, y se llama al elemento del DOM por su Id.
+if (botonVolverPrincipal !== null) {
+  botonVolverPrincipal.addEventListener("click", data.paginaPrincipal);// Se crea un evento al dar click se dirige a la funcion pagina principal
+  window.addEventListener("load", mostrarPeliculas(peliculas.films));// Se agrega el evento escucha para que cuando se cargue la pagina films se muestren las cards
+}
+
+
+const selectElement = document.querySelector('#ordenaPor');//Se crea una constante y se le asigna el elemento que se obtiene con queryselector
+if (selectElement !== null) {
+  selectElement.addEventListener('change', (event) => {// A la constante se le agrega un elemento, que cuando cambia crea un evento
+    const opcionSeleccionada = event.target.value;// Se declara una constante y le asigna el valor del elemento
+    let peliculasOrdenadas;
+    switch (opcionSeleccionada) {
+    case "0":
+      peliculasOrdenadas = peliculas.films.slice();
+      break;
+    case "1":
+      peliculasOrdenadas = data.OrdenaPeliculasAz(peliculas.films.slice());
+      break;
+    case "2":
+      peliculasOrdenadas = data.OrdenaPeliculasZa(peliculas.films.slice());
+      break;
+    case "3":
+      peliculasOrdenadas = data.OrdenaPeliculasAñoReciente(peliculas.films.slice());
+      break;
+    case "4":
+      peliculasOrdenadas = data.OrdenaPeliculasAñoViejo(peliculas.films.slice());
+      break;
+    case "5":
+      peliculasOrdenadas = data.OrdenaPeliculasScoreAlto(peliculas.films.slice());
+      break;
+    case "6":
+      peliculasOrdenadas = data.OrdenaPeliculasScoreBajo(peliculas.films.slice());
+      break;
+    }
+    mostrarPeliculas(peliculasOrdenadas);
+  });
+}
+
+const selectProductor = document.querySelector('#Producers');//Se crea una constante y se le asigna el elemento que se obtiene con queryselector
+if (selectProductor !== null) {
+  selectProductor.addEventListener('change', (event) => {// A la constante se le agrega un elemento, que cuando cambia crea un evento
+    const opcionSeleccionada = event.target.value;// Se declara una constante y le asigna el valor del elemento
+    const peliculasProductor = data.OrdenaPeliculasProductor(peliculas.films, opcionSeleccionada);
+    mostrarPeliculas(peliculasProductor);
+  });
+}
+
+
+const selectDirector = document.querySelector('#Directors');//Se crea una constante y se le asigna el elemento que se obtiene con queryselector
+if (selectDirector !== null) {
+  selectDirector.addEventListener('change', (event) => {// A la constante se le agrega un elemento, que cuando cambia crea un evento
+    const opcionSeleccionada = event.target.value;// Se declara una constante y le asigna el valor del elemento
+    const peliculasDirector = data.OrdenaPeliculasDirector(peliculas.films, opcionSeleccionada);
+    mostrarPeliculas(peliculasDirector);
+  });
+}
+
+function mostrarPeliculas(peliculas) {
+  const carSeccion = document.querySelector(".cards");// Se usa querySelector para encontrar la primera coincidencia de cards
+  let cards = "";
+  let colorFondo = 1;
+  peliculas.forEach(pelicula => {// Se recorre el array que contien las peliculas pormedio de forEach
+    let card = '<article class="card">';// declara la variable card y se le asigna una etiqueta article como texto
+    card += '<picture class="imagen">';// a la variable card se le concatena etiqueta picture
+    card += '<img class="category__' + colorFondo++ + '" src="' + pelicula.poster + '" alt="" />';
+    card += '</picture>';
+    card += '<div class="card-content">';
+    card += '<p class="category category__' + colorFondo + '">' + pelicula.title + '</p><br><br>';
+    card += '<p>' + pelicula.description + '</p>';
+    card += '</div><!-- .card-content -->';
+    card += '<footer>';
+    card += '<div class="post-meta">';
+    card += '<span class="timestamp">Score: ' + pelicula.rt_score + '</span><br>';
+    card += '<span class="comments">Año: ' + pelicula.release_date + '</span><br>';
+    card += '<span class="comments">Productor: ' + pelicula.producer + '</span><br>';
+    card += '<span class="comments">Director: ' + pelicula.director + '</span><br>';
+    card += '</div>';
+    card += '</footer>';
+    card += '</article>';
+    //console.log("esto hace el forEach en card: "+card);
+    cards += card;
+  });
+  carSeccion.innerHTML = cards;
+}
diff --git a/src/modulepersonajes.js b/src/modulepersonajes.js
@@ -0,0 +1,68 @@
+
+import ghibli from "./data/ghibli/ghibli.js";
+
+const selectMovie = document.querySelectorAll('button');
+const peopleElement = document.querySelector('#people');
+
+if (selectMovie !== null & peopleElement !== null) {
+  selectMovie.forEach(button =>{
+    button.addEventListener('click', (event) =>{
+      const selectMovieValue = event.target.value;
+
+      let movieTitle ="";
+      let movieCharacters = [];
+
+      switch (selectMovieValue) {
+      case "0":
+        movieTitle = (ghibli.films[0].title);
+        movieCharacters = ghibli.films[0].people;
+        break;
+      case "1":
+        movieTitle = (ghibli.films[1].title);
+        movieCharacters = ghibli.films[1].people;
+        break;
+      case "2":
+        movieTitle = (ghibli.films[2].title);
+        movieCharacters = ghibli.films[2].people;
+        break;
+      case "3":
+        movieTitle = (ghibli.films[3].title);
+        movieCharacters = ghibli.films[3].people;
+        break;
+      case "4":
+        movieTitle = (ghibli.films[4].title);
+        movieCharacters = ghibli.films[4].people;
+        break;
+      case "5":
+        movieTitle = (ghibli.films[5].title);
+        movieCharacters = ghibli.films[5].people;
+        break;
+      default:
+        movieTitle = "";
+        movieCharacters = [];
+      }     
+      const charactersList = createCharactersList(movieCharacters);   
+      const html = movieTitle ? "<h2>" + movieTitle + "</h2>" + charactersList :"Selecciona una pelicula ";
+      peopleElement.innerHTML = html;
+    });
+  });
+}
+function createCharactersList(characters) {
+  if (characters.length === 0) {
+    return "<p>No se encontraron personajes para esta película.</p>";
+  }
+
+  let charactersListHTML = '<div class="name-image">';
+  characters.forEach(function(character) {
+    charactersListHTML += '<div class="contenedor"' +
+                '<h3><strong>' + character.name + '</strong>' + character.gender + '</h3>' +
+              '<ul>' +'<img src=' + character.img + '/>' +
+                  '<li>Age: ' + character.age + '</li>' +
+                  '<li>Hair Color: ' + character.hair_color + '</li>' +
+                  '<li>Specie: ' + character.specie + '</li>' +
+              '</ul>'+'</div>';
+  });
+  charactersListHTML += '</div>';
+
+  return charactersListHTML;
+}
diff --git a/src/multimedia/BadScript-Regular.ttf b/src/multimedia/BadScript-Regular.ttf
diff --git a/src/multimedia/CabinSketch-Bold.ttf b/src/multimedia/CabinSketch-Bold.ttf
diff --git a/src/multimedia/FONDO G.png b/src/multimedia/FONDO G.png
diff --git a/src/multimedia/Fondos/fondo1.jpg b/src/multimedia/Fondos/fondo1.jpg
diff --git a/src/multimedia/Fondos/fondo3.jpg b/src/multimedia/Fondos/fondo3.jpg
diff --git a/src/multimedia/Fondos/fondo4.jpg b/src/multimedia/Fondos/fondo4.jpg
diff --git a/src/multimedia/Fondos/fondo5.jpg b/src/multimedia/Fondos/fondo5.jpg
diff --git a/src/multimedia/Fondos/fondo6.jpg b/src/multimedia/Fondos/fondo6.jpg
diff --git a/src/multimedia/Fondos/fondo7.jpg b/src/multimedia/Fondos/fondo7.jpg
diff --git a/src/multimedia/Gorō Miyazaki.jpg b/src/multimedia/Gorō Miyazaki.jpg
diff --git a/src/multimedia/Hiromasa Yonebayashi.jpg b/src/multimedia/Hiromasa Yonebayashi.jpg
diff --git a/src/multimedia/Hiroyuki Morita.webp b/src/multimedia/Hiroyuki Morita.webp
diff --git a/src/multimedia/Isao Takahata.jpg b/src/multimedia/Isao Takahata.jpg
diff --git a/src/multimedia/RubikMoonrocks-Regular.ttf b/src/multimedia/RubikMoonrocks-Regular.ttf
diff --git a/src/multimedia/Studio Ghibli Edit.mp4 b/src/multimedia/Studio Ghibli Edit.mp4
diff --git a/src/multimedia/StudioGhibli.mp4 b/src/multimedia/StudioGhibli.mp4
diff --git a/src/multimedia/StudiosGhibli.mp4 b/src/multimedia/StudiosGhibli.mp4
diff --git a/src/multimedia/Yoshifumi Kondō.png b/src/multimedia/Yoshifumi Kondō.png
diff --git a/src/multimedia/f2.png b/src/multimedia/f2.png
diff --git a/src/multimedia/f3.png b/src/multimedia/f3.png
diff --git a/src/multimedia/filmspantalla.png b/src/multimedia/filmspantalla.png
diff --git a/src/multimedia/fondo botones.jpg b/src/multimedia/fondo botones.jpg
diff --git a/src/multimedia/fondoB.jpg b/src/multimedia/fondoB.jpg
diff --git a/src/multimedia/fondoBO.jpg b/src/multimedia/fondoBO.jpg
diff --git a/src/multimedia/fondog.png b/src/multimedia/fondog.png
diff --git a/src/multimedia/fondog2.png b/src/multimedia/fondog2.png
diff --git a/src/multimedia/fondog3.png b/src/multimedia/fondog3.png
diff --git a/src/multimedia/fondos.png b/src/multimedia/fondos.png
diff --git a/src/multimedia/ghibli 2.gif b/src/multimedia/ghibli 2.gif
diff --git a/src/multimedia/ghibli-studio1.gif b/src/multimedia/ghibli-studio1.gif
diff --git a/src/multimedia/ghibli-studio2.gif b/src/multimedia/ghibli-studio2.gif
diff --git a/src/multimedia/ghibli-studio3.gif b/src/multimedia/ghibli-studio3.gif
diff --git a/src/multimedia/ghibli-studio4.gif b/src/multimedia/ghibli-studio4.gif
diff --git a/src/multimedia/ghibli.gif b/src/multimedia/ghibli.gif
diff --git a/src/multimedia/ghibli.jpg b/src/multimedia/ghibli.jpg
diff --git a/src/multimedia/ghibli2.png b/src/multimedia/ghibli2.png
diff --git a/src/multimedia/ghibli4.jpg b/src/multimedia/ghibli4.jpg
diff --git a/src/multimedia/ghibli6.gif b/src/multimedia/ghibli6.gif
diff --git a/src/multimedia/ghibli7.gif b/src/multimedia/ghibli7.gif
diff --git a/src/multimedia/ghibli9.gif b/src/multimedia/ghibli9.gif
diff --git a/src/multimedia/gif ghibli5.webp b/src/multimedia/gif ghibli5.webp
diff --git a/src/multimedia/meme2.jpg b/src/multimedia/meme2.jpg
diff --git a/src/multimedia/musicaGhibli.mp3 b/src/multimedia/musicaGhibli.mp3
diff --git a/src/multimedia/nubes.gif b/src/multimedia/nubes.gif
diff --git a/src/multimedia/t1.fig b/src/multimedia/t1.fig
diff --git a/src/multimedia/totoro.png b/src/multimedia/totoro.png