proyecto terminado con despliegue en vercel

package.json

@@ -18,6 +18,7 @@
     "babel-jest": "^27.0.1",
     "css": "^3.0.0",
     "eslint": "^8.3.0",
+    "eslint-plugin-import": "^2.29.1",
     "gh-pages": "^3.1.0",
     "htmlhint": "^1.0.0",
     "jest": "^27.0.1",
@@ -36,4 +37,4 @@
     "version": "8.4.0",
     "commit": "d5b8aec07b9436348c5e1eb156926b50f8ab795f"
   }
-}
+}

src/components/Filters.js

@@ -0,0 +1,153 @@
+import { data } from "../data/dataset.js";
+import { renderItems } from "../view.js";
+import { filterData, filterData2, sortData, computeStats } from "../lib/dataFunctions.js";
+
+export const filters = () => {
+  const viewEl = document.createElement('div');
+  viewEl.innerHTML = `
+  <h4>Explora el universo épico de El Señor de los Anillos</h4>
+  <h5>Encuentra a tus personajes y descubre curiosidades sobre ellos.</h5>
+  <div class="barraBuscar">
+      <input id="search-bar" type="search" placeholder="Buscar">
+  </div>
+  <div class="filtros">
+    <label for="select-race"></label>
+    <select id="select-race" name="select-race" data-testid="select-filter">
+        <option value="raza">Raza</option>
+        <option value="Hobbit">Hobbit</option>
+        <option value="Maia">Maia</option>
+        <option value="Hombre">Hombre</option>
+        <option value="Elfo">Elfo</option>
+        <option value="Enano">Enano</option>
+        <option value="Ent">Ent</option>
+        <option value="Caballo">Caballo</option>
+        <option value="Criatura">Criatura</option>
+    </select>
+    <label for="select-age"></label>
+    <select id="select-age" name="select-age" data-testid="select-filter2">
+        <option value="Edad">Edad</option>
+        <option value="100">Menos de 100 años</option>
+        <option value="100 999">Entre 100 y 999 años</option>
+        <option value="2000">2000 años o más</option>
+        <option value="Desconocida">Desconocido</option>
+    </select>
+    <label for="select-sort"></label>
+    <select id="select-sort" name="name" itemprop="name" data-testid="select-sort">
+      <option value="orden">Orden</option>
+      <option value="asc" name="asc">Ascendente</option>
+      <option value="desc" name="desc">Descendente</option>
+    </select>
+    <button id="limpiar" data-testid="button-clear">Limpiar filtros</button>
+  </div>
+  <div class="contenedor-botones">
+    <button id="mostrar" class="mostrar">Mostrar promedio de edades</button>
+  </div>
+  <div class="conten-estadisticas hidden"></div>
+  <ul id="root"></ul>
+  `;
+
+  let filteredData = [...data];
+
+  function applyFilters() {
+    const raceValue = document.querySelector('#select-race').value;
+    const ageValue = document.querySelector('#select-age').value;
+    const sortValue = document.querySelector('#select-sort').value;
+    const searchTerm = document.querySelector('#search-bar').value;
+
+    filteredData = [...data];
+
+    // Apply race filter
+    if (raceValue !== 'raza') {
+      filteredData = filterData(filteredData, 'race', raceValue);
+    }
+
+    // Apply age filter
+    if (ageValue !== 'Edad') {
+      filteredData = filterData2(filteredData, 'age', ageValue);
+    }
+
+    // Apply search filter
+    if (searchTerm) {
+      filteredData = filteredData.filter(character =>
+        character.name.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+    }
+
+    // Apply sort
+    if (sortValue !== 'orden') {
+      filteredData = sortData(filteredData, 'name', sortValue);
+    }
+
+    renderFilteredItems();
+  }
+
+  function renderFilteredItems() {
+    container.innerHTML = '';
+    if (filteredData.length === 0) {
+      return mostrarEmptyState();
+    }
+    const itemsList = renderItems(filteredData);
+    container.appendChild(itemsList);
+  }
+
+  const container = viewEl.querySelector('#root');
+  if (container) {
+    container.innerHTML = renderItems(data).innerHTML;
+  }
+
+  const searchBar = viewEl.querySelector('#search-bar');
+  searchBar.addEventListener('input', () => {
+    applyFilters();
+  });
+
+  const selector = viewEl.querySelector("#select-race");
+  const selector2 = viewEl.querySelector("#select-age");
+  const selectSort = viewEl.querySelector("#select-sort");
+
+  selector.addEventListener("change", () => {
+    applyFilters();
+  });
+  selector2.addEventListener("change", () => {
+    applyFilters();
+  });
+  selectSort.addEventListener("change", () => {
+    applyFilters();
+  });
+
+  viewEl.querySelector('[data-testid="button-clear"]').addEventListener('click', function() {
+    selector.value = 'raza';
+    selector2.value = 'Edad';
+    selectSort.value = 'orden';
+    searchBar.value = '';
+    filteredData = [...data];
+    renderFilteredItems();
+    const statsContainer = viewEl.querySelector('.conten-estadisticas');
+    statsContainer.innerHTML = '';
+    statsContainer.classList.remove('visible');
+  });
+
+  renderFilteredItems();
+
+  viewEl.querySelector('#mostrar').addEventListener('click', function() {
+    const statsContainer = viewEl.querySelector('.conten-estadisticas');
+    const promedioEdad = computeStats(filteredData);
+    statsContainer.innerHTML = `
+        <div><span class="frase-edad">La edad promedio de los personajes es</span></div>
+        <div><span class="edad-promedio">${promedioEdad}</span></div>
+        <div><span class="años">años</span></div>
+    `;
+    statsContainer.classList.add('visible');
+  });
+
+  function mostrarEmptyState() {
+    container.innerHTML = '';
+    const mensajeError = document.createElement('p');
+    mensajeError.innerHTML = `No se encontraron personajes que coincidan con tus criterios. <br>
+    Prueba con otros términos de búsqueda o ajusta los filtros para encontrar a tus personajes favoritos.
+    `;
+    mensajeError.classList.add('empty-state');
+    container.appendChild(mensajeError);
+  }
+
+  return viewEl;
+};

src/components/Footer.js

@@ -0,0 +1,17 @@
+export const footer = () => {
+  const containerFooter = document.createElement ('footer');
+  containerFooter.innerHTML = `  
+    <div class="footerDetails">
+    <footer>
+      <div class="details"><strong>Dirección </strong> En algún lugar de la Tierra Media</div>
+      <div class="details"><strong>Contacto</strong> 1600 - LA COMARCA</div>
+      <div class="details"><strong>Email</strong> lacomarca@elseñordelosanillos.com</div>
+      <br>
+      <div class="details">© 2024 Laboratoria. All Rights Reserved - Silvia Pineda </div>
+    </footer>
+    </div>
+    `;
+
+  return containerFooter;
+
+};

src/components/Header.js

@@ -0,0 +1,10 @@
+export const header = () => {
+  const containerHeader = document.createElement ('header');
+  containerHeader.innerHTML = `  
+    <img class="logo" src="data/img/logo.png" alt="Logo de la página">
+    <h1>El Chat de los Anillos</h1> 
+    `;
+
+  return containerHeader;
+
+};

src/components/Hero.js

@@ -0,0 +1,28 @@
+import { navigateTo } from '../router.js';
+
+export const hero = () => {
+  const containerHero = document.createElement('div');
+  containerHero.classList.add('hero-container');
+
+  containerHero.innerHTML = `  
+    <div class="hero">
+      <h1>¡Embárcate en la <br> búsqueda del anillo!</h1> 
+      <h2>La aventura y la magia te esperan en cada rincón.</h2>
+    </div>
+
+    <h2>¿Qué diría Frodo si...?</h2>
+
+    <h3>¿Quieres chatear con todos los personajes de la saga? Inicia el chat grupal y descubre sus singulares respuestas.</h3>
+
+    <button id="BtnChatGrupal">Iniciar chat ahora</button>
+
+    <p class="linea"></p>
+  `;
+
+  const btnChatGrupal = containerHero.querySelector("#BtnChatGrupal");
+  btnChatGrupal.addEventListener('click', () => {
+    navigateTo('/ChatGrupal');
+  });
+
+  return containerHero;
+};

src/components/NotFound.js

@@ -0,0 +1,19 @@
+export const notFound = () => {
+  const notFoundElement = document.createElement("div");
+  notFoundElement.classList.add("not-found");
+  notFoundElement.innerHTML = `
+    <div class="overlay">
+      <p>Te has desviado del sendero, viajero. <br>
+      Regresa a la <a href="/">Comarca</a> y continúa tu aventura.</p>
+      <button id="button-goHome">Regresar</button>
+    </div>
+    <img class="error-image" src="data/img/error-image.png">
+  `;
+
+  const buttonGoHome = notFoundElement.querySelector("#button-goHome");
+  buttonGoHome.addEventListener("click", () => {
+    window.location.href = "index.html";
+  });
+
+  return notFoundElement;
+};