Laboratoria · miriam-moztap · Oct 18, 2023 · Oct 19, 2023 · Oct 25, 2023 · Oct 25, 2023
diff --git a/README.md b/README.md
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "htmlhint": "htmlhint src/*.html test/*.html",
     "eslint": "eslint --ext .js src/ test/",
     "pretest": "npm run eslint && npm run htmlhint",
-    "test": "jest --verbose --coverage test/*.spec.js",
+    "test": "jest --verbose --coverage",
     "test:e2e": "playwright test",
     "test:oas": "jest --verbose tests-read-only/oa/",
     "pretest:oas-html": "npm run pretest",

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,93 @@
 // Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
 
-export const example = () => {
-  return 'example';
-};
+//Función para seleccionar los filtros
+export function filtrarDatos(data, selectedValue) {  
+
+  if (selectedValue === "Todos los productos") {
+    return data;
+  }
+  else if (selectedValue !== "Todos los productos"){
+
+    const datosFiltrados=data.filter(element => element.clasificacion === selectedValue);
+    return datosFiltrados;
+  }
+}
 
-export const anotherExample = () => {
-  return [];
-};
+export function dataOrdenadaAZ(data){
+  const dataCopy=[...data]; //función de propagación ayuda a copiar los datos de una matriz 
+  dataCopy.sort(function(a,b){
+    const dataA=a.planta.toLowerCase();
+    const dataB= b.planta.toLowerCase();
+
+    if (dataA > dataB) {
+      return 1;
+    }
+    if (dataA < dataB) {
+      return -1;
+    }
+    // a must be equal to b
+    return 0;
+  });
+  return dataCopy;
+}
+
+
+export function dataOrdenadaZA(data){
+  const dataCopy= data.slice(0); //se tine que volver a almacenar para no trabajar con un arreglo ordenado, por eso muestra el mismo ordenamiento ambas veces
+  dataCopy.sort(function(a,b){ //se usa slice para crear una copia superficial de un array (matriz) o para extraer un subconjunto de elementos
+    const data1A=a.planta.toLowerCase();
+    const data1B= b.planta.toLowerCase();
+
+    if (data1A < data1B) {
+      return 1;
+    }
+    if (data1A > data1B) {
+      return -1;
+    }
+    // a must be equal to b
+    return 0;
+  });
+  return dataCopy;
+}
+
+
+
+/*const items = [
+    { name: "Edward", value: 21 },
+    { name: "Sharpe", value: 37 },
+    { name: "And", value: 45 },
+    { name: "The", value: -12 },
+    { name: "Magnetic", value: 13 },
+    { name: "Zeros", value: 37 },
+  ];
+  items.sort(function (a, b) {
+
+    const itemsA = a.name.toLowerCase();
+    const itemsB = b.name.toLocaleLowerCase();
+    if (itemsA > itemsB) {
+      return 1;
+    }
+    if (itemsA < itemsB) {
+      return -1;
+    }
+    // a must be equal to b
+      return 0;
+  });
+  console.log(items)*/
+/*export function clasifFilter(elemento){
+  if(elemento.Clasificacion === "antiácida"){
+    return elemento;
+  } 
+  /// recuerda que es otro elemento de escucha para ese "filtro"
+}
+
+export function fortalecFilter(elemento){
+  if(elemento.Clasificacion === "fortalecedora"){
+    return elemento;
+  } 
+  /// recuerda que es otro elemento de escucha para ese "filtro"
+}*/
+
+//xport const anotherExample = () => {
+//return [];
+//};
diff --git a/src/images/10.Argemone mexicana.jpg b/src/images/10.Argemone mexicana.jpg
diff --git a/src/images/11.Nolina recurvata.jpg b/src/images/11.Nolina recurvata.jpg
diff --git a/src/images/12.Salvia mexicana.jpg b/src/images/12.Salvia mexicana.jpg
diff --git a/src/images/13. Amphipterygium adstringens.jpg b/src/images/13. Amphipterygium adstringens.jpg
diff --git a/src/images/14. Comarostaphylis polifolia.jpg b/src/images/14. Comarostaphylis polifolia.jpg
diff --git a/src/images/15. Aloysia citriodora.jpg b/src/images/15. Aloysia citriodora.jpg
diff --git a/src/images/16. Gnaphalium spp.jpg b/src/images/16. Gnaphalium spp.jpg
diff --git a/src/images/17. Eysenhardtia polystachya.jpg b/src/images/17. Eysenhardtia polystachya.jpg
diff --git a/src/images/18. Salvia hispanica.jpg b/src/images/18. Salvia hispanica.jpg
diff --git a/src/images/19. Borago officinalis.jpg b/src/images/19. Borago officinalis.jpg
diff --git a/src/images/2.nopal.jpg b/src/images/2.nopal.jpg
diff --git a/src/images/20. Mimosa tenuiflora.jpg b/src/images/20. Mimosa tenuiflora.jpg
diff --git a/src/images/21. Tagetes erecta.jpg b/src/images/21. Tagetes erecta.jpg
diff --git a/src/images/22. Equisetum giganteum.jpg b/src/images/22. Equisetum giganteum.jpg
diff --git a/src/images/23. Casimiroa edulis.jpg b/src/images/23. Casimiroa edulis.jpg
diff --git a/src/images/24. manzanilla.jpg b/src/images/24. manzanilla.jpg
diff --git a/src/images/3.yacon.jpg b/src/images/3.yacon.jpg
diff --git a/src/images/4.tlanchalagua.jpg b/src/images/4.tlanchalagua.jpg
diff --git a/src/images/5.Turnera diffusa.jpg b/src/images/5.Turnera diffusa.jpg
diff --git a/src/images/5.turneraDiffusa.jpg b/src/images/5.turneraDiffusa.jpg
diff --git a/src/images/6.Ruta chalepensis.jpg b/src/images/6.Ruta chalepensis.jpg
diff --git a/src/images/7.Psychotria ipecacuanha.jpg b/src/images/7.Psychotria ipecacuanha.jpg
diff --git a/src/images/8.Datisca glomerata.jpg b/src/images/8.Datisca glomerata.jpg
diff --git a/src/images/9.Cordia boissieri.jpg b/src/images/9.Cordia boissieri.jpg
diff --git a/src/images/copachi.jpg b/src/images/copachi.jpg
diff --git a/src/images/fondo2.jpg b/src/images/fondo2.jpg
diff --git a/src/images/fondo3.jpg b/src/images/fondo3.jpg
diff --git a/src/images/fondo4.jpg b/src/images/fondo4.jpg
diff --git a/src/images/fondo5.jpg b/src/images/fondo5.jpg
diff --git a/src/images/fondo6.jpg b/src/images/fondo6.jpg
diff --git a/src/images/fondo7.jpg b/src/images/fondo7.jpg
diff --git a/src/images/fondo8.jpg b/src/images/fondo8.jpg
diff --git a/src/images/fondo9.jpg b/src/images/fondo9.jpg
diff --git a/src/index.html b/src/index.html
@@ -3,9 +3,41 @@
   <head>
     <meta charset="utf-8">
     <title>Data Lovers</title>
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="style.css"/>
   </head>
-  <body>
-    <script src="main.js" type="module"></script>
+
+  <header>
+    <h1>PLANTAS MEDICINALES</h1>
+  </header>
+
+  <body> 
+    <label for="clasificacion">Selecciona una Clasificación</label> <!--cambiar la estructura a la que pide el readme-->
+    <select name="clasificacion" data-testid="select-filter" id="clasificacion">
+      <option value="Todos los productos">Todos los productos</option>
+      <option value="Antiácida">Antiácida</option>
+      <option value="Antidiabética">Antidiabética</option>
+      <option value="Cardiotónica">Cardiotónica</option>
+      <option value="Emenagoga">Emenagoga</option>
+      <option value="Emética">Emética</option>
+      <option value="Emoliente">Emoliente</option>
+      <option value="Febrífuga">Febrífuga</option>
+      <option value="Fortalecedora">Fortalecedora</option>
+      <option value="Nutricional">Nutricional</option>
+    </select>
+
+    <label for="sorting">Selecciona un Ordenamiento</label> <!--para la etiqueta, el for debe ser igual que el id-->
+    <select data-testid="select-sort" name="name" id="sorting">
+      <option value="Ordenamiento">Ordenamiento</option>
+      <option value="asc">A-Z</option> 
+      <option value="desc">Z-A</option>
+    </select>
+
+  <button data-testid="button-clear">Limpiar</button>
+
+  <div id="root"></div>  <!--en este div se van a crear los elementos HTML desde el archivo main-->
+
+  <script src="main.js" type="module"></script>
+
+  <footer name="end-page"></footer>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,61 @@
-import { example } from './dataFunctions.js';
+import { filtrarDatos } from './dataFunctions.js';
+import { dataOrdenadaAZ } from './dataFunctions.js';
+import { dataOrdenadaZA } from './dataFunctions.js';
 import { renderItems } from './view.js';
 
 import data from './data/dataset.js';
 
-console.log(example, renderItems(data), data);
+const container = document.querySelector("#root");
+container.innerHTML = renderItems(data);
+const dataManipulada = data;
+
+const selectFilter = document.querySelector('select[name="clasificacion"]');
+const selectSort = document.querySelector('select[name="name"]');
+selectFilter.addEventListener('change', (event) => {
+
+  const selectedValue = event.target.value; //por qué value?
+  const dataFiltrada = filtrarDatos(dataManipulada, selectedValue);
+  container.innerHTML = renderItems(dataFiltrada);
+  selectSort.addEventListener('change', function (event) {
+
+    let sortedData = event.target.value;
+    if (selectSort.value === "desc") {
+      sortedData = dataOrdenadaAZ(dataFiltrada); // Utiliza la función de ordenamiento
+    } else if (selectSort.value === "asc") {
+      sortedData = dataOrdenadaZA(dataFiltrada); // Utiliza la función de ordenamiento
+    }
+    container.innerHTML = renderItems(sortedData);
+
+  });
+})
+
+selectSort.addEventListener('change', function (event) {
+  let sortedData = event.target.value;
+  if (selectSort.value === "desc") {
+    sortedData = dataOrdenadaAZ(dataManipulada); // Utiliza la función de ordenamiento
+  } else if (selectSort.value === "asc") {
+    sortedData = dataOrdenadaZA(dataManipulada); // Utiliza la función de ordenamiento
+  }
+  container.innerHTML = renderItems(sortedData);
+
+});
+
+
+//Con esta modificación, solo se crea un elemento ul una vez, y los elementos li se agregan a ese elemento ul en lugar de crear múltiples elementos ul. Además, se utiliza selectedSort.innerHTML = ''; para limpiar el contenido del elemento ul en cada cambio, de modo que se actualice adecuadamente con la nueva información.
+
+
+const clearbtn = document.querySelector('[data-testid="button-clear"]');
+clearbtn.addEventListener("click", function () {
+
+  container.innerHTML = renderItems(data);
+
+
+});
+
+
+
+
+
+//console.log(dataOrdenadaAZ(data));
+
+//console.log(dataOrdenadaZA(data));
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,168 @@
+*{
+    margin: 2px;
+    padding: 3px;
+}
+header {
+    margin: auto;
+    display: block;
+    text-align: center;
+    position: relative;
+    font-size: 30px;
+    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+    color:bisque;
+    padding: 10px; /* Agrega relleno si es necesario */
+}
+@media (max-width: 768px) {
+    header {
+    padding: 10px;
+    font-size: 16px;
+    }
+}
+
+body {
+    background:url('./images/fondo7.jpg')no-repeat center center fixed;
+    background-size: cover;
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+
+}
+
+.container {
+    width: 90%; /*para que sea responsive*/
+    margin: 20px auto;
+    max-width: 1200px;
+    position: relative;
+}
+.tarjeta {
+
+  background-color: rgba(40, 135, 159, 0.2);
+  margin-bottom: 10px;
+  margin-top: 100px;
+  text-align: center;
+  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.25);
+  overflow: hidden;
+  padding: 20px;
+  border-radius: 15px; /* Bordes redondeados */
+  display: flexbox; /*con esto la pantalla se ajusta para ser responsive*/
+  cursor: default;
+  transition: all 400ms ease; /*es la transición de la tarjeta cuando se coloca el cursor sobre ella*/
+  }
+
+.tarjeta:hover{
+    box-shadow:5px 5px 20px rgba(0,0,0,0.4);
+    transform: translateY(-3%);
+
+}
+
+.tarjeta img{ /*código de la imagen*/
+
+    display:block; /*para que la imagen sea manipulable al momento de que la tarjeta se modifique(responsive)*/
+    width: 100%; /*para que la imagen se ajuste al ancho de la tarjeta en ese porcentaje*/ 
+    border-radius: 8px 8px 0 0; 
+
+}
+
+@media (min-width: 1020px) {
+    .container{
+        display:grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 15px
+    }
+    .tarjeta{
+        margin:10;
+        display:flex;
+        flex-direction:column;
+        flex-grow: 1px;
+    }
+}
+
+h2 {
+    background-color: rgba(246, 136, 73, 0.3);
+    color: rgb(220, 217, 214);
+    display:block;
+    text-align: center;
+    padding: 7px;
+    margin-top: 1px;
+    border-radius: 8px;
+
+}
+h3 {
+
+    color: #f7f7e9;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    text-align: center;
+    position: relative;
+    font-size: 19px;
+}
+
+h4 {
+
+    color: #d3d3ce;
+    font-family: sans-serif;
+    text-align: justify;
+    font-size: 17px;
+    position: relative;
+
+}
+
+
+h3, h4 {
+    margin: 0px; /* Elimina el margen alrededor de los elementos h2 y h4 */
+    display: inline; /* Hace que los elementos h2 y h4 se muestren en la misma línea */
+}
+dt, dd {
+    margin: 0; /* Elimina el margen alrededor de los elementos dt y dd */
+    padding: 5px;
+    margin-top: 10px;
+    margin-bottom: 0px;
+    /* Hace que los elementos dt y dd se muestren en la misma línea */
+}
+
+button[data-testid="button-clear"]{
+  background: rgb(150,87,61, 0.3);
+  border:8px solid rgba(150,87,61, 0.3);
+  color:rgb(241, 217, 217);
+  position: relative;
+  padding: 9 px;
+  width: 150px;
+  text-align: center;
+}
+
+/*.tarjeta img {
+    width: 320px; /* Tamaño fijo en píxeles */
+    /*height: 285px;
+    border-radius: 5%;
+    display: block;
+    text-align: center;
+*/
+
+select {
+    display:flexbox;
+    color:rgb(241, 217, 217);
+    background-color: rgb(150, 87, 61, 0.4);
+    border-color: rgb(150,87,61);
+    padding: 10px;
+    width: 200px;
+    position: relative;
+    text-align: center;
+}
+
+label {
+    color:rgb(241, 217, 217);
+}
+footer {
+    display:flexbox;
+    color:black;
+    background-color: rgba(150, 139, 111, 0.3);
+    padding: 10px;
+    width: 200px;
+    position: relative;
+    text-align: center;
+}
+
+ul {
+    display:flexbox;
+    padding: 10px;
+    width: 200px;
+    position: relative;
+    text-align: center;
+}