H1

package.json

@@ -1,30 +1,31 @@
 {
-  "name": "data-lovers",
-  "version": "1.0.0",
-  "main": "src/index.html",
-  "license": "MIT",
-  "scripts": {
-    "htmlhint": "htmlhint src/*.html test/*.html",
-    "eslint": "eslint --ext .js src/ test/",
-    "pretest": "npm run eslint && npm run htmlhint",
-    "test": "jest --verbose --coverage",
-    "open-coverage-report": "opener ./coverage/lcov-report/index.html",
-    "start": "serve src/",
-    "deploy": "gh-pages -d src"
-  },
-  "dependencies": {
-    "@babel/core": "^7.6.2",
-    "@babel/plugin-transform-modules-commonjs": "^7.6.0",
-    "babel-jest": "^27.0.1",
-    "eslint": "^8.3.0",
-    "gh-pages": "^3.1.0",
-    "htmlhint": "^1.0.0",
-    "jest": "^27.0.1",
-    "opener": "^1.5.1",
-    "serve": "^13.0.2"
-  },
-  "engines": {
-    "node": ">=16.x"
-  }
-}
-
+    "name": "data-lovers",
+    "version": "1.0.0",
+    "main": "src/index.html",
+    "license": "MIT",
+    "scripts": {
+      "htmlhint": "htmlhint src/.html test/.html",
+      "eslint": "eslint --ext .js src/ test/",
+      "pretest": "npm run eslint && npm run htmlhint",
+      "test": "jest --verbose --coverage",
+      "open-coverage-report": "opener ./coverage/lcov-report/index.html",
+      "start": "serve src/",
+      "deploy": "gh-pages -d src"
+
+    },
+    "dependencies": {
+      "@babel/core": "^7.6.2",
+      "@babel/plugin-transform-modules-commonjs": "^7.6.0",
+      "babel-jest": "^27.0.1",
+      "eslint": "^8.3.0",
+      "gh-pages": "^3.1.0",
+      "htmlhint": "^1.0.0",
+      "jest": "^27.0.1",
+      "opener": "^1.5.1",
+      "serve": "^13.0.2"
+    },
+    "engines": {
+      "node": ">=16.x"
+    }
+
+  }

src/data.js

@@ -1,9 +1,42 @@
-// estas funciones son de ejemplo
+import data from "./data/harrypotter/data.js"
 
-export const example = () => {
-  return 'example';
+export const getBooks = () => Object.values(data.books);
+
+export const getSpells = () => Object.values(data.spells);
+
+export const getPotions = () => Object.values(data.potions);
+
+export const getCharacters = () => Object.values(data.characters);
+
+
+//FILTRAR
+//Filtrar por tipo genero
+export const filtrargenero = (data, genero) => data.filter(e => e.gender == genero);
+
+//Filtrar por casas
+export const filtrarcasas = (data, casas) => data.filter(e => e.house == casas);
+
+//Ordenar de AZ-ZA
+export const ordenAZ = (data) => {
+    const ordenAZ = data.sort(function (a, b) {
+        if (a.name < b.name) {
+            return -1;
+        }
+        //return 0;
+    })
+    return ordenAZ;
 };
 
-export const anotherExample = () => {
-  return 'OMG';
+export const ordenZA = (data) => {
+    const ordenZA = data.sort(function (a, b) {
+        if (a.name > b.name) {
+            return -1;
+        }
+        if (a.name < b.name) {
+            return 1;
+        }
+        //  return 0;
+    })
+    return ordenZA;
 };
+

src/data/harrypotter/data.js

@@ -16170,57 +16170,73 @@ export default {
   books: [
     {
       "id": 1,
+      "img": "https://i.pinimg.com/564x/8d/9d/6a/8d9d6a481ec7518eecbe4ccac623a92b.jpg",
       "title": "Harry Potter and the Sorcerer's Stone",
       "releaseDay": "June 26, 1997",
       "author": "J. K. Rowling",
+      "img":"https://librotea.com/wp-content/uploads/2019/05/23/12/05/6c9c14d629404b7ffe4e145aaf0a7763.jpg",
       "description": "On his birthday, Harry Potter discovers that he is the son of two well-known wizards, from whom he has inherited magical powers. He must attend a famous school of magic and sorcery, where he establishes a friendship with two young men who will become his companions on his adventure. During his first year at Hogwarts, he discovers that a malevolent and powerful wizard named Voldemort is in search of a philosopher's stone that prolongs the life of its owner."
-    },
+        },
     {
       "id": 2,
+      "img": "https://i.pinimg.com/564x/1d/2f/fe/1d2ffef323a06a67ae7600d4ae14ed73.jpg",
       "title": "Harry Potter and the chamber of secrets",
       "releaseDay": "July 2, 1998",
+      "img":"https://i.pinimg.com/originals/94/c0/b1/94c0b1fbd18ee9b1c06312ea51944c54.jpg",
       "author": "J. K. Rowling",
       "description": "Harry Potter and the sophomores investigate a malevolent threat to their Hogwarts classmates, a menacing beast that hides within the castle."
     },
     {
       "id": 3,
+      "img": "https://i.pinimg.com/564x/93/e2/55/93e255c770c8a6e676365828357b236a.jpg",
       "title": "Harry Potter and the Prisoner of Azkaban",
-      "releseDay": "July 8, 1999",
+      "releaseDay": "July 8, 1999",
+      "img":"https://librotea.com/wp-content/uploads/2019/05/27/17/14/ad4552431ee250fc6994006b6393f7ae-300x0-c-default.jpg",
       "author": "J. K. Rowling",
       "description": "Harry's third year of studies at Hogwarts is threatened by Sirius Black's escape from Azkaban prison. Apparently, it is a dangerous wizard who was an accomplice of Lord Voldemort and who will try to take revenge on Harry Potter."
     },
     {
       "id": 4,
+      "img": "https://i.pinimg.com/564x/47/61/1e/47611e7a821249249d65a7480d51f145.jpg",
       "title": "Harry Potter and the Goblet of Fire",
       "releaseDay": "July 8, 2000",
+      "img":"https://images.payhip.com/o_1f5rlbb8r1cpa1j3c18r411mc17c8r.jpg",
       "author": "J. K. Rowling",
       "description": "Hogwarts prepares for the Triwizard Tournament, in which three schools of wizardry will compete. To everyone's surprise, Harry Potter is chosen to participate in the competition, in which he must fight dragons, enter the water and face his greatest fears."
     },
     {
       "id": 5,
+      "img": "https://i.pinimg.com/564x/6b/2e/3d/6b2e3da279d7cf7a07b1f3ac78293bc7.jpg",
       "title": "Harry Potter and the Order of the Phoenix",
       "releaseDay": "June 21, 2003",
+      "img":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRqaqFmB_JAUNJGnCTp1jPCzsICgOS5Jfc0kOgDKCjvTx5UduMb82xfQf1SXaWFEhomGCo&usqp=CAU",
       "author": "J. K. Rowling",
       "description": "In his fifth year at Hogwarts, Harry discovers that many members of the wizarding community do not know the truth about his encounter with Lord Voldemort. Cornelius Fudge, Minister of Magic, appoints Dolores Umbridge as Defense Against the Dark Arts teacher because he believes that Professor Dumbledore plans to take over her job. But his teachings are inadequate, so Harry prepares the students to defend the school against evil."
     },
     {
       "id": 6,
+      "img": "https://i.pinimg.com/564x/97/ac/8e/97ac8eea2b3f71c793fa1d6b9bfc7669.jpg",
       "title": "Harry Potter and the Half-Blood Prince",
       "releaseDay": "July 16, 2005",
+      "img":"https://loresumo.com/wp-content/uploads/2019/09/harry-potter-y-el-misterio-del-Pr%C3%ADncipe-1.jpg",
       "author": "J. K. Rowling",
       "description": "Harry discovers a powerful book and, while trying to discover its origins, collaborates with Dumbledore in the search for a series of magical objects that will aid in the destruction of Lord Voldemort."
     },
     {
       "id": 7,
+      "img": "https://i.pinimg.com/564x/b6/40/76/b640767915dfe91d6ae85706181b61fa.jpg",
       "title": "Harry Potter and the Deathly Hallows",
       "releaseDay": "July 21, 2007",
+      "img":"https://www.lancomperu.com/imagenes/9788498/978849838929.GIF",
       "author": "J. K. Rowling",
       "description": "Harry, Ron and Hermione go on a dangerous mission to locate and destroy the secret of Voldemort's immortality and destruction - the Horcruces. Alone, without the guidance of their teachers or the protection of Professor Dumbledore, the three friends must lean on each other more than ever. But there are Dark Forces in between that threaten to tear them apart. Harry Potter is getting closer and closer to the task for which he has been preparing since the first day he set foot in Hogwarts: the last battle with Voldemort."
     },
     {
       "id": 8,
+      "img": "https://i.pinimg.com/564x/db/e6/a1/dbe6a10f58bd208870ca5781e6895e38.jpg",
       "title": "Harry Potter and the Cursed Child",
       "releaseDay": "July 30, 2016",
+      "img":"https://images.cdn3.buscalibre.com/fit-in/360x360/a2/ea/a2ea4887a569c9be552a8aa10f174d43.jpg",
       "author": "J. K. Rowling",
       "description": "Harry's second son entered Hogwarts, but in Slytherin. His relationship with Harry is getting worse and he became close friends with Draco's son, Scorpius Malfoy who is said to be Lord Voldemort's son."
     }

src/data/harrypotter/harry.json

@@ -19616,55 +19616,64 @@
       "id": 1,
       "title": "Harry Potter and the Sorcerer's Stone",
       "releaseDay": "June 26, 1997",
+      "img":"https://image.khaleejtimes.com/?uuid=c6164f6d-a0a6-5492-96c9-395b0455f1cf&function=cropresize&type=preview&source=false&q=75&crop_w=0.99999&crop_h=0.74971&x=0&y=0&width=1200&height=675",
       "author": "J. K. Rowling",
       "description": "On his birthday, Harry Potter discovers that he is the son of two well-known wizards, from whom he has inherited magical powers. He must attend a famous school of magic and sorcery, where he establishes a friendship with two young men who will become his companions on his adventure. During his first year at Hogwarts, he discovers that a malevolent and powerful wizard named Voldemort is in search of a philosopher's stone that prolongs the life of its owner."
+
     },
     {
       "id": 2,
       "title": "Harry Potter and the chamber of secrets",
       "releaseDay": "July 2, 1998",
+      "img":"https://static.wikia.nocookie.net/esharrypotter/images/b/b6/Harry_Potter_y_la_Camara_Secreta_Portada_Espa%C3%B1ol.PNG/revision/latest?cb=20151020165931",
       "author": "J. K. Rowling",
       "description": "Harry Potter and the sophomores investigate a malevolent threat to their Hogwarts classmates, a menacing beast that hides within the castle."
     },
     {
       "id": 3,
       "title": "Harry Potter and the Prisoner of Azkaban",
       "releseDay": "July 8, 1999",
+      "img":"https://static.wikia.nocookie.net/esharrypotter/images/8/81/Harry_Potter_y_el_prisionero_de_Azkaban_Portada_Espa%C3%B1ol.PNG/revision/latest?cb=20151020170338",
       "author": "J. K. Rowling",
       "description": "Harry's third year of studies at Hogwarts is threatened by Sirius Black's escape from Azkaban prison. Apparently, it is a dangerous wizard who was an accomplice of Lord Voldemort and who will try to take revenge on Harry Potter."
     },
     {
       "id": 4,
       "title": "Harry Potter and the Goblet of Fire",
       "releaseDay": "July 8, 2000",
+      "img":"https://static.wikia.nocookie.net/esharrypotter/images/7/7d/Harry_Potter_y_el_C%C3%A1liz_de_Fuego_Portada_Espa%C3%B1ol.PNG/revision/latest?cb=20151020170423",
       "author": "J. K. Rowling",
       "description": "Hogwarts prepares for the Triwizard Tournament, in which three schools of wizardry will compete. To everyone's surprise, Harry Potter is chosen to participate in the competition, in which he must fight dragons, enter the water and face his greatest fears."
     },
     {
       "id": 5,
       "title": "Harry Potter and the Order of the Phoenix",
       "releaseDay": "June 21, 2003",
+      "img":"https://static.wikia.nocookie.net/esharrypotter/images/9/9d/Harry_Potter_y_la_Orden_del_F%C3%A9nix_Portada_Espa%C3%B1ol.PNG/revision/latest?cb=20151020170600",
       "author": "J. K. Rowling",
       "description": "In his fifth year at Hogwarts, Harry discovers that many members of the wizarding community do not know the truth about his encounter with Lord Voldemort. Cornelius Fudge, Minister of Magic, appoints Dolores Umbridge as Defense Against the Dark Arts teacher because he believes that Professor Dumbledore plans to take over her job. But his teachings are inadequate, so Harry prepares the students to defend the school against evil."
     },
     {
       "id": 6,
       "title": "Harry Potter and the Half-Blood Prince",
       "releaseDay": "July 16, 2005",
+      "img":"https://static.wikia.nocookie.net/esharrypotter/images/8/8d/Harry_Potter_y_el_Misterio_del_Pr%C3%ADncipe_Portada_Espa%C3%B1ol.PNG/revision/latest?cb=20151020170658",
       "author": "J. K. Rowling",
       "description": "Harry discovers a powerful book and, while trying to discover its origins, collaborates with Dumbledore in the search for a series of magical objects that will aid in the destruction of Lord Voldemort."
     },
     {
       "id": 7,
       "title": "Harry Potter and the Deathly Hallows",
       "releaseDay": "July 21, 2007",
+      "img":"https://static.wikia.nocookie.net/esharrypotter/images/5/59/Harry_Potter_y_las_Reliquias_de_la_Muerte_portada_espa%C3%B1ol.jpg/revision/latest?cb=20151001174320",
       "author": "J. K. Rowling",
       "description": "Harry, Ron and Hermione go on a dangerous mission to locate and destroy the secret of Voldemort's immortality and destruction - the Horcruces. Alone, without the guidance of their teachers or the protection of Professor Dumbledore, the three friends must lean on each other more than ever. But there are Dark Forces in between that threaten to tear them apart. Harry Potter is getting closer and closer to the task for which he has been preparing since the first day he set foot in Hogwarts: the last battle with Voldemort."
     },
     {
       "id": 8,
       "title": "Harry Potter and the Cursed Child",
       "releaseDay": "July 30, 2016",
+      "img":"https://static.wikia.nocookie.net/esharrypotter/images/1/1d/Portada_espa%C3%B1ol_Harry_Potter_y_el_legado_maldito.jpg/revision/latest?cb=20160802142540",
       "author": "J. K. Rowling",
       "description": "Harry's second son entered Hogwarts, but in Slytherin. His relationship with Harry is getting worse and he became close friends with Draco's son, Scorpius Malfoy who is said to be Lord Voldemort's son."
     }

src/index.html

@@ -1,12 +1,136 @@
 <!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>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Harry Potter</title>
+  <link rel="stylesheet" href="style.css">
+  <script src="https://kit.fontawesome.com/2fa6b325e3.js" crossorigin="anonymous"></script>
+</head>
+
+<body>
+  <header class="header">
+    <nav class="nav">
+      <h1 class="logo nav-item">Home</h1>
+      <button class="nav-toggle" aria-label="Abrir menú">
+        <i class="fa-solid fa-bars"></i>
+      </button>
+      <ul class="nav-menu nav-menu1">
+        <li class="nav-menu-item">
+          <h1 class="nav-item nav-item2">Houses</h1>
+        </li>
+        <li class="nav-menu-item">
+          <h1 class="nav-item nav-item2">Potions</h1>
+        </li>
+        <li class="nav-menu-item">
+          <h1 class="nav-item nav-item2">Curiosities</h1>
+        </li>
+      </ul>
+    </nav>
+  </header>
+  <!--Bienvenida-->
+  <main>
+    <section class="modal" id="miModal">
+      <div class="flex" id="flex">
+        <div class="aboutHP">
+          <span class="close" id="close">&times;</span>
+            <h1 class="hp">About Harry Potter</h1>
+            <img class="iconHP" src="img/logo.png" alt="" />
+            <p class="centerText-1">
+              Harry Potter is a series of fantasy novels written by British author J. K. Rowling, in which
+              I know
+              describe the adventures of the young apprentice of witchcraft and wizardry Harry Potter and his friends
+              Hermione
+              Granger and Ron Weasley, during their years at Hogwarts School of Witchcraft and Wizardry. The argument is
+              focuses on the fight between Harry Potter and the evil wizard Lord Voldemort, who murdered the parents of
+              Harry in his eagerness to conquer the magical world.
+            </p>
+            <img class="iconHP" src="img/escudos.png" alt="" />
+            <p class="centerText-2">
+              Learn about this magical world, its characters, its curiosities, potions, spells and more ...
+            </p>
+        </div>
+      </div>
+    </section>
+
+    <!--Creando botones de acceso-->
+    <section class="botones">
+      <div id="lista" class="lista">
+        <div class="bloque">
+          <h1>Characters</h1><button class="harry boton" id="peliculas"></button>
+        </div>
+        <div class="bloque">
+          <h1>Books</h1><button class="harry boton" id="libros"></button>
+        </div>
+        <div class="bloque">
+          <h1>Potions</h1><button class="harry boton" id="personajes"></button>
+        </div>
+        <div class="bloque">
+          <h1>Spells</h1><button class="harry boton" id="spells"></button>
+        </div>
+      </div>
+    </section>
+
+    <div id="cardBook" class="cardBook">
+    </div>
+
+    <section class="divContainerSpells">
+      <div id="spellsContainer" style="display:none">
+        <h1>Filter by type</h1>
+        <select id="filtrarSpells">
+          <option value="Todos" selected>All</option>
+          <option value="Charm">Charm</option>
+          <option value="Jinx">Jinx</option>
+          <option value="Transfiguration">Transfiguration</option>
+          <option value="Curse">Curse</option>
+          <option value="Spell">Spell</option>
+          <option value="Hex">Hex</option>
+          <option value="Healing Spell">Healing Spell</option>
+          <option value="Conjuration">Conjuration</option>
+          <option value="Dark Arts">Dark Arts</option>
+          <option value="Dark Charm">Dark Charm</option>
+          <option value="Vanishment">Vanishment</option>
+        </select>
+      </div>
+      <div id="cardSpells" class="cardSpells">
+      </div>
+    </section>
+
+    <section class="divContainerPotions">
+      <select id="filterAZ" style="display: none;">
+        <option disabled selected>Choose the order</option>
+        <option id="filterAZS" value="aZ" selected>A - Z</option>
+        <option id="filterZA" value="zA">Z - A</option>
+      </select>
+      <div id="cardPotions" class="cardPotions"></div>
+      <div id="cardPotionsAZ" class="cardPotionsAZ"></div>
+      <div id="cardPotionsZA" class="cardPotionsZA"></div>
+    </section>
+    <section>
+      <article id="charactersContainer" style="display: none">
+        <h1>Filter</h1>
+        <select id="filterGender">
+          <option disabled selected>Filter Genres</option>
+          <option value="Female">Female</option>
+          <option value="Male">Male</option>
+        </select>
+        <select id="filterCasas">
+          <option disabled selected>Filter Houses</option>
+          <option value="Gryffindor">Gryffindor</option>
+          <option value="Ravenclaw">Ravenclaw</option>
+          <option value="Hufflepuff">Hufflepuff</option>
+          <option value="Slytherin">Slytherin</option>
+          <option value="House of Gaunt">House of Gaunt</option>
+        </select>
+      </article>
+      <div id="cardPersonajes" class="cardPersonajes"></div>
+      <div id="cardPersonajesGenero" class="cardPersonajesGenero"></div>
+      <div id="cardPersonajesHouse" class="cardPersonajesHouse"></div>
+    </section>
+  </main>
+  <script type="module" src="./main.js"></script>
+  <script type="module" src="./index.js"></script>
+</body>
+
+</html>