Laboratoria · Natyushk · Mar 15, 2024 · Mar 15, 2024 · Mar 15, 2024 · Mar 15, 2024
diff --git a/IMAGENES/Alice Walton.jpg b/IMAGENES/Alice Walton.jpg
diff --git a/IMAGENES/Bernard Arnault.jpeg b/IMAGENES/Bernard Arnault.jpeg
diff --git a/IMAGENES/Bill Gates.jpeg b/IMAGENES/Bill Gates.jpeg
diff --git a/IMAGENES/Carlos Slim.jpg b/IMAGENES/Carlos Slim.jpg
diff --git a/IMAGENES/François_Pinault.jpg b/IMAGENES/François_Pinault.jpg
diff --git a/IMAGENES/Giovani Ferrero.jpg b/IMAGENES/Giovani Ferrero.jpg
diff --git a/IMAGENES/Jim_Walton.jpg b/IMAGENES/Jim_Walton.jpg
diff --git a/IMAGENES/Larry Page.jpg b/IMAGENES/Larry Page.jpg
diff --git a/IMAGENES/Lei Jun.jpg b/IMAGENES/Lei Jun.jpg
diff --git a/IMAGENES/Ma-Huateng.jpg b/IMAGENES/Ma-Huateng.jpg
diff --git a/IMAGENES/Mark Zuckerberg.jpeg b/IMAGENES/Mark Zuckerberg.jpeg
diff --git a/IMAGENES/Mike Bloomberg.jpg b/IMAGENES/Mike Bloomberg.jpg
diff --git a/IMAGENES/Mukesh Ambani.jpeg b/IMAGENES/Mukesh Ambani.jpeg
diff --git a/IMAGENES/Sergey Brin.jpg b/IMAGENES/Sergey Brin.jpg
diff --git a/IMAGENES/Steve Ballmer.jpg b/IMAGENES/Steve Ballmer.jpg
diff --git a/IMAGENES/Zhong Shanshan.jpg b/IMAGENES/Zhong Shanshan.jpg
diff --git a/IMAGENES/charles koch.jpg b/IMAGENES/charles koch.jpg
diff --git a/IMAGENES/elon-musk.jpg b/IMAGENES/elon-musk.jpg
diff --git a/IMAGENES/francoise-bettencourt-meyers.jpg b/IMAGENES/francoise-bettencourt-meyers.jpg
diff --git a/IMAGENES/jack Ma.jpg b/IMAGENES/jack Ma.jpg
diff --git a/IMAGENES/jeff-bezos.jpg b/IMAGENES/jeff-bezos.jpg
diff --git a/IMAGENES/lakshmi-mittal.jpg b/IMAGENES/lakshmi-mittal.jpg
diff --git a/IMAGENES/larry ellison.jpg b/IMAGENES/larry ellison.jpg
diff --git a/IMAGENES/warren buffett.jpg b/IMAGENES/warren buffett.jpg
diff --git a/Prompt.png b/Prompt.png
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
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,83 @@
-// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
+// Función para filtrar los datos por continente
+export const filterByContinent = (data, continent) => {
+  if (continent === 'Todos') {
+    return data; // No aplicar ningún filtro si se selecciona 'Todos'
+  } else {
+    return data.filter(item => item.extraInfo.continent === continent);
+  }
+};
+
+// Función para ordenar los datos por fortuna (mayor a menor o menor a mayor) o por nombre
+export const sortBy = (data, sortOrder) => {
+  if (sortOrder === 'fortune-asc' || sortOrder === 'fortune-desc') {
+    return data.sort((a, b) => {
+      const fortuneA = parseFortune(a.facts.fortune);
+      const fortuneB = parseFortune(b.facts.fortune);
+      return sortOrder === 'fortune-asc' ? fortuneA - fortuneB : fortuneB - fortuneA;
+    });
+  } else if (sortOrder === 'asc' || sortOrder === 'desc') {
+    return data.sort((a, b) => {
+      const nameA = a.name.toUpperCase();
+      const nameB = b.name.toUpperCase();
+      return sortOrder === 'asc' ? nameA.localeCompare(nameB) : nameB.localeCompare(nameA);
+    });
+  }
+};
+// export const sortBy = (data, sortOrder) => {
+//   return data.sort((a, b) => {
+//     const nameA = a.name.toUpperCase();
+//     const nameB = b.name.toUpperCase();
+//     return sortOrder === 'asc' ? nameA.localeCompare(nameB) : nameB.localeCompare(nameA);
+//   });
+// };
+
+// Función auxiliar para convertir la fortuna a un número
+const parseFortune = (fortuneString) => {
+  return parseFloat(fortuneString.replace(/[^\d.-]/g, ''));
+};
+
+// Función para calcular la suma total y el promedio de las fortunas
+export const calculateFortuneStats = (data) => {
+  const filteredFortunes = data.map(item => parseFortune(item.facts.fortune));
+  const totalFortune = filteredFortunes.reduce((total, fortune) => total + fortune, 0);
+<<<<<<< Updated upstream
+  const averageFortune = (totalFortune / filteredFortunes.length).toFixed(2);
+
+  return [ totalFortune, averageFortune ];
+=======
+  const averageFortune = totalFortune / filteredFortunes.length;
 
-export const example = () => {
-  return 'example';
+  //Formatear la suma total y el promedio
+  const formattedTotalFortune = formatFortune(totalFortune);
+  const formattedAverageFortune = formatFortune(averageFortune);
+
+  return { totalFortune: formattedTotalFortune, averageFortune: formattedAverageFortune };
+};
+
+// Función auxiliar para formatear la fortuna en el formato deseado
+const formatFortune = (fortune) => {
+  // Convertir la fortuna a cadena y agregar 'B' al final
+  return `$${fortune.toFixed(2)}B`;
 };
 
-export const anotherExample = () => {
-  return [];
+// Función auxiliar para convertir la fortuna a un número
+const parseFortune = (fortuneString) => {
+  // Verificar si la cadena de fortuna es nula, indefinida o no es una cadena
+  if (fortuneString === null || fortuneString === undefined || typeof fortuneString !== 'string') {
+    return 0; // Devolver 0 si la cadena de fortuna no es válida
+  }
+
+  // Eliminar caracteres no numéricos excepto "." y "-"
+  const sanitizedString = fortuneString.replace(/[^0-9.-]/g, '');
+
+  // Intentar convertir la cadena a un número de punto flotante
+  const parsedFortune = parseFloat(sanitizedString);
+
+  // Verificar si el resultado es NaN o infinito
+  if (isNaN(parsedFortune) || !isFinite(parsedFortune)) {
+    return 0; // Devolver 0 si el resultado no es un número finito
+  }
+
+  return parsedFortune; // Devolver la fortuna convertida si es válida
+>>>>>>> Stashed changes
 };
diff --git a/src/index.html b/src/index.html
@@ -2,10 +2,44 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <title>Dataverse</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
+    <header>
+      <h1>Personas mas ricas del mundo</h1>
+    </header>
+    <main id="root">
+      <h2></h2>
+      <section>
+        <label for="continent-filter">Filtrar por continente:</label>
+        <select name="continente" id="continent-filter" data-testid="select-filter" >
+          <option value="Todos">Todos</option>
+          <option value="Oceanía">Oceanía</option>
+          <option value="América">América</option>
+          <option value="Asia">Asia</option>
+          <option value="Africa">África</option>
+          <option value="Europa">Europa</option>
+          <option value="Antartida">Antártida</option>
+        </select>
+      <label for="sort-by">Ordenar por:</label>
+      <select name="name" id="sort-by" data-testid="select-sort">
+        <option value="asc">Nombre (A-Z)</option>
+        <option value="desc">Nombre (Z-A)</option>
+        <option value="fortune-asc">Fortuna (Ascendente)</option>
+        <option value="fortune-desc">Fortuna (Descendente)</option>
+      </select>
+      <button data-testid="button-clear" id="reset-button">Limpiar</button>
+      </section>
+      <div id="fortune-stats">
+        <p id="total-fortune">Suma total de fortunas:</p>
+        <p id="average-fortune">Promedio de fortunas:</p>
+      </div>
+    </main>
+    <footer>
+      <p>Nataly Molano y Sandra Morales</p>
+    </footer>
     <script src="main.js" type="module"></script>
   </body>
-</html>
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,95 @@
-import { example } from './dataFunctions.js';
+import data from './data/dataset.js';
+
 import { renderItems } from './view.js';
 
-import data from './data/dataset.js';
+// Importar funciones
+import { filterByContinent, sortBy, calculateFortuneStats } from './dataFunctions.js';
+
+// Referencias a elementos del DOM
+const continentFilterSelect = document.querySelector('#continent-filter');
+const sortBySelect = document.querySelector('#sort-by');
+const totalFortuneElement = document.querySelector('#total-fortune');
+const averageFortuneElement = document.querySelector('#average-fortune');
+const resetButton = document.querySelector('#reset-button');
+
+// Renderizar los elementos inicilmente
+<<<<<<< Updated upstream
+let richPeopleList = document.querySelector("main").appendChild(renderItems(sortBy(data, 'asc')));
+=======
+richPeopleList.appendChild(renderItems(data));
+
+// Manejador de evento para cambio en select
+continentFilterSelect.addEventListener('change', () => {
+  const continent = continentFilterSelect.value;
+  const filteredData = filterByContinent(data, continent);
+  richPeopleList.innerHTML = '';
+  richPeopleList.appendChild(renderItems(filteredData));
+  updateFortuneStats(filteredData);
+});
+
+// Manejador de evento para el botón de ordenar
+sortBySelect.addEventListener('change', () => {
+  const [field, order] = sortBySelect.value.split('-');
+  const sortedData = sortBy(filterByContinent(data,continentFilterSelect.value), field, order);
+  richPeopleList.innerHTML = '';
+  richPeopleList.appendChild(renderItems(sortedData));
+  updateTotalFortune(sortedData);
+});
+
+//Función para actualizar y mostrar la fortuna total
+const updateTotalFortune = (data) => {
+  const totalFortune = calculateTotalFortune(data); 
+  totalFortuneElement.textContent = `Fortuna total: ${formatFortune(totalFortune)}`;
+
+
+  /*const sortedData = sortBy(data, field, order);
+  richPeopleList.innerHTML = '';
+  richPeopleList.appendChild(renderItems(sortedData));*/
+};
+>>>>>>> Stashed changes
+
+// Función para actualizar y mostrar la fortuna total y el promedio
+const updateFortuneStats = (data) => {
+  const [formattedTotalFortune, formattedAverageFortune] = calculateFortuneStats(data)
+  totalFortuneElement.textContent = `Suma total de fortunas: $${formattedTotalFortune.toLocaleString('en')} B`;
+  averageFortuneElement.textContent = `Promedio de fortunas: $${isNaN(formattedAverageFortune) ? 0 : formattedAverageFortune} B`;
+};
+
+// Actualizar las estadísticas de fortuna inicialmente
+updateFortuneStats(data);
+
+// Manejador de evento para cambio en select para filtrar por continente
+continentFilterSelect.addEventListener('change', () => {
+  const continent = continentFilterSelect.value;
+  const filteredData = filterByContinent(data, continent);
+  sortBySelect.value = 'asc';
+  richPeopleList.remove();
+  richPeopleList = document.querySelector("main").appendChild(renderItems(filteredData));
+  updateFortuneStats(filteredData);
+});
+
+// Manejador de evento para cambio en select para ordenar
+// sortBySelect.addEventListener('change', () => {
+//   const [field, order] = sortBySelect.value.split('-');
+//   const sortedData = sortBy(filterByContinent(data,continentFilterSelect.value), field, order);
+//   richPeopleList.remove();
+//   richPeopleList = document.querySelector("main").appendChild(renderItems(sortedData));
+//   updateFortuneStats(sortedData);
+// });
+sortBySelect.addEventListener('change', () => {
+  const order = sortBySelect.value;
+  const sortedData = sortBy(filterByContinent(data,continentFilterSelect.value), order);
+  richPeopleList.remove();
+  richPeopleList = document.querySelector("main").appendChild(renderItems(sortedData));
+  updateFortuneStats(sortedData);
+});
 
-console.log(example, renderItems(data), data);
+//Función para boton limpiar
+resetButton.addEventListener('click', (event) => {
+  continentFilterSelect.value = 'Todos';
+  sortBySelect.value = 'asc';
+  richPeopleList.remove();
+  richPeopleList = document.querySelector("main").appendChild(renderItems(sortBy(data, 'asc')));
+  updateFortuneStats(data);
+  console.log('Evento', event.type); 
+});
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,160 @@
+:root {
+    --main-color: #FFAC46;
+    --orange: #C96C34;
+    --red: #922B21;
+}
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+body{
+    background-color: #333333;
+    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif; 
+    color: white;
+    min-height: 100vh;
+    position: relative;
+}
+header{
+    height: 200px;
+    padding-top: 64px;
+    text-align: center;
+    background-color: var(--main-color);
+    color: var(--red);
+}
+h1{
+    align-self: center;
+    font-size: 50px;
+}
+main {
+    text-align: center;
+}
+section {
+    padding: 28px;
+    width: 100%;
+    font-size: 28px;
+    display: flex;
+    justify-content: center;
+    border-bottom: 8px solid var(--main-color);
+}
+div{
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+div p {
+    font-size: 28px;
+}
+label {
+    margin-left: 24px;
+}
+select {
+    border-radius: 8px;
+    font-size: 28px;
+    margin-left: 24px;
+    outline: none;
+}
+select:focus{
+    border:4px solid var(--main-color);
+}
+select:hover{
+    box-shadow: 3px 3px var(--main-color);   
+}
+button{
+    width: 150px;
+    border-radius: 8px;
+    margin-left: 24px;
+    font-size: 28px;
+    box-shadow: 5px 5px;
+}
+button:hover {
+    background-color: var(--main-color);
+}
+ul{
+    padding: 24px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+.card { 
+    width: 380px;
+    height: 550px;  
+    margin: 12px;
+    padding: 0 12px 0 12px;
+    border-radius: 8px ;
+    background-color: var(--main-color);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    list-style: none; 
+    flex-grow: 1;
+    color: var(--red);
+}
+li p:nth-child(2){
+    font-size: 32px;
+}
+li p:nth-child(4), p:nth-child(5) {
+    margin-top: 12px;
+}
+img {
+    width: 300px;
+    height: 300px;
+    margin: 24px;
+    border-radius: 100%;
+}
+footer{
+    width: 100%;
+    height: 32px;
+    background-color:var(--red);
+    position: absolute;
+    bottom: 0;
+    text-align: center;
+}
+footer p {
+    padding: 8px;
+}
+@media (max-width: 1000px) {
+    header {
+        height: 250px;
+        padding: 24px;
+    }
+    body{
+        width: 100%;
+    }
+    section {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+    }
+    label {
+        margin-top: 24px;
+    }
+    button {
+        margin-top: 28px;
+    }
+}
+
+@media (max-width: 400px) {
+    .card { 
+        width: 220px;
+        height: px;  
+        margin: 8px;
+        padding: 0 8px 0 8px;
+        border-radius: 8px ;
+        background-color: var(--main-color);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        list-style: none; 
+        color: var(--red);
+    }
+    img {
+        width: 200px;
+        height: 200px;
+        margin: 24px;
+        border-radius: 100%;
+    }
+
+}