Dev

src/card.js

@@ -0,0 +1,21 @@
+export const renderCard = (card) => {  //creando la constante para importarla en view.js
+
+  const ul = document.createElement("ul"); //creando el ul
+  ul.classList.add("card"); //agregando la clase card
+  ul.setAttribute("itemscope", ""); // Indicando que es un contenedor de datos
+  ul.setAttribute("itemtype", "https://schema.org/Person"); // Especificando el tipo de datos 
+  // revisamos si tiene fecha de la muerte. porque no todos tienen este dato
+  const yearOfDeath = card['facts']['yearOfDeath'] ? card['facts']['yearOfDeath'] : '-';
+  const datos = `
+    <li itemprop="image" class="item"><img src="${card['imageUrl']}" alt="Imagen de ${card['name']}" /></li>
+    <li itemprop="name" class="item">Nombre: ${card['name']}</li>
+    <li itemprop="description" class="item">Descripción: ${card['shortDescription']}</li>
+    <li itemprop="birthDate" class="item">Año de Nacimiento: ${card['facts']['yearOfBirth']}</li>
+    <li itemprop="deathDate" class="item">Fecha de Muerte: ${yearOfDeath}</li>
+    <li itemprop="birthPlace" class="item">Lugar de Nacimiento: ${card['facts']['birthPlace']}</li>
+    <li itemprop="field" class="item">Especialidad: ${card['facts']['mainField']}</li>
+`;//creando tarjeta que contiene informacion, debe ser trabajada en css
+
+  ul.innerHTML = datos; //indicandole al ul que contendra el bloque html de la tarjeta
+  return ul; //retornando div
+}

src/categories.js

@@ -0,0 +1,40 @@
+import data from './data/dataset.js'; //importa data
+
+export function renderCategories(selectBox) {
+
+  const uniqueCategories = [];// array que contendra categorias unicas
+
+  // filtrar categorias unicas
+  for (let i = 0; i < data.length; i++) {
+
+    const cardData = data[i];
+    for(const category of cardData['facts']['mainField']){
+      if(!uniqueCategories.includes(category)){
+        uniqueCategories.push(category);
+      }
+    }
+  }
+
+  // agregando la primera opcion
+  const defaultOption = document.createElement("option");
+  defaultOption.value = '';
+  defaultOption.text = "- Filtrar por Categoría -";
+  selectBox.add(defaultOption);
+
+  // rellenar el selectBox con opciones de categorias unicas que construimos en arriba
+  for(const uniqueCat of uniqueCategories){
+    const option = document.createElement("option");
+    option.value = uniqueCat;
+    option.text = uniqueCat;
+    selectBox.add(option);
+  }
+
+}
+
+//hacer rebase : volver a sentar la base , debes clonar la rama que sale desde dev pero dev tiene una version , 
+//debor revisar si mis cabios son compatibles con la rama
+//git stash guarda tus cambios en algun lugar
+//para mover de rama, git checkout dev = habla de cambio de rama especifica
+//git checkout - me muevo a la rama anterior
+// git rebase Nombre-rama_dev me une los cambios 
+// git stash pop me une los cambios que guarde con git stash de mi rama 

src/dataFunctions.js

@@ -1,9 +1,51 @@
-// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
 
-export const example = () => {
-  return 'example';
-};
+// FILTRAR DATOS
+export const filterData = (data, filterBy='mainField', value='') => {
 
-export const anotherExample = () => {
-  return [];
-};
+  // filtrar tarjetas
+  // Si estamos filtrando por una categoría específica
+  if( value ){
+    return data.filter((cardData)=>cardData['facts']['mainField'].includes(value));
+  }
+  else{
+    // por defecto mostrar todos los datos
+    return data;
+  }
+}
+
+// ORDENAR DATOS
+export const sortData = (data, sortBy='name', sortOrder='asc') => {
+
+  // ordenar por nombre
+
+  if( sortOrder === 'desc'){
+    data.sort((a,b)=>b.name.localeCompare(a.name));
+  }
+  else{
+    // ordenar ascendiente por defecto
+    data.sort((a,b)=>a.name.localeCompare(b.name));
+  }
+
+
+  return data;
+}
+
+// STATS
+export const computeStats = (data) => {
+  // Usar reduce para contar las ocurrencias de cada campo
+  const fieldCounts = data.reduce((acc, card) => {
+    card.facts.mainField.forEach(dato => {
+      acc[dato] = (acc[dato] || 0) + 1;
+    });
+    return acc;
+  }, {});
+
+  const totalItems = data.length;
+
+  // Calcular los porcentajes
+  const fieldPercentages = Object.fromEntries(
+    Object.entries(fieldCounts).map(([key, value]) => [key, `${Math.round((value / totalItems) * 100)}%`])
+  );
+
+  return fieldPercentages;
+}

src/index.html

@@ -1,11 +1,36 @@
 <!DOCTYPE html>
-<html>
+<html lang="es">
   <head>
-    <meta charset="utf-8">
-    <title>Dataverse</title>
-    <link rel="stylesheet" href="style.css" />
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Proyecto</title>
+    <link rel="stylesheet" href="style.css">
   </head>
+
   <body>
-    <script src="main.js" type="module"></script>
+    <header>
+      <h1>MUJERES QUE INSPIRAN</h1>
+      <div class="filter-controls">
+        <!-- las opciones de este selectbox de categorias se agregan por javascript -->
+        <label for="mainField">Categoría</label>
+        <select id="mainField" name="mainField" data-testid="select-filter"></select>
+        <label for="orderDir">Ordenar</label>
+        <select id="orderDir" name="orderDir" data-testid="select-sort">
+          <option value="asc">Ascendente</option>
+          <option value="desc">Descendente</option>
+        </select>
+        <button type="button" id="clean">Limpiar</button>
+      </div>
+    </header>
+    <div id="root">
+      <div class="too"></div>
+    </div>
+    <div id="curious_fact">
+      <h3>Dato curioso:</h3>
+      <h4>  Mayor participacion segun su ocupacion calculado en porcentaje es: </h4>
+    </div>
+    <footer>Creado por: Gaby y Pame.</footer>
+     <script src="main.js" type="module"></script>
   </body>
-</html>
+</html>

src/main.js

@@ -1,6 +1,45 @@
-import { example } from './dataFunctions.js';
-import { renderItems } from './view.js';
+import data from './data/dataset.js'; //importa data
+import { renderItems, renderStats } from './view.js'; //importa view
+import { renderCategories } from './categories.js'; //importa categories
+import { filterData,sortData,computeStats } from './dataFunctions.js';
 
-import data from './data/dataset.js';
+// estas 2 lineas sirven solo para pasar los test
+const divTest = document.createElement("div");
+divTest.classList.add('para-pasar-el-test');
 
-console.log(example, renderItems(data), data);
+// imprimimos las tarjetas actualizando innerHTML del div #root
+const root = document.querySelector("#root"); //constante que selecciona el div
+root.innerHTML = renderItems(sortData(data,'name','asc'));
+
+const selectBoxCategory = document.querySelector('select[name="mainField"]');
+const selectBoxOrder = document.querySelector('select[name="orderDir"]');
+const cleanButton = document.querySelector('#clean');
+
+// crear opciones de select de categorias dinamicamente. opciones unicas!!
+renderCategories(selectBoxCategory);
+
+const facts = document.querySelector("#curious_fact");
+facts.textContent = renderStats(computeStats(data));
+
+// agregar event listener de on Change para el select box de categorias
+selectBoxCategory.addEventListener('change',function(event){
+  const filtered = filterData(data,'mainField',event.target.value);
+  root.innerHTML = renderItems(sortData(filtered,'name',selectBoxOrder.value));
+});
+
+// agregar event listener de on Change para el select box de ordenar
+selectBoxOrder.addEventListener('change',function(event){
+  const category = selectBoxCategory.value;
+  const filtered = filterData(data,'mainField',category);
+  root.innerHTML = renderItems(sortData(filtered,'name',event.target.value));
+});
+
+cleanButton.addEventListener('click',function(){
+  selectBoxCategory.value = ''; //actualiza los cambios
+  selectBoxOrder.value = 'asc';
+
+  const change_event = new Event('change');// nuevo evento que se ejecuta
+
+  selectBoxCategory.dispatchEvent(change_event);// gatilla los cambios forzando al nuevo evento
+  selectBoxOrder.dispatchEvent(change_event);
+});

src/style.css

@@ -0,0 +1,136 @@
+* {
+  padding: 0px; 
+  margin: 0px; 
+  box-sizing: border-box;
+
+} 
+
+body {
+  font-family: Arial, sans-serif; /* Define la fuente */
+  background-color: #4c2f53; /* Color de fondo suave */
+  padding: 20px; 
+  border: 0px;
+  margin: 0px;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+}
+
+header {
+  margin-bottom: 20px;
+  text-align: center; /* Centra el contenido del header */
+  background-image: linear-gradient(rgba(163, 146, 165, 0.35), rgba(144, 109, 137, 0.244)),url("oig2_720.jpg");
+
+}
+
+body header h1 {
+  margin: 30px; /* Espacio superior */
+  text-shadow: rgb(24, 2, 24)  rgb(244, 212, 235); /* Color del texto */
+  font-size: 3em; /* Tamaño de fuente */
+
+}
+
+#root {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: center;
+}
+.card {
+   margin: 10px;
+   border: 2px solid #ddd; /* Borde de la tarjeta */
+   border-radius: 0 30px 0 30px; /* Bordes redondeados */
+   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
+   background:rgba(241, 116, 239, 0.478); /* Color de fondo de las tarjetas */
+   padding: 20px;
+   text-align: left;
+   flex: 1 0 calc(25% - 40px); /* Cada tarjeta ocupará un 40% del ancho del contenedor, menos el espacio del gap */
+   box-sizing: border-box;
+   max-width: calc(25% - 40px); /* Limitar el ancho máximo de cada tarjeta */
+   display: flex;
+   flex-wrap: wrap;
+   list-style-type: none; /* Elimina los puntos de la lista */
+   padding: 0; /* Elimina el padding */
+   font-size: 1.1em;
+}
+
+.card li.item {
+      margin-bottom: 10px; /* Espaciado inferior entre ítems */
+      display: flex;
+      color: rgb(184, 198, 205);
+      text-shadow: 2px 2px 5px rgb(1, 1, 1);
+      padding-left: 10px;
+}
+
+.card li.item:first-of-type{
+  width: 100%;
+  align-self: center;
+  padding-top: 10px;
+}
+
+.card li.item img {
+  height: 200px;
+  width: 250px;
+  object-fit: cover;
+}
+select{
+  background-color: #e8d8eb;
+  color: rgb(14, 12, 14);
+  text-shadow: 2px 2px 5px rgb(225, 208, 208);
+  font-size: 1.1em
+
+} 
+label{
+  color: rgb(7, 6, 7);
+  text-shadow: 2px 2px 5px rgb(234, 220, 220);
+  font-size: 1.3em
+}
+button{
+  background-color: #e8d8eb;
+  text-shadow: #4c2f53;
+  color: rgb(14, 12, 14);
+  text-shadow: 2px 2px 5px rgb(250, 236, 236);
+  font-size: 15px
+}
+
+footer {
+  max-width: 100%;
+  background-color: #9951a7;
+  padding: 20px;
+  bottom: 0%;
+  text-align: center;
+  color: rgb(11, 8, 10);
+  text-shadow: 2px 2px 5px rgb(237, 215, 215);
+  font-size: 2em
+}
+#curious_fact{
+  max-width: 100%;
+  background-image: linear-gradient(rgba(163, 146, 165, 0.35), rgba(144, 109, 137, 0.244)),url("oig2_720.jpg");
+  padding: 10px;
+  bottom: 0%;
+  text-align: center;
+  margin: 10px;
+  color: rgb(3, 2, 3);
+  text-shadow: 2px 2px 5px rgb(246, 242, 242);
+  font-size: 2em;
+}
+h3{
+  color: rgb(3, 2, 3);
+  text-shadow: 2px 2px 5px rgb(246, 242, 242);
+}
+#curious_fact div{
+  margin: 30px;
+}
+@media (max-width: 900px) {
+  .card {
+      flex: 1 1 calc(50% - 40px); /* 50% del ancho menos el espacio del gap */
+      max-width: calc(50% - 40px);
+  }
+}
+
+@media (max-width: 600px) {
+  .card {
+      flex: 1 1 calc(100% - 40px); /* 100% del ancho menos el espacio del gap */
+      max-width: calc(100% - 40px);
+  }}

src/view.js

@@ -1,6 +1,16 @@
+import { renderCard } from './card.js'; // importa vista
+
+
 export const renderItems = (data) => {
-  console.log(data)
-  // Aquí comienza tu código y puedes retornar lo que tu necesites
-  return 'example';
-};
+  // Crear una cadena concatenando los outerHTML de cada tarjeta renderizada
+  return data.map(item => renderCard(item).outerHTML).join('');
+}
 
+export const renderStats = (fieldPercentages) => {
+
+  return `
+    Ciencias de la Computación: ${fieldPercentages['Ciencias de la Computación'] || '0%'} ,
+    Matemáticas: ${fieldPercentages['Matemáticas'] || '0%'} ,
+    Química: ${fieldPercentages['Química'] || '0%'}
+  `.trim();
+}