Change: filters & responsive

package.json

@@ -19,7 +19,7 @@
     "eslint": "^8.3.0",
     "gh-pages": "^3.1.0",
     "htmlhint": "^1.0.0",
-    "jest": "^27.0.1",
+    "jest": "^27.5.1",
     "opener": "^1.5.1",
     "serve": "^13.0.2"
   },
@@ -31,4 +31,4 @@
     "version": "6.3.0",
     "commit": "19ca89e6e299d9b55d5e47f92352b74ee10a3c0a"
   }
-}
+}

src/data.js

@@ -1,9 +1,123 @@
-// estas funciones son de ejemplo
+/* eslint-disable no-undef */
+//Estamos usando JavaScript modular. Export e Import son declaraciones.
+//El uso de export/import permite compartir elementos (variables, funciones, clases) entre diferentes archivos en un proyecto de JS
 
-export const example = () => {
-  return 'example';
-};
 
-export const anotherExample = () => {
-  return 'OMG';
-};
+//______________SCORE PROMEDIO EN ROTTEN TOMATOES
+function prom(array) {
+  let suma = 0;
+  let contador = 0;
+
+  for (let i = 0; i < array.length; i++) {
+    const score = parseFloat(array[i].rt_score);//convertir array en número
+    if (!isNaN(score)) { //...si es un número
+      suma = suma + score;
+      contador++;
+    }
+  }
+
+  return contador === 0 ? 0 : suma / contador; //operador ternario los dos puntos separan las dos alternativas
+}
+
+//______________TOTAL DE ESPECIES
+function countSpecies(array) {
+  const uniqueSpecies = new Set();//para crear conjunto único
+  array.forEach(film => {
+    film.people.filter(people => people.specie).forEach(person => {
+      const specie = person.specie;
+      uniqueSpecies.add(specie);
+    });
+  });
+  return uniqueSpecies.size;
+}
+
+//______________TOTAL DE VEHÍCULOS
+function countVehicles(array) {
+  const uniqueVehicles = new Set();
+  array.forEach(film => {
+    if (film.vehicles) {
+      film.vehicles.forEach(vehicles => {
+        const vehiclesName = vehicles.name;
+        uniqueVehicles.add(vehiclesName);
+      });
+    }
+  });
+  return uniqueVehicles.size; 
+}
+
+//______PERSONAJES ORDENADOS ALFABÉTICAMENTE
+function alphabeticalOrderPeople(array) { 
+  const result = []; 
+
+  array.forEach(film => {
+    film.people.filter(people => people.name).forEach(({ name, img }) => {
+      result.push({ name, film: film.title, img });
+    });
+  });
+  result.sort((a, b) => a.name.localeCompare(b.name));//método sort para ordenar el arreglo result
+  return result;
+}
+
+//______PELÍCULAS ORDENADAS ALFABÉTICAMENTE
+function alphabeticalOrderFilms(array) {
+  array.sort((a, b) => a.title.localeCompare(b.title));
+  return array;
+}
+
+//______PELÍCULAS ORDENADAS POR AÑO
+
+function yearOrderMovies(array) {
+
+  array.filter(film => film.release_date);
+
+  array.sort((a, b) => a.release_date.localeCompare(b.release_date));
+
+  const orderedMoviesAge = array.map(film => ({
+    title: film.title,
+    release_date: film.release_date,
+  }));
+
+  return orderedMoviesAge;
+}
+
+//______PELÍCULAS ORDENADAS POR DIRECTOR
+
+function directorOrderMovies(array) {
+
+  const filteredMovies = array.filter(film => film.director);
+
+  filteredMovies.sort((a, b) => a.director.localeCompare(b.director));
+
+  const orderedMoviesDirector = array.map(film => ({
+    title: film.title,
+    director: film.director,
+  }));
+
+  return orderedMoviesDirector;
+}
+
+
+
+//_____________________________________________________________________________________
+
+//______PERSONAJES ORDENADOS POR PELÍCULA
+
+function moviesOrderPeople(array) {
+  const resultArray = [];
+
+  array.forEach(film => {
+    film.people.filter(people => people.name).forEach(({ name, img }) => resultArray.push({ name, film: film.title, img }));
+  });
+
+  resultArray.sort((a, b) => a.film.localeCompare(b.film));
+
+  return resultArray;
+}
+
+//______PERSONAJES ORDENADOS POR GRUPO ETARIO
+
+
+
+
+export {prom, alphabeticalOrderPeople, alphabeticalOrderFilms, yearOrderMovies, directorOrderMovies, countSpecies, countVehicles, moviesOrderPeople }
+

src/data/ghibli/ghibli.js

@@ -226,7 +226,7 @@ export default {
         {
           "id": "d5df3c04-f355-4038-833c-83bd3502b6b9",
           "name": "Mei Kusakabe",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/b/b5/God_Jul_Mei_%C3%B6nskar_fr%C3%A5n_Tomten.jpg",
+          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/0/01/Mei_Kusakabe.jpg",
           "gender": "Female",
           "age": "4",
           "eye_color": "Brown",
@@ -510,7 +510,7 @@ export default {
         {
           "id": "227c01a6-4e29-4582-bc4b-35106a704ab0",
           "name": "Mrs. Yokokawa",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/3/39/SeitaMother.png",
+          "img": "https://cintilatio.com/wp-content/uploads/2020/09/La-tumba-de-las-luciernagas-1.3.jpg",
           "gender": "Female",
           "age": "Adult",
           "eye_color": "Black",
@@ -520,7 +520,7 @@ export default {
         {
           "id": "023306e3-9fc6-4d1d-b681-d4649dcbfff9",
           "name": "Kiyoshi Yokokawa",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/f/f6/SeitaFather3.jpg",
+          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/b/b3/Seita_Father_3.jpg",
           "gender": "Male",
           "age": "40",
           "eye_color": "Black",
@@ -530,7 +530,7 @@ export default {
         {
           "id": "0e18b23d-1f21-4a83-a6de-f01147624875",
           "name": "Seita's Aunt",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/0/09/SeitaAunt.jpg",
+          "img": "https://www.ecartelera.com/images/sets/33300/33310.jpg",
           "gender": "Female",
           "age": "Elder",
           "eye_color": "Black",
@@ -574,7 +574,7 @@ export default {
         {
           "id": "52ed5cad-2464-481f-9786-8533b8de95ff",
           "name": "Mr. Okajima",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/5/58/Mr._Okajima.png",
+          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/2/21/Taeko%27s_Father.png",
           "gender": "Male",
           "age": "Middle age",
           "eye_color": "Black",
@@ -1021,7 +1021,7 @@ export default {
         {
           "id": "34277bec-7401-43fa-a00a-5aee64b45b08",
           "name": "Eboshi",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/9/9f/Eboshi.png",
+          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/5/53/Eboshi.jpg",
           "gender": "Female",
           "age": "Adult",
           "eye_color": "Hazel",
@@ -1259,7 +1259,7 @@ export default {
         {
           "id": "cf0a2a1b-8b65-4794-98ae-bd89de49fa62",
           "name": "Lin",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/3/35/Lin-HBO_Max.png",
+          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/f/f2/Lin_face.png",
           "gender": "Female",
           "age": "Adult",
           "eye_color": "Brown",
@@ -1497,7 +1497,7 @@ export default {
         {
           "id": "1287b275-6c32-4113-947f-519316d4a6be",
           "name": "Witch of the Waste",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/e/e1/Howls-moving-castle-disneyscreencaps.com-10507.jpg",
+          "img": "https://static.wikia.nocookie.net/howlscastle/images/e/e7/64074.jpg",
           "gender": "Female",
           "age": "59",
           "eye_color": "Brown",
@@ -1527,7 +1527,7 @@ export default {
         {
           "id": "45237428-93bf-4dd6-97ce-f10647300429",
           "name": "Prince Justin or Turnip Head",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/d/d9/Prince_Justin.png",
+          "img": "https://static.wikia.nocookie.net/howlscastle/images/2/25/3613-447544121.jpg",
           "gender": "Male",
           "age": "20-30",
           "eye_color": "Grey",
@@ -1742,7 +1742,7 @@ export default {
         {
           "id": "0cb26464-3416-4490-8f42-cd9d7276884e",
           "name": "Kōichi",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/4/49/Sosuke%27s_Father.png",
+          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/0/01/Koichi.png",
           "gender": "Male",
           "age": "30",
           "eye_color": "Dark brown",
@@ -2224,7 +2224,7 @@ export default {
         {
           "id": "a21fbdd5-16bc-4931-80d0-3ce89ffce778",
           "name": "Sutemaru",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/3/37/Sutemaru.PNG",
+          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/d/d0/Sutemaru.png",
           "gender": "Male",
           "age": "Adult",
           "eye_color": "Black",
@@ -2234,7 +2234,7 @@ export default {
         {
           "id": "4c697b7d-4f64-4ac9-ae29-e155eb1693f3",
           "name": "Ishitsukuri",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/5/5c/Ghibli-kaguya-ishitsukuri.jpg",
+          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/6/6d/Ghibli_Kaguya_Ishitsukuri.jpg",
           "gender": "Male",
           "age": "Adult",
           "eye_color": "Black",
@@ -2274,7 +2274,7 @@ export default {
         {
           "id": "942fb1029-b51f-4100-8bee-86547c09b0ff",
           "name": "Inbe no Akita",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/1/1c/Ghibli-kaguya-akita.jpg",
+          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/e/e7/Ghibli_Kaguya_Akita.jpg",
           "gender": "Male",
           "age": "Elder",
           "eye_color": "Black",
@@ -2330,7 +2330,7 @@ export default {
         {
           "id": "28d07ace-c309-48c6-b48e-ae2ece3a238c",
           "name": "Anna Sasaki",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/a/ae/Anna.png",
+          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/2/29/Anna_Sasaki.jpg",
           "gender": "Female",
           "age": "12",
           "eye_color": "Blue",

src/index.html

@@ -1,12 +1,89 @@
 <!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>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Data Lovers</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+
+  <header>
+    <!--"./" : imagen se encuentra en ruta relativa aunque muestra su ruta actual-->
+    <!--alt : no olvidar colocarle a las imágenes textos alternativos, en caso de que se usen lectores de pantalla-->
+    <img id="logo" src="./imagenes/pngwing.com.png" alt="Logo Studio Ghibli">
+  </header>
+
+  <!--<nav> definir una sección de navegación: permiten a los usuarios moverse dentro de un sitio web - su apariencia se define en CSS -->
+  <nav>
+    <ul class="menu-horizontal">
+      <li id="home-link"><a href="#">Home</a></li>
+      <li>
+        <!--<a> : etiqueta ancla: para que los usuarios puedan navegar entre diferentes partes del contenido-->
+        <!--href dentro de la etiqueta <a> : para especificar el destino del enlace-->
+        <a href="#">Películas</a>
+        <ul class="menu-vertical">
+          <!--al no agregarle target las opciones se abrirán en la misma pestaña o ventana del navegador, según lo tenga configurado el usuario por defecto-->
+          <li><a href="#" id="orden-date-films">Por año</a></li>
+          <li><a href="#" id="orden-director-films">Por director</a></li>
+          <li><a href="#" id="orden-alfabetico-films">Orden alfabético</a></li>
+        </ul>
+      </li>
+      <li>
+        <a href="#">Personajes</a>
+        <ul class="menu-vertical">
+          <li><a href="#" id="orden-people-films">Por película</a></li>
+          <li><a href="#" id="orden-people-age">Por grupo etario</a></li>
+          <li><a href="#" id="orden-alfabetico-people">Orden alfabético</a></li>
+        </ul>
+      </li>
+      <li><a href="#">Curiosidades</a>
+        <ul class="menu-vertical">
+          <li><a href="#" id="people-specie-prom">Total de especies</a></li>
+          <li><a href="#" id="vehicles-prom">Total de Vehículos</a></li>
+          <li><a href="#" id="prom-prom">Rotten Tomatoes</a></li>
+        </ul>
+      </li>
+    </ul>
+
+
+  </nav>
+
+  <div class="image-grid" id="contenedor">
+    <div id="home-content" style="display: none;" >
+      <p>
+        <strong>Studio Ghibli</strong> es un estudio de animación japonés, con sede en Tokio. Fue fundado en 1985 por <em>Hayao Miyazaki y Isao Takahata</em>, y a día de hoy, han realizado más de 20 películas, además de otras clases de trabajos (cortometrajes, anuncios publicitarios, ...). 
+        <br>
+        <br>
+        Es considerado por la crítica especializada y muchos cinéfilos como uno de los mejores estudios de animación del mundo en la actualidad. Seis de las películas de Studio Ghibli se encuentran entre las 10 películas de anime más taquilleras realizadas en Japón, siendo <em>El Viaje de Chihiro (2001)</em> la segunda más alta, recaudando más de 360 millones de dólares en todo el mundo. 
+        <br>
+        <br>
+        El <em>Ghibli deriva de la palabra italiana «ghibli»,</em>  basada en el nombre del viento cálido del desierto que sopla en Libia.
+      </p>
+      <img src="https://static.wikia.nocookie.net/dab99649-5c0d-4e99-85d7-d5dc3fe3fa1a/scale-to-width-down/800" alt="Studio Ghibli" />
+
+    </div>
+    <div id="films-list-year"></div>
+    <div id="films-list-director"></div>
+    <div id="films-list"></div>
+    <div id="people-list-film"></div>
+    <div id="people-list-age"></div>
+    <div id="people-list"></div>
+    <div id="vehicles"></div>
+    <div id="people-specie" class = "total-species"></div>
+    <div id="prom"></div>
+  </div>
+
+
+
+  <footer>
+    <p> Elaborado por Oli en Laboratoria </p>
+  </footer>
+
+  <script src="main.js" type="module"></script>
+
+</body>
+
+</html>