Laboratoria · AlexaFuenmayor · Jul 29, 2022 · Jul 29, 2022 · Aug 1, 2022 · Aug 1, 2022
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,8 @@
     "test": "jest --verbose --coverage",
     "open-coverage-report": "opener ./coverage/lcov-report/index.html",
     "start": "serve src/",
-    "deploy": "gh-pages -d src"
+    "deploy": "gh-pages -d src",
+    "lint": "eslint --fix --ext .js,.jsx ."
   },
   "dependencies": {
     "@babel/core": "^7.6.2",

diff --git a/src/IMAGENES/DESCK PAGE 1.png b/src/IMAGENES/DESCK PAGE 1.png
diff --git a/src/IMAGENES/DESCK PAGE 2.png b/src/IMAGENES/DESCK PAGE 2.png
diff --git a/src/IMAGENES/LOGO RIO1.png b/src/IMAGENES/LOGO RIO1.png
diff --git a/src/IMAGENES/LOGO2.jpg b/src/IMAGENES/LOGO2.jpg
diff --git a/src/IMAGENES/MOBILE PAGE 2.png b/src/IMAGENES/MOBILE PAGE 2.png
diff --git a/src/IMAGENES/MOBILE PAGE1.png b/src/IMAGENES/MOBILE PAGE1.png
diff --git a/src/IMAGENES/Minimalist Olympic Wallpaper - USA Olympics Wallpaper.jpg b/src/IMAGENES/Minimalist Olympic Wallpaper - USA Olympics Wallpaper.jpg
diff --git a/src/IMAGENES/flecha-derecha.png b/src/IMAGENES/flecha-derecha.png
diff --git a/src/IMAGENES/mascotas.png b/src/IMAGENES/mascotas.png
diff --git a/src/IMAGENES/sabiasque.png b/src/IMAGENES/sabiasque.png
diff --git a/src/IMAGENES/wallpaperflare 1.png b/src/IMAGENES/wallpaperflare 1.png
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,109 @@
-// estas funciones son de ejemplo
+const objetAthletes = {
+  filterData: function (data, tipofiltro, valor) {
+    //  console.log(valor);
 
-export const example = () => {
-  return 'example';
-};
+    let filtrado = [];
+
+    if (data.athletes) {
+      data.athletes.forEach((atleta) => {
+        if (atleta[tipofiltro] == valor) {
+          filtrado.push(atleta);
+        }
+      });
+    } else {
+      data.forEach((atleta) => {
+        if (atleta[tipofiltro] == valor) {
+          filtrado.push(atleta);
+        }
+      });
+    }
+
+    return filtrado;
+  },
+  orderData: function (data) {
+    const compare = (a, b) => {
+      if (a.name > b.name) {
+        return 1;
+      }
+      if (a.name < b.name) {
+        return -1;
+      }
+    };
+
+    return data.sort(compare);
+  },
+
+  calcularData: function (data) {
+    let elementos = [];
+
+    let jsonNew = {
+      name: "",
+      team: "",
+      sport: "",
+      Gold: "",
+      Silver: "",
+      Bronze: "",
+    };
+
+    let gold = 0;
+    let silver = 0;
+    let bronze = 0;
 
-export const anotherExample = () => {
-  return 'OMG';
+    for (let i = 0; i < data.length; i++) {
+      if (data[i].medal == "Gold") {
+        gold++;
+      } else if (data[i].medal == "Silver") {
+        silver++;
+      } else {
+        bronze++;
+      }
+      if (i + 1 !== data.length) {
+        console.log(data[i + 1].name, data[i]);
+        if (data[i + 1].name !== data[i].name) {
+          jsonNew = {
+            name: data[i].name,
+            sport: data[i].sport,
+            team: data[i].team,
+            Gold: gold,
+            Silver: silver,
+            Bronze: bronze,
+          };
+
+          elementos.push(jsonNew);
+
+          gold = 0;
+          silver = 0;
+          bronze = 0;
+        }
+      } else {
+        jsonNew = {
+          name: data[i].name,
+          sport: data[i].sport,
+          team: data[i].team,
+          Gold: gold,
+          Silver: silver,
+          Bronze: bronze,
+        };
+        elementos.push(jsonNew);
+      }
+    }
+    elementos.sort((a, b) => b.Gold - a.Gold);
+    elementos.sort((a, b) => b.Silver - a.Silver);
+    elementos.sort((a, b) => b.Bronze - a.Bronze);
+
+    console.log(elementos);
+    return elementos;
+  },
+
+  maxWinner: function (data) {
+    let resultado = this.calcularData(data);
+    return resultado[0].name;
+  },
+
+  porcentaje: function (total, variable) {
+    let porcentaje = Math.round((variable / total) * 100);
+    return porcentaje;
+  },
 };
+
+export { objetAthletes };
diff --git a/src/data/athletes/athletes.js b/src/data/athletes/athletes.js
@@ -17861,7 +17861,7 @@ export default {
       "medal": "Gold"
     },
     {
-      "name": "Yulimar del Valle Rojas Rodrguez",
+      "name": "Yulimar del Valle Rojas Rodriguez",
       "gender": "F",
       "height": "192",
       "weight": "72",

diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,78 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>Data Lovers</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script src="main.js" type="module"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8">
+  <title>INFO OLIMPIADAS</title>
+  <link rel="stylesheet" href="style.css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="https://fonts.googleapis.com/css2?family=Secular+One&display=swap" rel="stylesheet">
+</head>
+
+<body>
+  <section id="page1" class="page1">
+    <header>
+      <article id="imagenlogo"><img class="logoImagen" src="IMAGENES/LOGO RIO1.png" alt="logo olimpiadas 2016"></article>
+      <h1>INFO OLIMPIADAS</h1>
+      <button id="btn1" class="btn1">ABOUT ATHLETES</button>
+    </header>
+  </section>
+
+  <section id="page2" class="page2">
+    <header class="selectBusqueda" id="selectBusqueda">
+      <nav class="selectOptions">
+        <article class="busqueda" id="filterByMedal">
+          <input type="text" id="selectSearchByMedal" value="" placeholder="Search by medal">
+        </article>
+        <article class="busqueda" id="busquedaPorPais">
+          <select id="selectSearchByTeam">
+            <option value=""> -Search by team - </option>
+          </select>
+        </article>
+        <article class="busqueda" id="busquedaPorDeporte">
+          <select id="selectSearchBySport">
+            <option value=""> -Search by sport - </option>
+          </select>
+        </article>
+      </nav>
+      <aside class="buttonsAndMascotas">
+        <section class="imagenmascotas">
+          <img class="mascotaimg" src="IMAGENES/mascotas.png" alt="">
+        </section>
+        <section class="buttons">
+          <button id="btnBuscar" class="btnBuscar">Search</button>
+          <button class="btnLimpiar" type="" id="btnLimpiar">Refresh</button>
+        </section>
+      </aside>
+    </header>
+  </section>
+
+
+  <main class="container">
+    <article id="contenedorTarjetas" class="contenedorTarjetas">
+      <article class="titulo"><article class="encabezado" id="encabezado" ></article></article>
+      <aside class="buttonsOrderMaxwinner">
+        <select class="orderButton" id="selectOrder">
+          <option value="order"> -Order- </option>
+          <option value="a-z">a-z</option>
+          <option value="z-a">z-a</option>
+        </select>
+        <button id="maxWinner" class="maxWinner">Max Winners</button>
+        <section id="curiousSection" class="curiousSection">
+            <p  class="datocurioso" id="datocurioso"></p >
+          <img id="notacuriosaImg" class="notacuriosaImg" src="IMAGENES/sabiasque.png" alt="">
+        </section>
+      </aside>
+      <div id="cardsContainer" class="cardsContainer"></div>
+    </article>
+
+    <footer id="enlaceUp" class="enlaceUp"> <a href="#selectBusqueda"> <img src="IMAGENES/flecha-derecha.png" alt=""> </a>
+      <p>GO BACK UP</p>
+    </footer>
+  </main>
+
+
+  <script src="main.js" type="module"></script>
+</body>
+
+</html>