Laboratoria · lauraflorezt · Feb 4, 2023 · Feb 4, 2023 · Feb 4, 2023 · Feb 4, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,77 @@
-// estas funciones son de ejemplo
+// Filtro por especies
+export const filterData = (data, value) => {
+  const filterSpecies = data.filter(data => data.species === value);
+  //console.log(filterSpecies);
+  return filterSpecies;
+};
+
+//Para conocer todos los tipos de especies
+/*export const typeSpecies =  (data) => {
+  const kindSpecie = data.map(data=> data.species);
+  return kindSpecie;
+}*/
+
+//filtro por Estado
+export const filterStatus = (data, value) =>{
+  const kindStatus = data.filter(data => data.status === value);
+  return kindStatus;
+}
 
-export const example = () => {
-  return 'example';
+//Para conocer todos los tipos de Estado
+/*export const typeStatus =  (data) => {
+  const dataStatus = data.map(data=> data.status);
+  //console.log(typeStatus)
+  return dataStatus;
+}*/
+
+//filtro por episodios
+export const filterEpisode = (data, value) => {
+  const kindEpisode = data.filter(data => data.episode.includes(value));
+  //console.log(filterEpisode);
+  return kindEpisode;
 };
 
-export const anotherExample = () => {
-  return 'OMG';
+//Ordena de la A-Z
+export const sortDataAZ = (data) => {
+  data.sort((a, b) => {
+
+    if (a.name < b.name) {
+      return -1; //Intercambia
+    }
+    if (a.name > b.name) {
+      return 1; //Esta bien el orden
+    }
+    return 0; // no intercambiar, esta bien el orden 
+  });
+
+  return data;
+}
+
+
+
+//FUNCION CALCULO 
+
+/*export const compute = (data) => {
+  const personajesG = data.results
+  const gender = personajesG.filter(element => element.death)
+  return gender.length * 100 / 493
+}*/
+//Esta función se encarga de mostrar el TOP 10 por ubicación
+export const typelocation =  (data) => {
+  const datalocations = data.map(data=> data.location.name);
+
+  return datalocations;
+}
+
+export const obtenerTopDiezUbicacion = (todaslasUbicaciones) => {
+  return todaslasUbicaciones.sort(function (a, b) {
+    if (a.species > b.species) {
+      return 1;
+    }
+    if (a.species < b.species) {
+      return -1;
+    }
+    return 0;
+
+  }).slice(0, 5);
 };
diff --git a/src/data/rickandmorty/rickandmorty.json b/src/data/rickandmorty/rickandmorty.json
@@ -58,6 +58,7 @@
           "url": "https://rickandmortyapi.com/api/character/1",
           "created": "2017-11-04T18:48:46.250Z"
       },
+
       {
           "id": 2,
           "name": "Morty Smith",

diff --git a/src/imagenes/Fondo.jpg b/src/imagenes/Fondo.jpg
diff --git a/src/imagenes/Historias de usuario Figma.JPG b/src/imagenes/Historias de usuario Figma.JPG
diff --git a/src/imagenes/Prototipo Alta Fidelidad.JPG b/src/imagenes/Prototipo Alta Fidelidad.JPG
diff --git a/src/imagenes/Prototipo Baja Fidelidad.JPG b/src/imagenes/Prototipo Baja Fidelidad.JPG
diff --git a/src/imagenes/Prototipo baja Fidelidad Tarjeta.JPG b/src/imagenes/Prototipo baja Fidelidad Tarjeta.JPG
diff --git a/src/imagenes/Prototipo de Alta fidelidad Tarjeta.JPG b/src/imagenes/Prototipo de Alta fidelidad Tarjeta.JPG
diff --git a/src/imagenes/Rick_and_Morty.svg (1).png b/src/imagenes/Rick_and_Morty.svg (1).png
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,196 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Data Lovers</title>
     <link rel="stylesheet" href="style.css" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <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=Abel&display=swap"
+      rel="stylesheet"
+    />
   </head>
+
   <body>
-    <div id="root"></div>
+    <div class="container">
+      <div class="navbar">
+        <img
+          id="logo"
+          src="imagenes/Rick_and_Morty.svg (1).png"
+          alt="Logo Rick_and_Morty"
+        />
+
+        <ul>
+          <button id="recargar">Inicio</button>
+          <button id="orden">Ordenar A-Z</button>
+          <button id="TopDiezUbicacion">Top 10 de ubicación</button>
+        </ul>
+      </div>
+
+      <br />
+      <div class="filter-elements">
+        <h2 id="text-filtros">Filtros</h2>
+        <br />
+        <form>
+          <p>
+            <select id="episodes" class="select-css">
+              <option disabled selected value>Episodio...</option>
+              <option value="https://rickandmortyapi.com/api/episode/1">
+                Episodio 1
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/2">
+                Episodio 2
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/3">
+                Episodio 3
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/4">
+                Episodio 4
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/5">
+                Episodio 5
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/6">
+                Episodio 6
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/7">
+                Episodio 7
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/8">
+                Episodio 8
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/9">
+                Episodio 9
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/10">
+                Episodio 10
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/11">
+                Episodio 11
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/12">
+                Episodio 12
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/13">
+                Episodio 13
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/14">
+                Episodio 14
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/15">
+                Episodio 15
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/16">
+                Episodio 16
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/17">
+                Episodio 17
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/18">
+                Episodio 18
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/19">
+                Episodio 19
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/20">
+                Episodio 20
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/21">
+                Episodio 21
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/22">
+                Episodio 22
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/23">
+                Episodio 23
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/24">
+                Episodio 24
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/25">
+                Episodio 25
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/26">
+                Episodio 26
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/27">
+                Episodio 27
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/28">
+                Episodio 28
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/29">
+                Episodio 29
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/30">
+                Episodio 30
+              </option>
+              <option value="https://rickandmortyapi.com/api/episode/31">
+                Episodio 31
+              </option>
+            </select>
+          </p>
+        </form>
+
+        <br />
+
+        <form>
+          <p>
+            <select id="species" class="select-css">
+              <option disabled selected value>Especie...</option>
+              <option value="Human">Human</option>
+              <option value="Alien">Alien</option>
+              <option value="Humanoid">Humanoid</option>
+              <option value="Poopybutthole">Poopybutthole</option>
+              <option value="Mytholog">Mytholog</option>
+              <option value="unknown">Unknown</option>
+              <option value="Animal">Animal</option>
+              <option value="Disease">Disease</option>
+              <option value="Robot">Robot</option>
+              <option value="Cronenberg">Cronenberg</option>
+              <option value="Vampire">Vampire</option>
+              <option value="Parasite">Parasite</option>
+            </select>
+          </p>
+        </form>
+
+        <br>
+
+        <form>
+          <p>
+            <select id="status" class="select-css">
+              <option disabled selected value>Estado...</option>
+              <option value="Alive">Alive</option>
+              <option value="unknown">unknown</option>
+              <option value="Dead">Dead</option>
+            </select>
+          </p>
+        </form> 
+      </div>
+
+    <!--<div class="estadistica tabla">
+      <table class="principal">
+        <thead>
+          <tr>
+            <th>female</th> 
+            <th>male</th>
+            <th>genderless</th> 
+            <th>unknown</th> 
+          </tr>
+        </thead>
+
+        <tbody id="tableBody"></tbody>
+      </table>
+    </div>-->
+
+      <br />
+      <div id="prueba"></div>
+      <div id="root"></div>
+
+    </div>
+
     <script src="main.js" type="module"></script>
   </body>
 </html>