Laboratoria · Danoninoch · Feb 16, 2024 · Feb 18, 2024 · Feb 19, 2024 · Feb 21, 2024
diff --git a/src/data/dataset.js b/src/data/dataset.js
@@ -9,7 +9,7 @@ export default [
       "yearOfBirth": "1815",
       "yearOfDeath": "1852",
       "birthPlace": "Londres, Reino Unido",
-      "mainField": "Ciencia de la Computación"
+      "mainField": "Ciencias de la Computación"
     },
     "extraInfo": {
       "imageSource": "https://www.bing.com/images/create/genera-una-imagen-de-ada-lovelace2c-la-primera-prog/650a1eff8ff04b88833d5cdef0309441"
@@ -66,7 +66,7 @@ export default [
   {
     "id": "shakuntala-devi",
     "name": "Shakuntala Devi",
-    "shortDescription": "Matemática prodigio, conocida como la 'Calculadora Humana'.",
+    "shortDescription": "Matemática prodígio, conocida como la 'Calculadora Humana'.",
     "description": "Conocida como \"la bruja de las matemáticas\" de la India, dejó una marca indeleble en el mundo de los números. Su capacidad mental asombrosa la llevó a resolver complejos cálculos matemáticos mentalmente en cuestión de segundos, estableciendo récords mundiales. Además de su talento innato, Devi promovió activamente la educación matemática y luchó por la igualdad de género en un país donde las mujeres enfrentaban desafíos en la ciencia y la educación. Su legado destaca el poder de la mente humana y la importancia de la igualdad de oportunidades en la ciencia.",
     "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/shakuntala-devi.jpg",
     "facts": {

diff --git a/src/dataFunctions.js b/src/dataFunctions.js
@@ -1,9 +1,36 @@
 // Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
+// quiero filtrar la data
+// quiero realizar una función para filtrar los datos que necesito
 
-export const example = () => {
-  return 'example';
+export const filtrerData = (data, filterBy, value) => {
+  // Utiliza el método filter() para filtrar los datos
+  return data.filter((data) => {
+    // Verifica si el campo filterBy existe en el objeto de datos
+    if (data.facts[filterBy]) {
+      // Si existe, compara el valor del campo con el valor deseado
+      return data.facts[filterBy] === value;
+    }
+    // Si el campo filterBy no existe, devuelve false para excluir este dato del resultado
+    return false;
+  });
 };
 
-export const anotherExample = () => {
-  return [];
-};
+// Función para ordenar los datos
+
+function sortData(data, sortBy, sortOrder) {
+  const sortedData = [...data];
+  sortedData.sort((a, b) => {
+      if (sortOrder === 'asc') {
+          return a[sortBy] > b[sortBy] ? 1 : -1;
+      } else {
+          return a[sortBy] < b[sortBy] ? 1 : -1;
+      }
+  });
+  return sortedData;
+}
+
+
+
+
+
+
diff --git a/src/index.html b/src/index.html
@@ -1,11 +1,59 @@
 <!DOCTYPE html>
-<html>
+<html lang="es">
   <head>
     <meta charset="utf-8">
-    <title>Data Lovers</title>
+    <title>Mujeres en la Ciencia</title>
     <link rel="stylesheet" href="style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Exo+2:ital,wght@0,100..900;1,100..900&family=Lobster&display=swap" rel="stylesheet">
   </head>
+  <header> 
+   <h1>CAMBIOSGI</h1>
+  </header>
+
+  <main> 
+    <h2>Ellas fueron las primeras científicas</h2>
+  </main>
+  </div>
+
   <body>
+
+
+    <div id="root" class="conteiner-cards">
+     <label for="tercera">Especialidad</label>
+     <select data-testid="select-sort" name="name" id="tercera">
+       <option value="Ciencia-de-la-Computación">Ciencia de la Computación</option>
+       <option value="matemáticas">Matemáticas</option>
+       <option value="ComposiciónMusicalVideoJuegos">Composición Musical - Video Juegos</option>
+       <option value="CienciasdelaComputación">Ciencias de la Computación</option>
+       <option value="física">Física</option>
+       <option value="FísicadePartículas">Física de Partículas</option>
+       <option value="astronomía">Astronomía</option>
+       <option value="astrofísica">Astrofísica</option>
+       <option value="química">Química</option>
+       <option value="microbiología">Microbiología</option>
+       <option value="bioquímica">Bioquímica</option>
+       <option value="cristalografía">Cristalografía</option>
+     </select>
+
+     <label>Orden</label>
+     <select data-testid="select-sort" name="name" id="cuarta">
+       <option value="asc">A - Z</option>
+       <option value="desc">Z - A</option>
+     </select>
+    </div> 
+    <button select data-testid="button-clear">Limpiar</button>
+
+
+
+
+    <footer>
+       By: Dana Córdoba &amp; Elisabeth Crisóstomo DEV013 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,21 @@
-import { example } from './dataFunctions.js';
+import { filtrerData } from './dataFunctions.js';
 import { renderItems } from './view.js';
 
 import data from './data/dataset.js';
 
-console.log(example, renderItems(data), data);
+const contenedor = document.querySelector('#root')
+
+console.log(filtrerData(data,"Matemática"));
+console.log(contenedor, renderItems(data), data);
+
+const elementos = document.querySelector('#tercera');
+
+contenedor.addEventListener('change', ()=>{
+    elementos.especialidad
+
+});
+
+
+
+
+
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,102 @@
+* { 
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
+}
+
+body{
+   background-image: url(./Imagenes/final.jpg);
+   background-repeat: no-repeat;
+   background-position: center center;
+   background-attachment: fixed;
+   background-size: cover;
+
+}
+header {
+ height: 200px;
+ background-size: cover;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+}
+
+h1{
+
+   text-align: center;
+   font-family: bold;
+   position: sticky;
+   color: white;
+}
+h2 {
+   color: white;
+}
+
+ul {
+   display: flex;
+   flex-wrap: wrap;
+   justify-content: center;
+}
+
+.card {
+
+   list-style-type: none; 
+   gap: 5px;
+   text-align: justify;
+   padding: 15px;
+    position: relative;
+   background-color: #8fcaca;
+   font-family: 'Times New Roman', Times, serif;
+   width: 350px;
+   border-radius: 5px;
+   margin: 15px;
+
+}
+
+.card img {
+  width: 80%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 10px;
+  border-radius: 2%;
+}
+
+
+/*.opción-back, .opción-front, .opción{
+
+  text-align: auto;
+  color: rgb(52, 41, 15);
+  font-size: 15px;
+  font: 'bold';
+  position: relative;
+  left: 20%;
+  top: 40%;
+  height: 20px;
+}
+
+
+.card {
+
+   list-style-type: none; //para sacar los puntos o viñetas
+   gap: 5px;
+   margin: 2%;
+   text-align: justify;
+   margin:3%;
+   background-color: #85b4aa;
+   font-family: 'Times New Roman', Times, serif;
+   box-shadow: 0px 5px 8px rgba(216, 214, 214, 0.1);
+   width: calc(35% - 5%);
+   border-radius: 2%;
+
+.card img {
+  width: 80%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 10px;
+  box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 2%;*/
+
diff --git a/src/view.js b/src/view.js
@@ -1,5 +1,33 @@
 export const renderItems = (data) => {
-  console.log(data)
+  //console.log(data)
   // Aquí comienza tu código y puedes retornar lo que tu necesites
-  return 'example';
+  //Debe tener las funciones para rederizar los elementos dinamicamente
+  //función renderItems(data): recibe los datos renderizarlos y devolver 1 elemento DOM o cadena de datos
+
+  const list = document.createElement ("ul");
+  // iterar sobre cada objeto de dataset
+  data.forEach(data=> {
+   const itemList = document.createElement('li');
+   const itemContainer = document.createElement('dl');
+   itemList.classList.add("card");
+   itemContainer.innerHTML = `  
+      <dt class= "cards"><img src=${data.imageUrl} alt=${data.name}></dt>
+      <dt class="opción" >Nombre:</dt><dd class= "opción-front" itemprop="name">${data.name}</dd>
+      <dt class="opción" >Descripción:</dt> <dd class= "opción-front" itemprop="DescripciónC":>${data.shortDescription}</dd>
+      <dt class="opción" >Fecha de nacimiento:</dt> <dd class= "opción-back" itemprop="fechaDeNacimiento">${data.facts.yearOfBirth}</dd>
+      <dt class="opción" >Fecha de muerte:</dt> <dd class= "opción-back" itemprop="fechaDeMuerte">${data.facts.yearOfDeath}</dd>
+      <dt class="opción" >Nacionalidad:</dt> <dd class = "opción-back" itemprop="Nacionalidad">${data.facts.birthPlace}</dd>
+      <dt class="opción" >Descripción:</dt> <dd class= "opción-back"itemprop="Descripción">${data.description}</dd> 
+
+      `
+    itemContainer.setAttribute("itemscope", "");
+    itemContainer.setAttribute("itemtype", "Científicas");
+    itemList.appendChild(itemContainer);
+    list.appendChild(itemList);
+
+  });
+  const divContenedorTarjetas = document.querySelector('#root');
+  divContenedorTarjetas.appendChild(list);
+  return list;
+
 };