Laboratoria · Claucegoma · May 26, 2023 · May 26, 2023 · May 26, 2023 · May 26, 2023
diff --git a/README.md b/README.md
diff --git a/img/Peliculas Ghibli/2023-06-16.png b/img/Peliculas Ghibli/2023-06-16.png
diff --git a/img/Peliculas Ghibli/alta1.png b/img/Peliculas Ghibli/alta1.png
diff --git a/img/Peliculas Ghibli/alta2.png b/img/Peliculas Ghibli/alta2.png
diff --git a/img/Peliculas Ghibli/alta3.png b/img/Peliculas Ghibli/alta3.png
diff --git a/img/Peliculas Ghibli/alta4.png b/img/Peliculas Ghibli/alta4.png
diff --git a/img/Peliculas Ghibli/alta5.png b/img/Peliculas Ghibli/alta5.png
diff --git a/img/Peliculas Ghibli/alta6.png b/img/Peliculas Ghibli/alta6.png
diff --git a/img/Peliculas Ghibli/baja1.jpg b/img/Peliculas Ghibli/baja1.jpg
diff --git a/img/Peliculas Ghibli/baja2.jpg b/img/Peliculas Ghibli/baja2.jpg
diff --git a/img/Peliculas Ghibli/baja3.jpg b/img/Peliculas Ghibli/baja3.jpg
diff --git a/img/Peliculas Ghibli/baja4.jpg b/img/Peliculas Ghibli/baja4.jpg
diff --git a/img/Peliculas Ghibli/baja5.jpg b/img/Peliculas Ghibli/baja5.jpg
diff --git a/img/Peliculas Ghibli/baja6.jpg b/img/Peliculas Ghibli/baja6.jpg
diff --git a/img/Peliculas Ghibli/principal1.png b/img/Peliculas Ghibli/principal1.png
diff --git a/img/Peliculas Ghibli/principal2.png b/img/Peliculas Ghibli/principal2.png
diff --git a/img/Peliculas Ghibli/principal3.png b/img/Peliculas Ghibli/principal3.png
diff --git a/img/Peliculas Ghibli/principal4.png b/img/Peliculas Ghibli/principal4.png
diff --git a/img/multiversoghibli.png b/img/multiversoghibli.png
diff --git a/src/Musica/miaudio.mp3 b/src/Musica/miaudio.mp3
diff --git a/src/Portada/portada2/portada2.jpg b/src/Portada/portada2/portada2.jpg
diff --git a/src/Portada/portadasin.png b/src/Portada/portadasin.png
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,38 @@
-// estas funciones son de ejemplo
+import data from "./data/ghibli/ghibli.js";
+// estas funciones son de ejemplo (funciones de ordenar, etc describe comportamiento de main.js)
 
-export const example = () => {
-  return 'example';
+export function allData() {
+  //función que toma la informacion de la data
+  return data.films;
+}
+
+//filtro por director
+export const filterDataDirector = (data, nameDirector) => {
+  if (!Array.isArray(data)) {
+    return [];
+  }
+  const newDataDirector = data.filter(
+    (movie) => movie.director === nameDirector
+  );
+  return newDataDirector;
+};
+
+//filtro por productor
+export const filterDataProducer = (data, nameProducer) => {
+  const newDataProducer = data.filter(
+    (movie) => movie.producer === nameProducer
+  );
+  return newDataProducer;
 };
 
-export const anotherExample = () => {
-  return 'OMG';
+//filtro por año ascendente y descendnte
+export const sortDataYear = (data, isAscendent) => {
+  const dataYear = data.sort((a, b) => {
+    if (isAscendent) {
+      return a.release_date - b.release_date;
+    } else {
+      return b.release_date - a.release_date;
+    }
+  });
+  return dataYear;
 };
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,94 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <title>Data Lovers</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Multiverso Ghibli</title>
     <link rel="stylesheet" href="style.css" />
   </head>
+
   <body>
-    <div id="root"></div>
+    <header id="header" class="header">
+      <audio controls  id="music" autoplay="true">
+        <source  src="Musica/miaudio.mp3"
+         type="audio/mpeg">
+        Your browser does not support the audio tag.
+      </audio>
+      <!-- (../ buscar fuera de carpeta) https://onlinevideoconverter.com/es -->
+      <!--<a href="index.html">
+
+    </a>-->
+      <h1>Ghibli Multiverse</h1>
+      <div class="flex">
+        <div>
+          <img class="portada" src="./Portada/portadasin.png" alt="principal" />
+        </div>
+        <div class="texto">
+          <p>
+            Ghibli (スタジオジブリ ) is a Japanese animation studio considered
+            by critics and many moviegoers as one of the best animation studios
+            in the world.
+          </p>
+          <p>
+            The studio is known for its animated feature films and has also
+            produced several short films for television.
+          </p>
+          <p>Below, you will find more info about this amazing movies.</p>
+        </div>
+      </div>
+    </header>
+
+    <main id="main__animations" class="main__animations">
+      <h2 id="animationsTitle">Movies</h2>
+      <br />
+      <div class="main__filtersAndCount">
+        <!--contador de peliculas-->
+        <p id="countFilms" class="countFilms"></p>
+        <div class="filters">
+          <select id="filters__director" class="filters__director">
+            <option selected value="all">Director</option>
+            <option value="Hayao Miyazaki">Hayao Miyazaki</option>
+            <option value="Gorō Miyazaki">Goro Miyazaki</option>
+            <option value="Isao Takahata">Isao Takahata</option>
+            <option value="Hiroyuki Morita">Hiroyuki Morita</option>
+            <option value="Hiromasa Yonebayashi">Hiromasa Yonebayashi</option>
+            <option value="Yoshifumi Kondō">Yoshifumi Kondo</option>
+          </select>
+          <select id="filters__producer" class="filters__producer">
+            <option selected value="all">Producer</option>
+            <option value="Isao Takahata">Isao Takahata</option>
+            <option value="Toshio Suzuki">Toshio Suzuki</option>
+            <option value="Toru Hara">Toru Hara</option>
+            <option value="Hayao Miyazaki">Hayao Miyazaki</option>
+            <option value="Yoshiaki Nishimura">Yoshiaki Nishimura</option>
+          </select>
+          <select id="filters__year" class="filters__year">
+            <option value="0">More recent</option>
+            <option value="1">Older</option>
+          </select>
+          <button type="button" id="clean">clean</button>
+        </div>
+      </div>
+      <br>
+      <br>
+      <div align="center">
+      <button type="button" id="search">Click the image for more information</button>
+    </div>
+    <br>
+    <br>
+
+      <div class="animations" id="animations"></div>
+      <!-- Se crean las tarjetas de forma dinamica -->
+    </main>
+    <hr />
+    <footer>
+      <div align="center">
+        🔥🐱☔ &copy;Copyright Ghibli Multiverse a.c. 2023 Dany &amp; Ceci 🐺🛩🐷
+      </div>
+      <!--Se buscarón emojis (https://emojikeyboard.io/)-->
+    </footer>
+    <hr />
+
     <script src="main.js" type="module"></script>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,112 @@
-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.js';  y aqui va la interración con el DOM
 
-console.log(example, data);
+import {
+  allData,
+  filterDataDirector,
+  filterDataProducer,
+  sortDataYear,
+} from "./data.js";
+
+
+const reproducer = document.getElementById("music");
+reproducer.volume;
+
+const cardcontainer = document.getElementById("animations");
+const allTheMovies = allData();
+function showMovies(movieList) {
+  //crear un ciclo for que me muestre todos los elementos de mi arreglo en la consola
+  for (let index = 0; index < movieList.length; index++) {
+    const movie = movieList[index];
+    //console.log(movie)
+    const card = document.createElement("div");
+    const image = document.createElement("img"); //creatElement=hace referencia a nuestro contenedor de imagen
+    image.src = movie.poster; //src=img .poster=asi aparece en la data de ghibli
+    image.classList.add("card"); //add es para añadir la classList
+    image.classList.add("show");
+    const secondContainer = document.createElement("div");
+    secondContainer.classList.add("card");
+    secondContainer.classList.add("hide");
+    const title2 = document.createElement("h4");
+    title2.textContent = movie.title;
+    const description2 = document.createElement("p");
+    description2.textContent = movie.description;
+    const year = document.createElement("p");
+    year.textContent = movie.release_date;
+
+    secondContainer.appendChild(title2); //appendchild son nodos que conectan jerarquías de padre e hijo
+    secondContainer.appendChild(description2);
+    secondContainer.appendChild(year);
+
+    card.appendChild(image); //interación con DOM
+    card.appendChild(secondContainer);
+    cardcontainer.appendChild(card);
+
+    card.addEventListener("click", () => {
+      //e=parametro del evento
+      if (image.classList.contains("show")) {
+        image.classList.add("hide");
+        image.classList.remove("show");
+        secondContainer.classList.remove("hide");
+        secondContainer.classList.add("show");
+      } else {
+        image.classList.add("show");
+        image.classList.remove("hide");
+        secondContainer.classList.remove("show");
+        secondContainer.classList.add("hide");
+      }
+      //console.log(movie.title)
+    });
+  }
+  return;
+}
+
+showMovies(allTheMovies);
+
+//filtrar por director
+
+const filterXDirector = document.getElementById("filters__director");
+filterXDirector.addEventListener("change", () => {
+  document.getElementById("animations").innerHTML = ""; //innerHTML y campo vacio nos ayuda a limpiar los elementos del DOM
+  if (filterXDirector.value === "all") {
+    showMovies(allTheMovies);
+  } else {
+    showMovies(filterDataDirector(allTheMovies, filterXDirector.value)); //se usa allTheMovies para que funcione
+  }
+});
+
+//filtrar por productor
+const filterXProducer = document.getElementById("filters__producer");
+filterXProducer.addEventListener("change", () => {
+  document.getElementById("animations").innerHTML = "";
+  if (filterXProducer.value === "all") {
+    showMovies(allTheMovies);
+  } else {
+    showMovies(filterDataProducer(allTheMovies, filterXProducer.value));
+  }
+});
+
+// Ordenar los años de menor a mayor y viceversa
+/* eslint-disable */
+const filterYear = document.getElementById("filters__year");
+filterYear.addEventListener("change", () => {
+  document.getElementById("animations").innerHTML = "";
+  switch (filterYear.value) {
+    case "0":
+      const moreRecent = sortDataYear(allTheMovies, 0);
+      showMovies(moreRecent);
+      break;  //Al encontrar un "break", no será ejecutado el case 1:'
+    case "1":
+      const older = sortDataYear(allTheMovies, 1);
+      showMovies(older);
+      break;
+  }
+});
+
+
+const btnClean = document.getElementById("clean");
+btnClean.addEventListener("click", () => {
+document.getElementById("animations").innerHTML = ""
+if ( filterXDirector != "all" || filterXProducer != "all" || filterYear != "all")
+  showMovies(allTheMovies);
+
+});
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,133 @@
+* {
+    margin: 0;
+    padding: 0;
+    text-decoration: none;
+    box-sizing: border-box;
+    cursor: url(https://cur.cursors-4u.net/special/spe-2/spe113.ani),
+      url(https://cur.cursors-4u.net/special/spe-2/spe113.png), auto;
+  }
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    background-size: cover;
+    width: 100%;
+  }
+
+body {
+  background-color: #9370db;
+  font-size: 13px;
+  font-family: sans-serif;
+}
+
+.main__filtersAndCount {
+    display: flex;
+    justify-content: center;
+    padding: 5px 12px;
+  }
+
+.flex {
+  display: flex;
+}
+
+h1 {
+  display: flex;
+  justify-content: center;
+  font-size: 4.3rem;
+  color: #eeca06;
+}
+
+h2 {
+  font-size: 3rem;
+  color: aliceblue;
+  display: flex;
+  justify-content: center;
+  padding-top: 50px;
+}
+
+h4 {
+  font-size: 2rem;
+}
+
+
+.portada {
+  width: 400px;
+}
+
+.portada img {
+    display: block;
+    width: 200px;
+    height: 200px;
+    padding-left: 140px;
+  }
+
+.texto {
+  padding-top: 150px;
+  color: aliceblue;
+  font-size: 2rem;
+  padding-right: 50px;
+}
+
+button {
+  font-weight: bold;
+  padding: 7px 20px;
+  border-radius: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
+  background-color: rgb(188, 153, 229);
+}
+
+#search{
+    background-color: #eeca06;
+}
+
+button:hover {
+  background-color: rgb(121, 10, 181);
+}
+
+
+.animations {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.card {
+  width: 290px;
+  height: 370px;
+  margin: 37px;
+  border: rgb(81, 1, 151) 1px solid;
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
+  text-align: center;
+  background: linear-gradient(45deg, rgb(109, 51, 210), rgb(157, 191, 255));
+  border-radius: 15px;
+  background-size: auto;
+  position: relative;
+  font-size: 0.9rem;
+}
+
+.show {
+  display: inline-block;
+}
+
+.hide {
+  display: none;
+}
+
+audio{
+  display:none;
+}
+
+footer {
+    width: 100%;
+    height: 4rem;
+    text-align: center;
+    line-height: 4rem;
+    font-size: 1.5rem;
+  }
+  .card h4{
+      font-size: 1rem;
+      margin: 5px;
+      padding: 5px 10px;
+  }