Laboratoria · Addis-cx · Jan 22, 2024 · Jan 23, 2024 · Jan 24, 2024 · Jan 24, 2024
diff --git a/desktop.ini b/desktop.ini
@@ -0,0 +1,6 @@
+[.ShellClassInfo]
+IconResource=C:\Users\catal\OneDrive\Escritorio\Wallpaper\Iconos\Purple folders\Flat _files.ico,0
+[ViewState]
+Mode=
+Vid=
+FolderType=Generic
diff --git a/src/Imagenes/Arrietty-y-el-mundo-de-los-diminutos.jpg b/src/Imagenes/Arrietty-y-el-mundo-de-los-diminutos.jpg
diff --git a/src/Imagenes/Cuentos-de-Terramar.jpg b/src/Imagenes/Cuentos-de-Terramar.jpg
diff --git a/src/Imagenes/Earwig-y-la-bruja.webp b/src/Imagenes/Earwig-y-la-bruja.webp
diff --git a/src/Imagenes/El-castillo-ambulante.jpg b/src/Imagenes/El-castillo-ambulante.jpg
diff --git a/src/Imagenes/El-castillo-en-el-cielo.jpg b/src/Imagenes/El-castillo-en-el-cielo.jpg
diff --git a/src/Imagenes/El-chico-y-la-garza.jpg b/src/Imagenes/El-chico-y-la-garza.jpg
diff --git a/src/Imagenes/El-cuento-de-la-princesa-Kaguya.jpg b/src/Imagenes/El-cuento-de-la-princesa-Kaguya.jpg
diff --git a/src/Imagenes/El-recuerdo-de-Marnie.jpg b/src/Imagenes/El-recuerdo-de-Marnie.jpg
diff --git a/src/Imagenes/El-viaje-de-Chihiro.png b/src/Imagenes/El-viaje-de-Chihiro.png
diff --git a/src/Imagenes/El-viento-se-levanta.jpg b/src/Imagenes/El-viento-se-levanta.jpg
diff --git a/src/Imagenes/Kiki-entregas-a-domicilio.webp b/src/Imagenes/Kiki-entregas-a-domicilio.webp
diff --git a/src/Imagenes/La-Colina-de-las-Amapolas.jpg b/src/Imagenes/La-Colina-de-las-Amapolas.jpg
diff --git a/src/Imagenes/La-princesa-Mononoke.webp b/src/Imagenes/La-princesa-Mononoke.webp
diff --git a/src/Imagenes/La-tumba-de-las-luciernagas.jpg b/src/Imagenes/La-tumba-de-las-luciernagas.jpg
diff --git a/src/Imagenes/Mi-vecino-totoro.png b/src/Imagenes/Mi-vecino-totoro.png
diff --git a/src/Imagenes/Mis-vecinos-los-Yamada.jpg b/src/Imagenes/Mis-vecinos-los-Yamada.jpg
diff --git a/src/Imagenes/Nausicaä-del-valle-del-viento.jpg b/src/Imagenes/Nausicaä-del-valle-del-viento.jpg
diff --git a/src/Imagenes/Pompoko.webp b/src/Imagenes/Pompoko.webp
diff --git a/src/Imagenes/Ponyo.jpg b/src/Imagenes/Ponyo.jpg
diff --git a/src/Imagenes/Porco-rosso.jpg b/src/Imagenes/Porco-rosso.jpg
diff --git a/src/Imagenes/Puedo-escuchar-el-mar.jpg b/src/Imagenes/Puedo-escuchar-el-mar.jpg
diff --git a/src/Imagenes/Recuerdos-del-ayer.webp b/src/Imagenes/Recuerdos-del-ayer.webp
diff --git a/src/Imagenes/Susurros-del-corazón.webp b/src/Imagenes/Susurros-del-corazón.webp
diff --git a/src/Imagenes/Totoro-png.png b/src/Imagenes/Totoro-png.png
diff --git a/src/Imagenes/favicon-256x256.png b/src/Imagenes/favicon-256x256.png
diff --git a/src/Imagenes/haru-en-el-reino-de-los-gatos.jpg b/src/Imagenes/haru-en-el-reino-de-los-gatos.jpg
diff --git a/...-chart-computer-icons-statistics-report-elevator-repair-miscellaneous-angle.png b/...-chart-computer-icons-statistics-report-elevator-repair-miscellaneous-angle.png
diff --git a/src/data/dataset.js b/src/data/dataset.js
diff --git a/src/dataFunctions.js b/src/dataFunctions.js
@@ -1,9 +1,47 @@
-// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
+export const filterGenders = (data, filterBy, value) => {
+  const filter = data.filter((movie) => movie.facts[filterBy].includes(value));
+  return filter;
+};
+
+export const sortFilms = (data, sortBy, sortOrder) => {
+  data.sort((a, b) => {
+    const movieA = a[sortBy].toLowerCase();
+    const movieB = b[sortBy].toLowerCase();
 
-export const example = () => {
-  return 'example';
+    if (sortOrder === "asc") {
+      return movieA.localeCompare(movieB);
+    } else if (sortOrder === "desc") {
+      return movieB.localeCompare(movieA);
+    }
+  });
+  return data;
 };
 
-export const anotherExample = () => {
-  return [];
+export const computeStats = (data) => {
+  const movies = data.flatMap((movie) => movie.facts.genders.split(", "));
+  console.log(movies);
+  const stats = movies.reduce((acc, genreFil) => {
+    genreFil = genreFil.trim();
+    acc[genreFil] += 1;
+    return acc;
+  }, {
+    "Acción": 0,
+    "Romance": 0,
+    "Fantasía": 0,
+    "Ciencia Ficción": 0,
+    "Terror": 0,
+    "Bélico": 0,
+    "Suspenso": 0,
+    "Infantil": 0,
+    "Familia": 0,
+    "Comedia": 0,
+    "Drama": 0,
+    "Aventura": 0,
+    "Misterio": 0,
+  });
+
+  const statsText = Object.entries(stats).map(([genre, count]) => `${genre}: ${count}`).join(', ')
+  return statsText;
 };
+
+
diff --git a/src/index.html b/src/index.html
@@ -1,11 +1,96 @@
 <!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" />
+
+    <link
+      href="https://fonts.googleapis.com/css2?family=Average&family=Cabin+Condensed&display=swap"
+      rel="stylesheet"
+    />
+    <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=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <title>Ghibli Lovers</title>
+    <link rel="icon" type="image/png" href="imagenes/icono-ramita.png" />
     <link rel="stylesheet" href="style.css" />
   </head>
+
   <body>
-    <script src="main.js" type="module"></script>
+    <header>
+      <div class="header">
+        <img
+          src="https://raw.githubusercontent.com/Addis-cx/DEV013-dataverse/html/src/Imagenes/Totoro-transparente.png"
+          alt="Dibujo del contorno de totoro, similar al logo de Studio Ghibli"
+          class="logo"
+        />
+        <div class="title">
+          <h1>スタジオジブリ</h1>
+          <h1>STUDIO GHIBLI</h1>
+        </div>
+        <label for="input">
+          <input type="text" class="movie-search" placeholder="Buscar" />
+        </label>
+      </div>
+    </header>
+
+    <div class="superButtons">
+      <label for="filter" class="buttons">
+        <select data-testid="select-filter" name="genders" id="filter">
+          <option value="genres">Filtrar por:</option>
+          <option value="Acción">Acción</option>
+          <option value="Aventura">Aventura</option>
+          <option value="Bélico">Bélico</option>
+          <option value="Ciencia Ficción">Ciencia Ficción</option>
+          <option value="Comedia">Comedia</option>
+          <option value="Drama">Drama</option>
+          <option value="Familia">Familia</option>
+          <option value="Fantasía">Fantasía</option>
+          <option value="Romance">Romance</option>
+          <option value="Terror">Terror</option>
+          <option value="Suspenso">Suspenso</option>
+          <option value="Infantil">Infantil</option>
+          <option value="Misterio">Misterio</option>
+        </select>
+      </label>
+
+      <label for="order" class="buttons">
+        <select data-testid="select-filter" name="sortOrder" id="order">
+          <option value="todos">Ordenar por:</option>
+          <option value="asc">A-Z</option>
+          <option value="desc">Z-A</option>
+        </select>
+      </label>
+
+      <label for="button" class="button2">
+        <button class="cleanerButton" type="button">Limpiar</button>
+      </label>
+
+      <label for="stats" class="button2">
+        <button class="statsButton">
+          <img
+            src="https://raw.githubusercontent.com/Addis-cx/DEV013-dataverse/html/src/Imagenes/estadisticas-transparente.png"
+            alt="Icono de estadisticas"
+          />
+        </button>
+      </label>
+    </div>
+
+    <div class="statsWindow noVisual">
+      <h3>Estadísticas de Géneros</h3>
+      <p class="statsMovie"></p>
+      <label for="button">
+        <button class="closeStats"><b>Ver menos</b></button>
+      </label>
+    </div>
+    <div class="statsFondo noVisual"></div>
+
+    <div id="root"></div>
+
+    <footer>Desarrolladoras Cataline Alarcón y Addis Pérez Castro 🌼</footer>
   </body>
-</html>
+  <script src="main.js" type="module"></script>
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,84 @@
-import { example } from './dataFunctions.js';
-import { renderItems } from './view.js';
+import { filterGenders, sortFilms, computeStats } from "./dataFunctions.js";
+import { renderItems } from "./view.js";
 
-import data from './data/dataset.js';
+import data from "./data/dataset.js";
+const newData = [...data];
 
-console.log(example, renderItems(data), data);
+const movieSearch = document.querySelector(".movie-search");
+const gendersFilms = document.querySelector("#filter");
+const orderFilms = document.querySelector("#order");
+const movieCards = document.querySelector("#root");
+const statsButton = document.querySelector(".statsButton");
+const statsWindow = document.querySelector(".statsWindow");
+const statsMovie = document.querySelector(".statsMovie")
+const closeStats = document.querySelector(".closeStats");
+const statsFondo = document.querySelector(".statsFondo");
+const cleanerButton = document.querySelector(".cleanerButton");
+
+movieCards.appendChild(renderItems(newData));
+
+movieSearch.addEventListener("input", function () {
+  const results = [];
+  const textSearch = movieSearch.value.toLowerCase();
+  const search = newData.filter((elemento) => {
+    return elemento.name.toLowerCase().includes(textSearch);
+  });
+
+  if (search) {
+    movieCards.innerHTML = "";
+    results.push(...search);
+    movieCards.appendChild(renderItems(results));
+  }
+});
+
+gendersFilms.addEventListener("change", function () {
+  movieCards.innerHTML = "";
+  sortFilms;
+  const selectedGender = gendersFilms.value;
+  const filterMovie = filterGenders(newData, "genders", selectedGender);
+  movieCards.appendChild(renderItems(filterMovie));
+});
+
+gendersFilms.addEventListener("change", function () {
+  movieCards.innerHTML = "";
+  const selectedGender = gendersFilms.value;
+  const filterMovie = filterGenders(newData, "genders", selectedGender);
+  sortFilms;
+  movieCards.appendChild(renderItems(filterMovie));
+
+});
+
+orderFilms.addEventListener("change", function () {
+  movieCards.innerHTML = "";
+  gendersFilms.value = "genres";
+  const selectOrder = orderFilms.value;
+  let filmAsc;
+
+  if (selectOrder === "asc") {
+    filmAsc = sortFilms(newData, "name", "asc");
+  } else {
+    filmAsc = sortFilms(newData, "name", "desc");
+  }
+  movieCards.appendChild(renderItems(filmAsc));
+});
+
+cleanerButton.addEventListener("click", function () { 
+  const newData = [...data]; 
+  movieSearch.value = ""; 
+  movieCards.innerHTML = ""; 
+  gendersFilms.value = "genres"; 
+  orderFilms.value = "todos"; 
+  movieCards.appendChild(renderItems(newData)); 
+});
+
+statsButton.addEventListener("click", function () {
+  statsMovie.textContent = computeStats(newData);
+  statsWindow.classList.remove("noVisual");
+  statsFondo.classList.remove("noVisual");
+});
+
+closeStats.addEventListener("click", function () {
+  statsWindow.classList.add("noVisual");
+  statsFondo.classList.add("noVisual");
+  return closeStats;
+});