Kata3

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": "5.5.0",
     "commit": "cfda4de1f41e0c3000c47f91ce20a1bfe5281b4a"
   }
-}
+}

src/data.js

@@ -1,9 +1,85 @@
-// estas funciones son de ejemplo
+//en este archivo unicamente se colocan funciones "puras" que sean testeables.
 
-export const example = () => {
-  return 'example';
-};
+//primera función ordenar con método sort:
+export const ordenarMasVieja = (arrayFilms)=> {
+  //console.log(arrayFilms);
+  const copiaGhibli = [...arrayFilms]
+  copiaGhibli.sort(function (a, b) {
+    if (parseInt(a.release_date) > parseInt(b.release_date)) {
+      return 1;
+    }
+    if (parseInt(a.release_date) < parseInt(b.release_date)) {
+      return -1;
+    }
+    return 0;
+  });
+  return copiaGhibli 
+}
+//console.log(ordenarMasVieja())
 
-export const anotherExample = () => {
-  return 'OMG';
-};
+
+// funcion deshabilitada porque utilizamos ordenarPuntuacionMayor.reverse ().
+
+// export function ordenarMasNueva(arrayFilms) { // recibe parametro
+//   const copiaGhibli = [...arrayFilms]
+//   copiaGhibli.sort(function (a, b) {
+//     if (parseInt(a.release_date) > parseInt(b.release_date)) {
+//       return -1;
+//     }
+//     if (parseInt(a.release_date) < parseInt(b.release_date)) {
+//       return 1;
+//     }
+//     return 0;
+//   });
+//   return copiaGhibli
+// }
+// //console.log(ordenarMasNueva())
+
+
+//segunda fución ordenar con método sort.
+export const ordenarPuntuacionMayor = (arrayFilms) =>{
+  const copiaGhibli = [...arrayFilms]
+  copiaGhibli.sort((a, b) => { 
+    //propuesta para optimizarla mediante el valor cuaternario.
+    // parseInt(a.rt_score) - parseInt(b.rt_score)
+    // a.rt_score > b.rt_score ? 1 : a.rt_score < b.rt_score ? -1 : 0
+    /*
+    if (a === b) {
+      return 0;
+    }
+    */
+    if (parseInt(a.rt_score) > parseInt(b.rt_score)) {
+      return -1;
+    }
+    if (parseInt(a.rt_score) < parseInt(b.rt_score)) {
+      return 1;
+    }
+    return 0;
+  });
+  return copiaGhibli
+}
+// console.log(ordenarPuntuacionMayor(arrayFilms));
+
+
+// funcion deshabilitada porque utilizamos ordenarPuntuacionMayor.reverse ().
+// export function ordenarPuntuacionMenor(arrayFilms) {
+//   const copiaGhibli = [...arrayFilms]
+
+//   copiaGhibli.sort((a,b) => {
+//     if (parseInt(a.rt_score) > parseInt(b.rt_score)) {
+//       return 1;
+//     }
+//     if (a.rt_score < b.rt_score) {
+//       return -1;
+//     }
+//     return 0;
+//   });
+//   return copiaGhibli
+// }
+
+
+//función de filtrado con método filter:
+export const filtrarProductor = (arrayFilms, nombreProducer) =>{
+  const filtrado = arrayFilms.filter((film)=> film.producer === nombreProducer)
+  return filtrado
+}

src/data/ghibli/ghibli.js

@@ -1,4 +1,5 @@
-export default {
+
+  const ghibli = {
   "studio": "Studio Ghibli Inc.",
   "films": [
     {
@@ -226,7 +227,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://i.pinimg.com/originals/32/b0/8b/32b08bb45a0ffc9d2fc688af00d1f735.png",
           "gender": "Female",
           "age": "4",
           "eye_color": "Brown",
@@ -276,7 +277,7 @@ export default {
         {
           "id": "d39deecb-2bd0-4770-8b45-485f26e1381f",
           "name": "Totoro",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/d/df/Totoro_in_the_rain.png",
+          "img": "https://i.pinimg.com/564x/ca/84/a9/ca84a9b144a936fcfe05524355a587b9.jpg",
           "gender": "Male",
           "age": "1300",
           "eye_color": "Grey",
@@ -296,7 +297,7 @@ export default {
         {
           "id": "c491755a-407d-4d6e-b58a-240ec78b5061",
           "name": "Chibi Totoro",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/c/c5/Little_Totoro_spirit_moving.gif",
+          "img": "https://i.pinimg.com/564x/a5/92/2e/a5922e26290a5610c5c9a65929654907.jpg",
           "gender": "NA",
           "age": "",
           "eye_color": "Black",
@@ -306,7 +307,7 @@ export default {
         {
           "id": "f467e18e-3694-409f-bdb3-be891ade1106",
           "name": "Catbus",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/3/30/Catbus.jpg",
+          "img": "https://i.pinimg.com/564x/86/e1/2a/86e12a498c80c5409f3c2206f26ba521.jpg",
           "gender": "Male",
           "age": "NA",
           "eye_color": "Yellow",
@@ -510,7 +511,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://cdn.myanimelist.net/images/characters/6/423031.jpg",
           "gender": "Female",
           "age": "Adult",
           "eye_color": "Black",
@@ -520,7 +521,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://i.pinimg.com/564x/0c/8b/3c/0c8b3cd6bba48655228bce814642c879.jpg",
           "gender": "Male",
           "age": "40",
           "eye_color": "Black",
@@ -530,7 +531,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://i.pinimg.com/564x/0c/8b/3c/0c8b3cd6bba48655228bce814642c879.jpg",
           "gender": "Female",
           "age": "Elder",
           "eye_color": "Black",
@@ -574,7 +575,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://cdn.personalitylist.com/avatars/215189.png",
           "gender": "Male",
           "age": "Middle age",
           "eye_color": "Black",
@@ -710,7 +711,7 @@ export default {
         {
           "id": "4a2e2cee-08ca-4d44-9564-2b3e5421bafb",
           "name": "Fio Piccolo",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/1/16/Fio_%282%29.jpg",
+          "img": "https://i.pinimg.com/564x/0c/8b/3c/0c8b3cd6bba48655228bce814642c879.jpg",
           "gender": "Female",
           "age": "17",
           "eye_color": "Brown",
@@ -1021,7 +1022,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://i.pinimg.com/564x/0c/8b/3c/0c8b3cd6bba48655228bce814642c879.jpg",
           "gender": "Female",
           "age": "Adult",
           "eye_color": "Hazel",
@@ -1259,7 +1260,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://i.pinimg.com/564x/10/be/dd/10bedd5bd21f9d525a6b004085f7fee0.jpg",
           "gender": "Female",
           "age": "Adult",
           "eye_color": "Brown",
@@ -1497,7 +1498,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://i.pinimg.com/originals/8f/87/6f/8f876fb402fc01dde74a9fb9c6d52c4c.png",
           "gender": "Female",
           "age": "59",
           "eye_color": "Brown",
@@ -1527,7 +1528,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://i.pinimg.com/564x/da/d0/a5/dad0a5792af6e8eb3305481227daa0eb.jpg",
           "gender": "Male",
           "age": "20-30",
           "eye_color": "Grey",
@@ -1742,7 +1743,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://i.pinimg.com/564x/eb/21/15/eb2115c7a7b9f75b0cf98b251d04e7a8.jpg",
           "gender": "Male",
           "age": "30",
           "eye_color": "Dark brown",
@@ -1865,7 +1866,7 @@ export default {
       "description": "14-year-old Arrietty and the rest of the Clock family live in peaceful anonymity as they make their own home from items 'borrowed' from the house's human inhabitants. However, life changes for the Clocks when a human boy discovers Arrietty.",
       "director": "Hiromasa Yonebayashi",
       "producer": "Toshio Suzuki",
-      "poster": "https://static.wikia.nocookie.net/studio-ghibli/images/4/46/The_Borrower_Arrietty.jpg",
+      "poster": "https://i.ebayimg.com/images/g/SGkAAOSwEChhOVvq/s-l500.jpg",
       "release_date": "2010",
       "rt_score": "95",
       "people": [
@@ -2224,7 +2225,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://i.pinimg.com/564x/0c/8b/3c/0c8b3cd6bba48655228bce814642c879.jpg",
           "gender": "Male",
           "age": "Adult",
           "eye_color": "Black",
@@ -2234,7 +2235,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://i.pinimg.com/564x/0c/8b/3c/0c8b3cd6bba48655228bce814642c879.jpg",
           "gender": "Male",
           "age": "Adult",
           "eye_color": "Black",
@@ -2274,7 +2275,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://i.pinimg.com/564x/0c/8b/3c/0c8b3cd6bba48655228bce814642c879.jpg",
           "gender": "Male",
           "age": "Elder",
           "eye_color": "Black",
@@ -2330,7 +2331,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://i.pinimg.com/564x/6a/4a/f4/6a4af4d903473c4475a246aa676b30e9.jpg",
           "gender": "Female",
           "age": "12",
           "eye_color": "Blue",
@@ -2360,7 +2361,7 @@ export default {
         {
           "id": "66bca178-9920-4ec3-91e9-0d5b8a76dba1",
           "name": "Setsu Oiwa",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/6/6e/Setsu.jpg",
+          "img": "https://i.pinimg.com/564x/0c/8b/3c/0c8b3cd6bba48655228bce814642c879.jpg",
           "gender": "Female",
           "age": "50-60",
           "eye_color": "Dark brown",
@@ -2370,7 +2371,7 @@ export default {
         {
           "id": "5b8e4413-f943-40ba-8f9f-0ba059a401f0",
           "name": "Hisako",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/9/93/Hisako.png",
+          "img": "https://i.pinimg.com/564x/3b/a4/41/3ba441e7a3dfa2e31abd98a56c1a0a5a.jpg",
           "gender": "Female",
           "age": "Elder",
           "eye_color": "Dark brown",
@@ -2400,7 +2401,7 @@ export default {
         {
           "id": "31b49ef6-ee60-4603-b983-e67fa0718aa9",
           "name": "Kiyomasa Ōiwa",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/d/d7/Kiyomasa.jpg",
+          "img": "https://i.pinimg.com/564x/0c/8b/3c/0c8b3cd6bba48655228bce814642c879.jpg",
           "gender": "Male",
           "age": "50-60",
           "eye_color": "Dark brown",
@@ -2410,7 +2411,7 @@ export default {
         {
           "id": "5d52d16f-ce72-41bd-8d88-436e206d9449",
           "name": "Doctor Yamashita",
-          "img": "https://static.wikia.nocookie.net/studio-ghibli/images/8/8a/Yamashita.jpg",
+          "img": "https://i.pinimg.com/564x/0c/8b/3c/0c8b3cd6bba48655228bce814642c879.jpg",
           "gender": "Male",
           "age": "Adult",
           "eye_color": "Black",
@@ -2432,4 +2433,6 @@ export default {
       "vehicles": []
     }
   ]
-}
+  }
+
+export default ghibli;

src/index.html

@@ -1,12 +1,62 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width" initial-scale="1.0">
     <title>Data Lovers</title>
-    <link rel="stylesheet" href="style.css" />
+    <link rel="icon" href="./favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="style.css"/>
+    <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=Cinzel:wght@700&family=Libre+Bodoni:wght@500;700&family=Playfair+Display&display=swap" rel="stylesheet">
   </head>
+
   <body>
-    <div id="root"></div>
+    <header>
+      <div id="boxBanner">
+        <img id= "totoro" src= "dataLoversExt/pngegg.png" alt="">
+        <p class="subtitulo">Explora el universo del Estudio Ghibli</p>
+        <p class="subtitulo"> スタジオジブリ </p>
+        </div>
+      <div class="boxNavegador">
+        <div class="btnGeneral">
+          <label class="label" for="ordenar">Ordenar:</label>
+          <select class="button-81" name="ordenar" id="ordenar">
+            <option value="menosReciente">Película más antigua</option>
+            <option value="masReciente">Película más reciente</option>
+            <option value="mayorRt">Mayor Calificación</option>
+            <option value="menorRt">Menor Calificación</option>
+          </select>
+        </div>
+        <div class="btnGeneral">
+          <label class="label" for="filtrar">Filtrar:</label>
+          <select class="button-81" name="filtrar" id="filtrar">
+            <option value="todas">Por productor</option> 
+            <option value="Isao Takahata">Isao Takahata</option>
+            <option value="Toshio Suzuki">Toshio Suzuki</option>
+            <option value="Hayao Miyazaki">Hayao Miyazaki</option>
+            <option value="Toru Hara">Toru Hara</option>
+            <option value="Yoshiaki Nishimura">Yoshiaki Nishimura</option> 
+          </select>
+        </div>
+        <div class="btnGeneral">
+          <label class="label" for="personajes">Personajes:</label>
+          <select class="button-81" name="personajes" id="personajes">
+          </select>
+        </div>
+      </div>
+    </header>
+    <p id="numero-de-personajes"></p>
+    <div class="container-images" id="container"></div> 
     <script src="main.js" type="module"></script>
+    <footer>
+
+<iframe class= "totoroAnimado" src= "https://giphy.com/embed/cP0I5c2IpclX2J9mO2" width="20%" height="20%">
+  </iframe>
+  <div class="marcaDerechos">
+    <p>Universo Ghibli© </p>
+  </div>
+</footer>
+
   </body>
 </html>