Laboratoria · Elisantib · Jan 11, 2024 · Jan 11, 2024 · Jan 12, 2024 · Jan 13, 2024
diff --git a/README.md b/README.md
diff --git a/src/data/dataset.js b/src/data/dataset.js
diff --git a/src/dataFunctions.js b/src/dataFunctions.js
@@ -1,9 +1,65 @@
-// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
+//funcion de filtrar por elemento
+export const elementDataFilter = (data, filterBy, value) => {
+  const filterElement = data.filter(
+    (elemento) => elemento.facts[filterBy] === value);
+  return filterElement;
+}
 
-export const example = () => {
-  return 'example';
+//sort asc
+export const sortData = (data, sortBy, sortOrder) => {
+  if (sortOrder === "asc") {
+    return data.sort((a, b) => a[sortBy].localeCompare(b[sortBy]));
+  }
+  if (sortOrder === "desc") {
+    return data.sort((a, b) => b[sortBy].localeCompare(a[sortBy]));
+  }
 };
 
-export const anotherExample = () => {
-  return [];
+//funcion de filtrar por carta peligrosa o inofensiva
+
+export const dangerousDataFilter = (data, filterBy, value) => {
+  const filterDangerous = data.filter(
+    (dangerous) => dangerous.extraInfo[filterBy] === value.includes("true")
+  );
+  /* console.log("value: ", value); */
+  /* console.log("data despues del filtro: ", filterDangerous); */
+  return filterDangerous;
+};
+
+//Estadistica de las cartas por peligro o inofensivas 
+
+export const computeStats = (data) => {
+  //console.log(data);
+  const result = data.reduce((acumulador, carta) => {
+    acumulador[carta.extraInfo.isDangerous ? 'peligrosas' : 'inofensivas'] += 1;
+    //console.log(acumulador);
+    return acumulador;
+  },
+  { peligrosas: 0, inofensivas: 0 }
+  );
+  const promPeligrosas = Math.round((result.peligrosas / data.length) * 100); // Math.round() redondear
+  const promInofensivas = Math.round((result.inofensivas / data.length) * 100);
+  //console.log('El porcentaje de cartas peligrosas son', promPeligrosas);
+  //console.log('El porcentaje de cartas inocentes son', promInofensivas);
+  return { promPeligrosas, promInofensivas }
+
+}
+
+//Estadistica por captura de carta
+
+export const percent = (data, filterBy) => {
+  const filterCaptured = data.filter(
+    (captured) => captured.extraInfo[filterBy] === true
+  );
+
+  const percentSyaoran = Math.round(
+    (filterCaptured.length / data.length) * 100
+  );
+
+  const percentSakura = 100 - percentSyaoran;
+
+  return {
+    percentSakura,
+    percentSyaoran,
+  };
 };
diff --git a/src/imgs/1.5 (1).png b/src/imgs/1.5 (1).png
diff --git a/src/imgs/1captura.png b/src/imgs/1captura.png
diff --git a/src/imgs/Erase.jpg b/src/imgs/Erase.jpg
diff --git a/src/imgs/Flower.jpg b/src/imgs/Flower.jpg
diff --git a/src/imgs/Fly.jpg b/src/imgs/Fly.jpg
diff --git a/src/imgs/Libra.jpg b/src/imgs/Libra.jpg
diff --git a/src/imgs/Sweet.jpg b/src/imgs/Sweet.jpg
diff --git a/src/imgs/Thunder.jpg b/src/imgs/Thunder.jpg
diff --git a/src/imgs/Twin.jpg b/src/imgs/Twin.jpg
diff --git a/src/imgs/Wave.jpg b/src/imgs/Wave.jpg
diff --git a/src/imgs/Web.png b/src/imgs/Web.png
diff --git a/src/imgs/captura.png b/src/imgs/captura.png
diff --git a/src/imgs/carta windy id 1.png b/src/imgs/carta windy id 1.png
diff --git a/src/imgs/change.jpg b/src/imgs/change.jpg
diff --git a/src/imgs/dark.jpg b/src/imgs/dark.jpg
diff --git a/src/imgs/dreamweaver.jpg b/src/imgs/dreamweaver.jpg
diff --git a/src/imgs/earthy.jpg b/src/imgs/earthy.jpg
diff --git a/src/imgs/firey.jpeg b/src/imgs/firey.jpeg
diff --git a/src/imgs/freeze.jpeg b/src/imgs/freeze.jpeg
diff --git a/src/imgs/glow.jpg b/src/imgs/glow.jpg
diff --git a/src/imgs/light.jpg b/src/imgs/light.jpg
diff --git a/src/imgs/little.jpg b/src/imgs/little.jpg
diff --git a/src/imgs/mirror.jpg b/src/imgs/mirror.jpg
diff --git a/src/imgs/nothing.jpg b/src/imgs/nothing.jpg
diff --git a/src/imgs/petalo.png b/src/imgs/petalo.png
diff --git a/src/imgs/pngwing.com.png b/src/imgs/pngwing.com.png
diff --git a/src/imgs/prototipo-filtro.png b/src/imgs/prototipo-filtro.png
diff --git a/src/imgs/song.jpg b/src/imgs/song.jpg
diff --git a/src/imgs/storm.jpg b/src/imgs/storm.jpg
diff --git a/src/imgs/time.jpg b/src/imgs/time.jpg
diff --git a/src/imgs/watery.jpg b/src/imgs/watery.jpg
diff --git a/src/imgs/windy.jpg b/src/imgs/windy.jpg
diff --git a/src/index.html b/src/index.html
@@ -1,11 +1,113 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Data Lovers</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <script src="main.js" type="module"></script>
-  </body>
+<html lang="es">
+
+<head>
+  <meta charset="utf-8" />
+  <title>Data-Verse Sakura</title>
+  <link rel="stylesheet" href="style.css" />
+
+  <link rel="icon" type="img/png" href="./imgs/petalo.png" />
+
+  <!-- fuentes -->
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,400;0,700;1,400&family=Kumbh+Sans:wght@400;700&family=Lora&display=swap"
+    rel="stylesheet" />
+</head>
+
+<body>
+  <header>
+    <nav class="navbar">
+      <div class="navbar-container container">
+        <div class="navbar-logo">
+          <h1>Sakura Card Captor</h1>
+          <img class="navbar-logo-img"
+            src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Star_of_Sakura_Card_Captor.svg/2560px-Star_of_Sakura_Card_Captor.svg.png"
+            alt="logoSakura" />
+        </div>
+        <ul class="nav-menu">
+          <li class="nav-menu-links"><a href="#Inicio">Inicio</a></li>
+          <li class="nav-menu-links"><a href="#Cartas">Cartas</a></li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+  <main>
+    <!-- seccion de inicio -->
+    <section class="inicio-section container" id="Inicio">
+      <div class="content-left">
+        <h2 class="content-left-tittle">Sakura: Cazadora Mágica</h2>
+        <p>
+          Sakura debe recapturar las Cartas Clow antes de que desencadenen el
+          caos. Las Cartas Clow son un elemento de la serie de manga y anime
+          "Cardcaptor Sakura", creada por CLAMP. En la historia, las Cartas
+          Clow son cartas mágicas creadas por el poderoso mago Clow Reed. Cada
+          carta representa una fuerza mágica única y tiene su propia
+          personalidad y habilidades distintivas.
+        </p>
+      </div>
+      <div class="content-right">
+        <img class="sakura-img"
+          src="https://4.bp.blogspot.com/-c_xGQCOPXfg/WNSXesU1f5I/AAAAAAAABoI/uZQZhIREAv0Z1KPd7t-5o7dbaNoSfFIXwCLcB/s1600/01%2BCardcaptor%2BSakura%2BPoster.jpg"
+          alt="fotoInicioSakura" />
+      </div>
+    </section>
+    <!-- seccion de  cards -->
+    <section class="cards-section container" id="Cartas">
+      <h3>Cartas Clow</h3>
+      <!-- filtros/botones -->
+      <div class="container-filtros">
+        <div class="container-elementosFilter">
+          <label for="element">Filtra por Elemento:</label>
+          <select data-testid="select-filter" name="elementEsencial" id="element">
+            <option value="">Escoge una opción</option>
+            <option value="Climáticos">Climáticos</option>
+            <option value="Naturaleza">Naturaleza</option>
+            <option value="Dualidad">Dualidad</option>
+            <option value="Mágicos">Mágicos</option>
+            <option value="Emoción">Emoción</option>
+            <option value="Versatil">Versatil</option>
+            <option value="Tiempo">Tiempo</option>
+          </select>
+        </div>
+        <div class="container-dangerFilter">
+          <label for="danger">Filtrar por Daño:</label>
+          <select data-testid="select-filter2" name="isDangerous" id="danger">
+            <option value="">Escoge una opción</option>
+            <option value="true">Peligrosa</option>
+            <option value="false">Inofensiva</option>
+          </select>
+        </div>
+        <div class="container-estadistic">
+          <label for="estadisticDanger">Ver % de estadística:</label>
+          <select data-testid="select-estadistic" name="estadistic" id="estadisticSelect">
+            <option value="">Escoge una opción</option>
+            <option value="true">% Cartas capturadas por Sakura</option>
+            <option value="false">% Cartas capturadas por Syaoran</option>
+          </select>
+        </div>
+        <div class="container-ordenar">
+          <label for="ordenarFilter">Ordenar de:</label>
+          <select data-testid="select-sort" name="name" id="ordenarFilter">
+            <option value="">Ordena de:</option>
+            <option value="asc">A-Z</option>
+            <option value="desc">Z-A</option>
+          </select>
+        </div>
+      </div>
+      <p id="text"></p>
+      <button data-testid="button-clear" class="reset-btn">Reset</button>
+      <!-- cartas -->
+      <div class="container-cards" id="root"></div>
+    </section>
+  </main>
+  <!-- seccion del footer -->
+  <footer class="footer-section">
+    Realizado por: Elisa y Julia -Laboratoria-2024
+  </footer>
+
+
+  <script src="main.js" type="module"></script>
+</body>
+
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,125 @@
-import { example } from './dataFunctions.js';
-import { renderItems } from './view.js';
+// import { example } from "./dataFunctions.js";
+import { renderItems } from "./view.js";
 
-import data from './data/dataset.js';
+import data from "./data/dataset.js";
+import { computeStats, dangerousDataFilter, elementDataFilter, sortData, percent } from "./dataFunctions.js";
 
-console.log(example, renderItems(data), data);
+//------------ funcion para renderizar la data--------------------------------
+function renderData(data) {
+  const body = document.getElementById("root");
+  if (body) {
+    const render = renderItems(data);
+    body.innerHTML = render;
+  }
+}
+
+let cardsData = data // variable de la data original - variable global
+renderData(data) // Total de la Data renderizada
+//--------- filtrado elementos-------
+const selectElement = document.querySelector('[data-testid="select-filter"]');
+selectElement.addEventListener("change", (event) => {
+  const filteredData = elementDataFilter(data, "elementEsencial", event.target.value); //datos que se imprime
+  cardsData = filteredData; // asigno nuevo valor de data filtrada
+  renderData(cardsData); //vuelves a renderizar la data filtrada en el elemento con id "root". Esto actualizará la vista para mostrar solo los elementos que cumplen con el criterio de filtrado seleccionado por el usuario.
+  //console.log(filteredData);
+  //console.log(elementDataFilter(data,"elementEsencial","Climáticos"));// data + campo que filtro y el valor que quiero filtrar
+});
+
+
+//----------------- filtrado por carta inofensiva o peligrosa-----------------
+
+let filterDangerous = [];
+
+const selectDangerous = document.querySelector('[data-testid="select-filter2"]');
+const text = document.getElementById('text') // para mostrar estadisticas
+
+selectDangerous.addEventListener("change", () => {
+  const selected = selectDangerous.options[selectDangerous.selectedIndex].value;
+  filterDangerous = dangerousDataFilter(data, "isDangerous", selected);
+  cardsData = filterDangerous;
+  console.log(selectDangerous.options[selectDangerous.selectedIndex].textContent);
+  renderData(cardsData);
+  const selectedContent = selectDangerous.options[selectDangerous.selectedIndex].textContent;
+
+  if (selectedContent === 'Inofensiva') {
+    text.textContent = `El  ${computeStats(data).promInofensivas}% de cartas son inofensivas` // ${} insertar valores de variables o expresiones dentro de una cadena de texto.
+    //console.log(`promedio de : ${computeStats(data).promInofensivas}`);
+  } else {
+    text.textContent = `El ${computeStats(data).promPeligrosas}% de cartas son peligrosas`
+  }
+});
+
+//----------------filtro por carta capturada por sakura-------------
+
+/* let filterCaptured = []; */
+let filterCapturedPercent = [];
+
+const selectCaptured = document.querySelector(
+  '[data-testid="select-estadistic"]'
+);
+selectCaptured.addEventListener("change", () => {
+  filterCapturedPercent = percent(data, "capturedBySyaoran");
+  const selectIndex = selectCaptured.options[selectCaptured.selectedIndex].textContent;
+
+  if (selectIndex === "% Cartas capturadas por Sakura") {
+    text.textContent = `El porcentaje de cartas capturadas por Sakura es ${filterCapturedPercent.percentSakura}%`;
+  } else {
+    text.textContent = `El porcentaje de cartas capturadas por Syaoran es ${filterCapturedPercent.percentSyaoran}%`;
+  }
+  //console.log(selectCaptured.options[selectCaptured.selectedIndex].textContent);
+  //console.log(estadisticCaptured);
+  //console.log(filterCapturedPercent);
+});
+
+//---------------- estadisticas de cartas capturadas -------------
+
+//--------- ordenar-------
+const sortOrden = document.querySelector('[data-testid="select-sort"]');
+sortOrden.addEventListener("change", (e) => {
+  const sortedData = sortData(cardsData, "name", e.target.value);
+  console.log(sortedData);
+  cardsData = sortedData;
+  renderData(sortedData);
+});
+// ------ boton de reseteo --- 
+const resetBtn = document.querySelector('[data-testid="button-clear"]')
+resetBtn.addEventListener('click', () => {
+  //console.log(resetBtn);
+  cardsData = data;
+  renderData(cardsData);
+  selectElement[0].selected = true;
+  selectDangerous[0].selected = true;
+  sortOrden[0].selected = true;
+  text.textContent = "";
+});
+
+//--------------------- botones  de las cards --------------
+
+const popup = document.querySelectorAll(".popup-box");
+const btn = document.querySelectorAll(".card-button");
+const btnClose = document.querySelectorAll(".popup-close-btn");
+btn.forEach(function (button, index) {
+  button.addEventListener("click", function () {
+    popup[index].style.display = "block";
+  });
+});
+
+//agregar fuera de la ventana cerrar
+
+window.onclick = function (event) {
+  popup.forEach(function (popup) {
+    if (event.target === popup) {
+      popup.style.display = "none";
+    }
+  });
+};
+//agregar boton cierre
+
+btnClose.forEach(function (closeButton) {
+  closeButton.addEventListener("click", function () {
+    const popups = closeButton.closest(".popup-box");
+    if (popups) {
+      popups.style.display = "none";
+    }
+  });
+});