Laboratoria · andrenavas · Mar 17, 2023 · Mar 17, 2023 · Mar 17, 2023 · Mar 17, 2023
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,42 @@
-// estas funciones son de ejemplo
+export const searchByName = (data,name) => {
+  return data.filter((characters) => {
+    return characters.name.toLowerCase().includes(name.toLowerCase());
+  })
+};
 
-export const example = () => {
-  return 'example';
+export const filterGeneral = (data,propiedad,option) => {
+  return data.filter((characters) => {
+    return characters[propiedad].includes(option);
+  })
 };
 
-export const anotherExample = () => {
-  return 'OMG';
+export const filterByGender = (data,gender) => {
+  return data.filter((characters) => {
+    return characters.gender.includes(gender);
+  })
 };
+
+
+export const filterByOrderAZ = (characters) => {
+  return characters.sort((a,b) => {
+    if (a.name < b.name) {
+      return -1;
+    } 
+  })
+};
+
+export const filterByOrderZA = (characters) => {
+  return characters.sort((a,b) => {
+    if (a.name > b.name) {
+      return -1;
+
+    }
+  })
+}
+
+export const calculate = (param,data) => {
+  const percentage = param.length / data.length * 100
+
+  return percentage.toFixed(2)
+}
+
diff --git a/src/images/characters.png b/src/images/characters.png
diff --git a/src/images/figma-hu1.jpg b/src/images/figma-hu1.jpg
diff --git a/src/images/figma-hu2.jpg b/src/images/figma-hu2.jpg
diff --git a/src/images/figma-hu3.jpg b/src/images/figma-hu3.jpg
diff --git a/src/images/figma-hu4.jpg b/src/images/figma-hu4.jpg
diff --git a/src/images/figma-hu5.jpg b/src/images/figma-hu5.jpg
diff --git a/src/images/filter.png b/src/images/filter.png
diff --git a/src/images/flip.png b/src/images/flip.png
diff --git a/src/images/fondo4.png b/src/images/fondo4.png
diff --git a/src/images/github.png b/src/images/github.png
diff --git a/src/images/home.png b/src/images/home.png
diff --git a/src/images/order.png b/src/images/order.png
diff --git a/src/images/prototipo-baja-hu1.jpg b/src/images/prototipo-baja-hu1.jpg
diff --git a/src/images/prototipo-baja-hu2.jpg b/src/images/prototipo-baja-hu2.jpg
diff --git a/src/images/prototipo-baja-hu3.jpg b/src/images/prototipo-baja-hu3.jpg
diff --git a/src/images/prototipo-baja-hu4.jpg b/src/images/prototipo-baja-hu4.jpg
diff --git a/src/images/prototipo-baja-hu5.jpg b/src/images/prototipo-baja-hu5.jpg
diff --git a/src/images/rickandmorty.webp b/src/images/rickandmorty.webp
diff --git a/src/images/rmlogo1.png b/src/images/rmlogo1.png
diff --git a/src/images/rym.png b/src/images/rym.png
diff --git a/src/images/search.png b/src/images/search.png
diff --git a/src/images/statistics.png b/src/images/statistics.png
diff --git a/src/images/test.jpg b/src/images/test.jpg
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,129 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <meta charset="utf-8">
-    <title>Data Lovers</title>
+    <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>Rick and Morty Lovers</title>
+    <link rel="shortcut icon" href="./images/rmlogo1.png"/>
     <link rel="stylesheet" href="style.css" />
   </head>
+
   <body>
-    <div id="root"></div>
-    <script src="main.js" type="module"></script>
+    <header class="header">
+
+      <div class="content-nav" >
+
+        <nav class="nav container">
+          <ul class="link" >
+            <li><a class="items" href="">Home</a></li>
+            <li id="showCharacters"><a class="items" href="">Characters</a></li> 
+            <li id="statistics"><a class="items" href="">Statistics</a></li> 
+          </ul>
+
+          <div class="content-inp-icon">
+            <input class="inp" id="search" type="search" placeholder="Search Characters">
+            <img  src="./images/search.png" class="icon" alt="search">
+          </div>
+        </nav>
+
+      </div>
+
+      <img src="./images/rym.png " alt="logoRickAndMorty" class="logo">
+
+      <div class="content-select-all container ">
+
+        <div class="group-select">
+          <label class="label" for="">Filter by</label>
+          <select name="filter" class="select" id="select-species">
+            <option disabled selected value="-SPECIES-">-SPECIES-</option>
+            <option value="Humanoid">Humanoid</option>
+            <option value="Robot">Robot</option>
+            <option value="Human">Human</option>
+            <option value="Alien">Alien</option>
+            <option value="Cronenberg">Cronenberg</option>
+            <option value="Disease">Disease</option>
+            <option value="Parasite">Parasite</option>
+            <option value="Mytholog">Mytholog</option>
+            <option value="Animal">Animal</option>
+          </select>
+        </div>
+
+        <div class="group-select">
+          <label class="label" for="">Filter by</label>
+          <select name="filter" class="select" id="select-gender">
+            <option disabled selected value="-GENDER-">-GENDER-</option>
+            <option value="Female">Female</option>
+            <option value="Male">Male</option>
+            <option value="unknown">unknown</option>
+            <option value="Genderless">Genderless</option>
+          </select>
+        </div>
+
+        <div class="group-select">
+          <label class="label" for="">Order by</label>
+          <select name="order" class="select" id="select-order">
+            <option disabled selected>-ALPHABET-</option>
+            <option value="Ascending">Ascending</option>
+            <option value="Descending">Descending</option>
+          </select>
+        </div>
+
+      </div>   
+
+    </header>
+
+    <main>    
+
+      <section class="content ">
+        <div class="container-cards" id="container-cards"></div> 
+      </section>
+
+      <section>
+        <div class="characters" id="characters"></div>
+      </section>
+
+      <section class="modal">
+
+        <div class="modal_container">
+          <h2 class="modal_title"> Character stats by gender </h2>
+
+          <div id="box-statistics">
+          </div>
+
+          <button type="button" class="modal_close">Close</button>
+        </div>
+
+      </section>
+
+    </main>
+
+    <footer class="footer">
+
+      <div class="content-footer container">
+
+        <div class="sofy">
+          <img src="./images/github.png" class="logoGitHub" alt="logoGitHub">
+          <span>
+            <a href="https://github.com/Sofiauldemia/" target="_blank" class="link-github"> Sofía Torres </a>
+          </span>    
+        </div>
+
+        <div class="andre">
+          <img src="./images/github.png" class="logoGitHub" alt="logoGitHub">
+          <span>
+            <a href="https://github.com/andrenavas/" target="_blank" class="link-github"> Andre Navas </a>
+          </span>
+        </div>
+
+      </div>
+
+    </footer>
+
+
+    <!--<div id="root"></div>-->
+    <script src="main.js" type="module"></script>  
+
   </body>
-</html>
+
+</html>