Agrega detalles finales

DanielaPosadas · Nov 1, 2023 · ffba2ba · ffba2ba
1 parent c777310
commit ffba2ba
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 74 deletions.
diff --git a/src/dataFunctions.js b/src/dataFunctions.js
@@ -1,12 +1,16 @@
-// FUNCIONES FILTRO DE LETALIDAD
+// ASIGNAR <OPTION>`S A LA DATA
 export const filtroLet0 = (data, letalidad, reino, orden) => {
   let data_filtrada = data;
+
+  //FILTRAR LETALIDAD Y REINO
   if (letalidad !== "nada") {
     data_filtrada = filtro_letalidad(data_filtrada, letalidad);
   }
   if (reino !== "nada") {
     data_filtrada = filtro_reino(data_filtrada, reino);
   }
+
+//ORDENAR ASC, GENERO H-M O M-H
   if (orden === "asc") {
     data_filtrada = ordenaAZ(data_filtrada);
   } else if (orden === "Mujer") {
@@ -17,13 +21,15 @@ export const filtroLet0 = (data, letalidad, reino, orden) => {
   return data_filtrada;
 };
 
+//FILTRAR DATA PARA OBTENER SOLO FACTS.LETHALITYLEVEL
 export const filtro_letalidad = (data, letalidad) => {
   const filtro1 = data.filter(
     (items) => items.facts.lethalityLevel === letalidad
   );
   return filtro1;
 };
 
+//FILTRAR DATA PARA OBTENER SOLO FACTS.KINGDOM
 export const filtro_reino = (data, reino) => {
   const filtro1 = data.filter((items) => items.facts.kingdom === reino);
   return filtro1;
@@ -58,6 +64,7 @@ export const ordenaGen2 = (data) => {
   return ordenGenH;
 };
 
+//FUNCION ORDENAMIENTO DE A - Z
 export const ordenaAZ = (data) => {
   const sinFiltrar = data.filter((items) => items.name);
   const ordenNameAz = sinFiltrar.sort((a, b) => {
@@ -70,7 +77,7 @@ export const ordenaAZ = (data) => {
   return ordenNameAz;
 };
 
-//COMPUTE-STATS
+//COMPUTE-STATS PARA CALCULO DEL TOTAL DE PERSONAJES
 export const computeStats = (data) => {
   const newPersonajes = data.map((personajes) => personajes.gender);
   const conteoPersonajes = newPersonajes.reduce((total) => {

diff --git a/src/main.js b/src/main.js
@@ -2,10 +2,11 @@ import { filtroLet0,computeStats } from "./dataFunctions.js";
 import { renderItems } from "./view.js";
 import data from "./data/dataset.js";
 
+//SELECCIONAR <DIV> Y RENDERIZAR EN HTML
 const contenedorLista = document.getElementById("root");
 contenedorLista.appendChild(renderItems(data));
 
-//Seleccionar la opcion del filtro letalidad
+//SELECCIONAR <SELECT>
 const filtrarLetalidad = document.querySelector('[id="filtrar-por-letality"]');
 const filtrarReino = document.querySelector('[id="filtrar-por-kingdom"]');
 const ordenarPersonajes = document.querySelector('[id="ordenar-por"]');
@@ -14,6 +15,7 @@ filtrarLetalidad.addEventListener("change", filtros);
 filtrarReino.addEventListener("change", filtros);
 ordenarPersonajes.addEventListener("change", filtros);
 
+//SELECCIONA TODAS LAS <OPTION> DE LOS <SELECT>
 function filtros() {
   const indice = filtrarLetalidad.selectedIndex;
   const optionSelect = filtrarLetalidad.options[indice];
@@ -23,6 +25,7 @@ function filtros() {
   const optionSelect_orden = ordenarPersonajes.options[indice_orden];
   contenedorLista.innerHTML = "";
 
+  //ASIGNAR LOS <OPTION> A LOS filterBy/orderBy
   const dataFiltrada = filtroLet0(
     data,
     optionSelect.value,
@@ -32,77 +35,7 @@ function filtros() {
   contenedorLista.appendChild(renderItems(dataFiltrada));
 }
 
-/*//Seleccionar la opcion del filtro
-  const filtrarLetalidad = document.getElementById("filtrar-por-letality");
-  filtrarLetalidad.addEventListener("change", filtrosLetalidad);
-
-  function filtrosLetalidad(){
-  const indice = filtrarLetalidad.selectedIndex;
-  const optionSelect = filtrarLetalidad.options[indice];
-  contenedorLista.innerHTML='';
-  if(optionSelect.value === "Alto"){
-    const dataFiltrada = filtroLet1(data);
-    contenedorLista.appendChild(renderItems(dataFiltrada));
-  } else if(optionSelect.value === "Moderado"){
-    const dataFiltrada = filtroLet2(data);
-    contenedorLista.appendChild(renderItems(dataFiltrada));
-  } else if(optionSelect.value === "Moderado-bajo"){
-    const dataFiltrada = filtroLet3(data);
-    contenedorLista.appendChild(renderItems(dataFiltrada));
-  } else if(optionSelect.value === "Bajo"){
-    const dataFiltrada = filtroLet4(data);
-    contenedorLista.appendChild(renderItems(dataFiltrada));
-  } else if(optionSelect.value === "nada"){
-    contenedorLista.appendChild(renderItems(data));
-  }}*/
-//Seleccionar la opcion del filtro
-/*const filtrarReino = document.getElementById("filtrar-por-kingdom");
-filtrarReino.addEventListener("change", filtrosReino);
-
-function filtrosReino(){
-  const indice = filtrarReino.selectedIndex;
-  const optionSelect = filtrarReino.options[indice];
-  contenedorLista.innerHTML='';
-  if(optionSelect.value === "Cielo"){
-    const dataFiltrada = filtroRein1(data);
-    contenedorLista.appendChild(renderItems(dataFiltrada));
-  } else if(optionSelect.value === "Earthrealm"){
-    const dataFiltrada = filtroRein2(data);
-    contenedorLista.appendChild(renderItems(dataFiltrada));
-  } else if(optionSelect.value === "Outworld"){
-    const dataFiltrada = filtroRein3(data);
-    contenedorLista.appendChild(renderItems(dataFiltrada));
-  } else if(optionSelect.value === "Netherrealm"){
-    const dataFiltrada = filtroRein4(data);
-    contenedorLista.appendChild(renderItems(dataFiltrada));
-  } else if(optionSelect.value === "nada"){
-    contenedorLista.appendChild(renderItems(data));
-  }
-}*/
-
-/*const ordenarPersonajes = document.getElementById("ordenar-por");
-ordenarPersonajes.addEventListener("change", Ordenar);
-
-function Ordenar(){
-  const indice = ordenarPersonajes.selectedIndex;
-  const optionSelect = ordenarPersonajes.options[indice];
-  contenedorLista.innerHTML='';
-  if (optionSelect.value === "asc"){
-    const dataFiltrada = ordenaAZ(data);
-    contenedorLista.appendChild(renderItems(dataFiltrada));
-  } else if(optionSelect.value === "Mujer"){
-    const dataFiltrada = ordenaGen(data);
-    contenedorLista.appendChild(renderItems(dataFiltrada));
-  } else if(optionSelect.value === "Hombre"){
-    const dataFiltrada = ordenaGen2(data);
-    contenedorLista.appendChild(renderItems(dataFiltrada)); 
-  }  
-    else if(optionSelect.value === "nada"){
-    contenedorLista.appendChild(renderItems(data));
-  }
-}
-*/
-
+//DAR FUNCION DE LIMPIAR SELECCIONES CON BOTON
 //Las tarjetas
 const boton = document.querySelector('[data-testid="button-clear"]');
 boton.addEventListener("click", limpiar);
@@ -115,5 +48,6 @@ function limpiar() {
   contenedorLista.appendChild(renderItems(data));
 }
 
+//CALCULO DEL TOTAL DE PERSONAJES
 const totalPersonajes = document.querySelector('[id="conteo-personajes"]');
 totalPersonajes.textContent = "Total personajes: " + computeStats(data);
diff --git a/src/view.js b/src/view.js
@@ -17,6 +17,7 @@ export const renderItems = (data) => {
     //Meter los <dl> dentro de los <li>
     const dlDescriptiva = document.createElement('dl');
     ilista.appendChild(dlDescriptiva);
+
     //Agregar atributo itemscope e itemtype a los <dl>
     dlDescriptiva.setAttribute("itemscope", "");
     dlDescriptiva.setAttribute("itemtype", "Personajes-MK");