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/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,47 @@
-// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
 
-export const example = () => {
-  return 'example';
+// 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);
+  }
 };
 
-export const anotherExample = () => {
-  return [];
+// Función para ordenar los datos por fortuna (mayor a menor o menor a mayor) o por nombre
+export const sortBy = (data, field, sortOrder) => {
+  if (field === 'fortune') {
+    return data.sort((a, b) => {
+      const fortuneA = parseFortune(a.facts.fortune);
+      const fortuneB = parseFortune(b.facts.fortune);
+      return sortOrder === 'asc' ? fortuneA - fortuneB : fortuneB - fortuneA;
+    });
+  } else if (field === 'name') {
+    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 para calcular la fortuna total de los datos
+export const calculateTotalFortune = (data) => {
+  return data.reduce((total, item) => {
+    return total + parseFortune(item.facts.fortune);
+  }, 0); // Agrega el valor inicial de total como 0
+};
+
+// 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);
+  const averageFortune = totalFortune / filteredFortunes.length;
+  return { totalFortune, averageFortune };
+};
+
+
+// Función auxiliar para convertir la fortuna a un número
+const parseFortune = (fortuneString) => {
+  return parseFloat(fortuneString.replace(/[^\d.-]/g, ''));
 };
diff --git a/src/index.html b/src/index.html
@@ -2,10 +2,45 @@
 <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>
+      <h2></h2>
+      <section>
+        <label for="continente">Filtrar por continente:</label>
+        <select name="continente" id="continent-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="sort-by" id="sort-by">
+        <option value="name-asc">Nombre (A-Z)</option>
+        <option value="name-desc">Nombre (Z-A)</option>
+        <option value="fortune-asc">Fortuna (Ascendente)</option>
+        <option value="fortune-desc">Fortuna (Descendente)</option>
+      </select>
+      <button id="reset-button">Limpiar</button>
+      <div id="fortune-stats">
+        <p id="total-fortune">Suma total de fortunas:</p>
+        <p id="average-fortune">Promedio de fortunas:</p>
+      </div>
+      </section>
+      <ul id="rich-people-list"></ul>
+    </main>
+    <footer>
+      <p>Creadoras.</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,53 @@
-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';
+
+// import { filterByContinent, sortBy, calculateTotalFortune } from './dataFunctions.js';
+
+const richPeopleList = document.getElementById('rich-people-list');
+const totalFortuneElement = document.getElementById('total-fortune');
+const averageFortuneElement = document.getElementById('average-fortune');
+
+//Renderizar los elementos inicialmente
+richPeopleList.appendChild(renderItems(data));
+
+// Referencias a elementos del DOM
+const continentFilterSelect = document.getElementById('continent-filter');
+const sortBySelect = document.getElementById('sort-by');
+//const richPeopleList = document.getElementById('rich-people-list');
+
+// Manejador de evento para cambio en select
+continentFilterSelect.addEventListener('change', () => {
+  const continent = continentFilterSelect.value;
+  const filteredData = filterByContinent(data, continent);
+  const sortedData = sortBy(filteredData, 'fortune', 'asc');
+  richPeopleList.innerHTML = '';
+  richPeopleList.appendChild(renderItems(sortedData));
+  updateFortuneStats(sortedData);
+});
+
+// Manejador de evento para el botón de ordenar
+sortBySelect.addEventListener('change', () => {
+  const [field, order] = sortBySelect.value.split('-');
+  const sortedData = sortBy(data, field, order);
+  richPeopleList.innerHTML = '';
+  richPeopleList.appendChild(renderItems(sortedData));
+});
+
+// Función para actualizar y mostrar la fortuna total y el promedio
+const updateFortuneStats = (data) => {
+  const { totalFortune, averageFortune } = calculateFortuneStats(data);
+  totalFortuneElement.textContent = `Suma total de fortunas: ${formatFortune(totalFortune)}`;
+  averageFortuneElement.textContent = `Promedio de fortunas: ${formatFortune(averageFortune)}`;
+};
+
+// Función para formatear la fortuna
+const formatFortune = (fortune) => {
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(fortune);
+};
 
-console.log(example, renderItems(data), data);
+// Actualizar las estadísticas de fortuna inicialmente
+updateFortuneStats(data);
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,69 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+body{
+    background-color: #333333;
+    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
+    color: white;
+    min-height: 100vh;
+    position: relative;
+}
+header{
+    display: inline;
+    text-align: center;
+}
+h1{
+    margin: 24px;
+    align-self: center;
+    font-size: 50px;
+}
+main {
+    text-align: center;
+}
+section {
+    font-size: 28px;
+}
+select {
+    font-size: 32px;
+}
+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: #FFAC46;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    list-style: none; 
+    flex-grow: 1;
+    color: #922B21;
+}
+
+p:nth-child(2){
+    font-size: 32px;
+}
+p:nth-child(4), p:nth-child(5) {
+    margin-top: 12px;
+}
+img {
+    width: 300px;
+    height: 300px;
+    margin: 24px;
+    border-radius: 100%;
+}
+footer{
+    width: 100%;
+    background-color: #922B21;
+    position: absolute;
+    bottom: 0;
+}
diff --git a/src/view.js b/src/view.js
@@ -1,6 +1,52 @@
-export const renderItems = (data) => {
-  console.log(data)
-  // Aquí comienza tu código y puedes retornar lo que tu necesites
-  return 'example';
-};
+// Definición de la función renderItems corregida
+export const renderItems = (dataArray) => {
+  // Verificar si dataArray es un array
+  if (!Array.isArray(dataArray)) {
+    console.error("Data debe ser un array.");
+    return; 
+  }
 
+  // Crear un nuevo ul
+  const newUl = document.createElement("ul");
+  // Iterar sobre cada elemento en el array
+  dataArray.forEach(element => {
+    // Crear un nuevo li para cada elemento
+    const newLi = document.createElement("li");
+    newLi.classList.add("card");
+    newUl.appendChild(newLi);
+
+
+    // Crear y configurar la imagen
+    const nodoImg = document.createElement("img");
+    nodoImg.src = element.imageUrl;
+    newLi.appendChild(nodoImg);
+
+    // Crear y configurar el párrafo con el nombre
+    const newPName = document.createElement("p");
+
+    newPName.textContent = `Nombre: ${element.name}`
+    newLi.appendChild(newPName);
+    //newPName.innerHTML = element.name;
+
+    const newPContinent = document.createElement("p");
+    //newPContinent.textContent = `Continente: ${element.extraInfo.continent}`
+    newLi.appendChild(newPContinent);
+    newPContinent.innerHTML = element.extraInfo.continent;
+
+    const newPFortune = document.createElement("p");
+    //newPFortune.textContent = `Fortuna: ${element.facts.fortune}`
+    newLi.appendChild(newPFortune);
+    newPFortune.innerHTML = element.facts.fortune;
+
+    const newPshortDescription = document.createElement("p");
+    //newPFortune.textContent = `Fortuna: ${element.facts.fortune}`
+    newLi.appendChild(newPshortDescription);
+    newPshortDescription.innerHTML = element.shortDescription;
+
+    //newP.innerHTML = element.name + element.extraInfo.continent;
+
+  });
+
+  return newUl;
+
+};