Laboratoria · YenCastro · Jan 22, 2024 · Jan 23, 2024 · Jan 23, 2024 · Jan 25, 2024
diff --git a/Bienvenida.jpeg b/Bienvenida.jpeg
diff --git a/Data.jpeg b/Data.jpeg
diff --git a/Edad.jpeg b/Edad.jpeg
diff --git a/Filtros.jpeg b/Filtros.jpeg
diff --git a/Fondo1.jpg b/Fondo1.jpg
diff --git a/Genero.jpeg b/Genero.jpeg
diff --git a/GreatVibes-Regular.ttf b/GreatVibes-Regular.ttf
diff --git a/Imagenes/bienvenida.png b/Imagenes/bienvenida.png
diff --git a/Ordenamiento.jpeg b/Ordenamiento.jpeg
diff --git a/Pagina.jpeg b/Pagina.jpeg
diff --git a/README.md b/README.md
diff --git a/Trajetas.jpeg b/Trajetas.jpeg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,4 +49,5 @@
   "jest": {
     "testEnvironment": "jsdom"
   }
-}
+}
+
diff --git a/src/assets/img/bienvenida.png b/src/assets/img/bienvenida.png
diff --git a/src/assets/img/footer.png b/src/assets/img/footer.png
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,57 @@
-// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
+// Estas funciones son ejemplos aquí puedes desarrollar tus propias funciones.
+//Este archivo va a contener toda la funcionalidad que corresponda a obtener, procesar y manipular datos (tus funciones).
 
-export const example = () => {
-  return 'example';
+
+//Primer filtrado, género.
+export const filterGender = (data, selectGender) => {
+  //console.log(selectGender);
+  return data.filter(item => {
+    if (selectGender === item.facts.genero) {
+
+      return true;
+    }
+    else {
+      return false;
+    }
+  })
+};
+
+//Segundo filtrado, rango edad..
+export const filterByAge = (data, range) => {
+  // console.log (range);
+  return data.filter(item => {
+    if (range === item.facts.RangoDeEdad) {
+      return true;
+    } else {
+      return false;
+    }
+  })
 };
+<<<<<<< HEAD
+
+=======
+>>>>>>> ea8026f38d386808aa1e6105dcfa36d27b61f9e8
+
+
+/*Funcion ordenamiento
+- data: Es el arreglo de objetos que se va a ordenar. Cada objeto en este arreglo representa un elemento que se ordenará, como un libro en este caso.
+- sortBy: Es la clave o propiedad por la cual se va a ordenar cada objeto en el arreglo data. Indica qué característica del objeto se utilizará para determinar el orden, como el título del libro, el autor, etc.
+- ortOrder: Es el orden en el que se deben ordenar los objetos en el arreglo data. Puede ser "asc" para ascendente (de menor a mayor) o "desc" para descendente (de mayor a menor). Este parámetro determina la dirección de la ordenación.
+*/
+
+export const sortData = (data, sortBy, sortOrder) => {
+  const datatwo = data.sort((a, b) => {
+    const valueA = a[sortBy];
+    const valueB = b[sortBy];
+    const compare = valueA.localeCompare(valueB);
+    //console.log(compare);
+    return sortOrder === "asc" ? compare : compare * -1;  });
+
+  return datatwo;
+};
+
+/*Funcion de Limpiar filtros */
+export const clearFilters = (data) => {// se crea la funcion y la exportamos
+  return data;//muestrame la data 
 
-export const anotherExample = () => {
-  return [];
 };
diff --git a/src/index.html b/src/index.html
@@ -2,10 +2,85 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Data Lovers</title>
+    <title>Cuantos Cuentos 📚 </title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap">
     <link rel="stylesheet" href="style.css" />
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,
+    minimum-scale=1.0">
+    <script src="https://kit.fontawesome.com/ce357ab3c2.js" crossorigin="anonymous"></script>
   </head>
-  <body>
-    <script src="main.js" type="module"></script>
-  </body>
+
+  <body >
+
+<header id="main-header">
+<div class="content">
+
+  <!-- Category menu -->
+  <label for="filter">Filtrar por: </label>
+  <select data-testid="select-filter" name="filter" id="filter">
+    <option value="Seleccionar">Seleccionar</option>
+    <option value="Literatura infantil">Literatura infantil</option>
+    <option value="Fantasía">Fantasía</option>
+    <option value="Fábula">Fábula</option>
+    <option value="Cuento de hadas">Cuento de hadas</option>
+    <option value="Cuento popular">Cuento popular</option>
+    <option value="Aventura">Aventura</option>
+  </select>
+
+  <label for="order">Ordenar por rango de edad: </label>
+  <select data-testid="select-age" name="OrderAge" id="order">
+    <option value="SeleccionarAge">Seleccionar</option>
+    <option value="Todas las edades">Todas las edades</option>
+    <option value="3 a 5 años">3 a 5 años</option>
+    <option value="6 a 10 años">6 a 10 años</option>
+    <option value="11 a 13 años">11 a 13 años</option>
+  </select>
+
+  <label for="orderad">Ordenar por:</label>
+  <select name="orderad" id="orderad" data-testid="select-order">
+    <option value="all">Elige una opción</option>
+    <option value="asc">Ordenar de la A-Z</option>
+    <option value="desc">Ordenar de la Z-A</option>
+  </select>
+
+  <!-- Category clean button -->
+
+  <label for="button">
+    <button class="clearButton"  data-testid="button-clear" type="button">Limpiar</button>
+  </label>
+
+  <div class="icon-menu">
+ <i class="fa-solid fa-bars"></i></button>
+
+  </div>
+</div>
+
+</header>
+
+  <main>
+<div class="seccion">
+      <h1>Cuantos Cuentos</h1>
+      <p>¡Déjate llevar por la magia de la imaginación en cada página!</p>
+</div>
+
+<div class="ReadMore"> 
+<button id="scrollButton">Deslizar</button>
+</div>
+
+  <div class="seccion2" id="root" ></div>
+
+
+  <script src="main.js" type="module"></script>
+
+<div class="seccion3">
+  <footer>
+    <h2>Julieta y Yenny</h2>
+    <div>
+      <h4>¡Que tus aventuras de lectura sean emocionantes y llenas de magia! ¡Hasta pronto!</h4>
+    </div>
+   </footer>
+</div>
+</main>
+</body>
+
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,65 @@
-import { example } from './dataFunctions.js';
+import { filterGender, filterByAge, sortData, clearFilters} from './dataFunctions.js';
 import { renderItems } from './view.js';
+import data from './data/dataset.js'; // Importa los datos primero
 
-import data from './data/dataset.js';
+document.getElementById('root').appendChild(renderItems(data));
 
-console.log(example, renderItems(data), data);
+
+let filteredData= data;
+const selectElement = document.querySelector("#filter");
+const root = document.querySelector("#root");
+const selectAge= document.querySelector("#order")
+const orderBook = document.querySelector("#orderad");
+filteredData = [...data];
+
+
+// Evento change para el elemento select, género.
+selectElement.addEventListener("change", ()=>{
+  const selectGender = selectElement.options[selectElement.selectedIndex].value
+  /*console.log(selectGender);*/
+
+  const resultFilter = filterGender(data, selectGender)
+  /*console.log(resultFilter);*/
+  root.innerHTML = "";
+  root.appendChild(renderItems(resultFilter));
+}); 
+
+
+// Evento change por Filtro rango de edad 
+selectAge.addEventListener("change", () => {
+  const range = selectAge.options[selectAge.selectedIndex].value;
+  //console.log(range);
+
+  const resultAge= filterByAge(data,range)
+  //console.log(resultAge);
+  root.innerHTML = "";
+  root.appendChild(renderItems(resultAge));
+});
+
+
+//CleanButton
+document.querySelector(".clearButton").addEventListener("click", () => {
+  root.innerHTML = "";//limpia contenedor
+  root.appendChild(renderItems(clearFilters(data)));//renderia de nuevo la data original
+  selectElement.selectedIndex = 0;// lo establece  ala opcion pre determinada al inicio 
+  selectAge.selectedIndex = 0;
+  orderBook.selectedIndex = 0;
+
+});
+
+// Evento change para el ordenamiento.
+orderBook.addEventListener("change", (event) => {
+
+  // Ordenamos los datos filtrados por nombre
+  filteredData = sortData(filteredData, "name", event.target.value);
+
+  // Limpiamos el contenido anterior y renderizamos los datos ordenados
+  root.innerHTML = '';
+  root.appendChild(renderItems(filteredData));
+});
+
+//Funcion para botòn deslizante//
+document.getElementById('scrollButton').addEventListener('click', function () {
+  const root = document.getElementById('root');
+  root.scrollIntoView({ behavior: 'smooth' });
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -49,4 +49,5 @@ @@
       "jest": {
         "testEnvironment": "jsdom"
       }
-    }
+    }