Laboratoria · Danilu-Farill · Jan 9, 2024 · Jan 9, 2024 · Jan 9, 2024 · Jan 9, 2024
diff --git a/README.md b/README.md
diff --git a/WikiNook.gif b/WikiNook.gif
diff --git a/chat1.png b/chat1.png
diff --git a/chat2.png b/chat2.png
diff --git a/fonts/EncodeSans_Condensed-Bold.ttf b/fonts/EncodeSans_Condensed-Bold.ttf
diff --git a/fonts/EncodeSans_Condensed-Light.ttf b/fonts/EncodeSans_Condensed-Light.ttf
diff --git a/fonts/EncodeSans_Condensed-Regular.ttf b/fonts/EncodeSans_Condensed-Regular.ttf
diff --git a/promptingImage.png b/promptingImage.png
diff --git a/prototipoAltaFidelidad.png b/prototipoAltaFidelidad.png
diff --git a/prototipoMediaFidelidad.png b/prototipoMediaFidelidad.png
diff --git a/src/data/dataset.js b/src/data/dataset.js
diff --git a/src/data/datasetGame.js b/src/data/datasetGame.js
diff --git a/src/data/villagers.js b/src/data/villagers.js
diff --git a/src/dataFunctions.js b/src/dataFunctions.js
@@ -1,9 +1,33 @@
-// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
+export const sortData = (data, sortBy, sortOrder) => {
+  data.sort((a, b) => {
+    const valueA = a[sortBy];
+    const valueB = b[sortBy];
+    const compare = valueA.localeCompare(valueB);
+    return sortOrder === "asc" ? compare : -compare; 
+  });
+  return data;
+};
 
-export const example = () => {
-  return 'example';
+export const filterData = (data, filterBy, value) => {
+  const array = data.filter((items => items[filterBy] === value));
+  return array;
 };
 
-export const anotherExample = () => {
-  return [];
+export const computeStats = (data) => {
+  const acumuladorMen = data.reduce((acumuladorMen, item) => {
+    if (item.gender === "Masculino") {
+      acumuladorMen++;
+    }
+    return acumuladorMen;
+  }, 0);
+
+  const acumuladorWomen = data.reduce((acumuladorWomen, item) => {
+    if (item.gender === "Femenino") {
+      acumuladorWomen++;
+    }
+    return acumuladorWomen;
+  }, 0);
+  const totalMen = parseFloat((acumuladorMen / data.length) * 100).toFixed(2);
+  const totalWomen = parseFloat((acumuladorWomen / data.length) * 100).toFixed(2);
+  return `Porcentaje personajes masculinos: ${totalMen}% \nPorcentaje personajes femeninos: ${totalWomen}%`;
 };
diff --git a/src/fonts/EncodeSans_Condensed-Bold.ttf b/src/fonts/EncodeSans_Condensed-Bold.ttf
diff --git a/src/fonts/EncodeSans_Condensed-Light.ttf b/src/fonts/EncodeSans_Condensed-Light.ttf
diff --git a/src/fonts/EncodeSans_Condensed-Regular.ttf b/src/fonts/EncodeSans_Condensed-Regular.ttf
diff --git a/src/images/Logo.png b/src/images/Logo.png
diff --git a/src/images/Pastel de cumple.png b/src/images/Pastel de cumple.png
diff --git a/src/images/User.png b/src/images/User.png
diff --git a/src/images/animal.jpg b/src/images/animal.jpg
diff --git a/src/images/bones.png b/src/images/bones.png
diff --git a/src/images/bree.webp b/src/images/bree.webp
diff --git a/src/images/cardAltanera.png b/src/images/cardAltanera.png
diff --git a/src/images/cardDeportista.png b/src/images/cardDeportista.png
diff --git a/src/images/cardDulce.png b/src/images/cardDulce.png
diff --git a/src/images/cardEsnob.png b/src/images/cardEsnob.png
diff --git a/src/images/cardGruñon.png b/src/images/cardGruñon.png
diff --git a/src/images/cardPerezoso.png b/src/images/cardPerezoso.png
diff --git a/src/images/cardVivaracha.png b/src/images/cardVivaracha.png
diff --git a/src/images/female.png b/src/images/female.png
diff --git a/src/images/fondo.jpg b/src/images/fondo.jpg
diff --git a/src/images/fondo.webp b/src/images/fondo.webp
diff --git a/src/images/island.png b/src/images/island.png
diff --git a/src/images/male.png b/src/images/male.png
diff --git a/src/images/nookipedia.png b/src/images/nookipedia.png
diff --git a/src/images/zodiacs/Acuario.png b/src/images/zodiacs/Acuario.png
diff --git a/src/images/zodiacs/Aries.png b/src/images/zodiacs/Aries.png
diff --git a/src/images/zodiacs/Cancer.png b/src/images/zodiacs/Cancer.png
diff --git a/src/images/zodiacs/Capricornio.png b/src/images/zodiacs/Capricornio.png
diff --git a/src/images/zodiacs/Escorpio.png b/src/images/zodiacs/Escorpio.png
diff --git a/src/images/zodiacs/Geminis.png b/src/images/zodiacs/Geminis.png
diff --git a/src/images/zodiacs/Leo.png b/src/images/zodiacs/Leo.png
diff --git a/src/images/zodiacs/Libra.png b/src/images/zodiacs/Libra.png
diff --git a/src/images/zodiacs/Picis.png b/src/images/zodiacs/Picis.png
diff --git a/src/images/zodiacs/Sagitario.png b/src/images/zodiacs/Sagitario.png
diff --git a/src/images/zodiacs/Tauro.png b/src/images/zodiacs/Tauro.png
diff --git a/src/images/zodiacs/Virgo.png b/src/images/zodiacs/Virgo.png
diff --git a/src/index.html b/src/index.html
@@ -1,11 +1,201 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <meta charset="utf-8">
-    <title>Data Lovers</title>
-    <link rel="stylesheet" href="style.css" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="shortcut icon" href="images/animal.jpg" type="image/x-icon"><!--con esto aparece un icono en la pestaña-->
+    <link rel="stylesheet" href="./style.css" />
+    <title>WikiNook</title>
   </head>
   <body>
-    <script src="main.js" type="module"></script>
+    <header>
+      <div class="header-title">
+        <img src="./images/Logo.png" alt="Logo" />
+        <h1>WikiNook</h1>
+      </div>
+      <div class="header-user">
+        <img src="./images/User.png" alt="User" />
+        Usuario
+      </div>
+    </header>
+    <main>
+      <aside>
+        <div data-testid="select-filterGender" name="gender">
+          <label for="filter"><h2>Genero</h2></label>
+          <ul>
+            <li>
+              <input type="radio" name="optionOne" id="genderMasculine" value="Masculino">
+              <label for="genderMasculine">Masculino</label> 
+            </li>
+            <li>
+              <input type="radio" name="optionOne" id="genderWomen" value="Femenino">
+              <label for="genderWomen">Femenino</label> 
+            </li>
+          </ul>
+        </div>
+        <hr/>
+        <div data-testid="select-filter" name="species">
+          <label for="filterForSpecies"><h2>Especie</h2></label>
+          <ul>
+            <li>
+              <input type="radio" name="optionTwo" id="specieTiger" value="Tigre">
+              <label for="specieTiger">Tigre</label> 
+            </li>
+            <li>
+              <input type="radio" name="optionTwo" id="specieDog" value="Perro">
+              <label for="specieDog">Perro</label> 
+            </li>
+            <li>
+              <input type="radio" name="optionTwo" id="specieSquirrel" value="Ardilla">
+              <label for="specieSquirrel">Ardilla</label> 
+            </li>
+            <li>
+              <input type="radio" name="optionTwo" id="specieChicken" value="Gallo">
+              <label for="specieChicken">Gallo</label> 
+            </li>
+            <li>
+              <input type="radio" name="optionTwo" id="specieMouse" value="Raton">
+              <label for="specieMouse">Ratón</label> 
+            </li>
+            <li>
+              <input type="radio" name="optionTwo" id="specieWolf" value="Lobo">
+              <label for="specieWolf">Lobo</label> 
+            </li>
+            <li>
+              <input type="radio" name="optionTwo" id="specieDeer" value="Ciervo">
+              <label for="specieDeer">Ciervo</label> 
+            </li>
+            <li>
+              <input type="radio" name="optionTwo" id="specieDuck" value="Pato">
+              <label for="specieDuck">Pato</label> 
+            </li>
+            <li>
+              <input type="radio" name="optionTwo" id="specieCat" value="Gato">
+              <label for="specieCat">Gato</label> 
+            </li>
+            <li>
+              <input type="radio" name="optionTwo" id="specieGoat" value="Cabra">
+              <label for="specieGoat">Cabra</label> 
+            </li>
+            <li>
+              <input type="radio" name="optionTwo" id="specieBear" value="Oso">
+              <label for="specieBear">Oso</label> 
+            </li>
+            <li>
+              <input type="radio" name="optionTwo" id="specieEagle" value="Águila">
+              <label for="specieEagle">Águila</label> 
+            </li>
+            <li>
+              <input type="radio" name="optionTwo" id="specieHorse" value="Caballo">
+              <label for="specieHorse">Caballo</label> 
+            </li>
+          </ul>
+        </div>   
+        <hr/>
+        <div data-testid="select-filterPersonality" name="personality">
+          <label for="filterForPersonality"><h2>Personalidad</h2></label>
+          <ul>
+            <li>
+              <input type="radio" name="optionThree" id="personalityJock" value="Deportista">
+              <label for="personalityJock">Deportista</label> 
+            </li>
+            <li>
+              <input type="radio" name="optionThree" id="personalityCranky" value="Gruñon">
+              <label for="personalityCranky">Gruñón</label> 
+            </li>
+            <li>
+              <input type="radio" name="optionThree" id="personalityLazy" value="Perezoso">
+              <label for="personalityLazy">Perezoso</label> 
+            </li>
+            <li>
+              <input type="radio" name="optionThree" id="personalitySmug" value="Esnob">
+              <label for="personalitySmug">Esnob</label> 
+            </li>
+            <li>
+              <input type="radio" name="optionThree" id="personalitySweet" value="Dulce">
+              <label for="personalitySweet">Dulce</label> 
+            </li>
+            <li>
+              <input type="radio" name="optionThree" id="personalityPeppy" value="Vivaracha">
+              <label for="personalityPeppy">Vivaracha</label> 
+            </li>
+            <li>
+              <input type="radio" name="optionThree" id="personalitySnooty" value="Altanera">
+              <label for="personalitySnooty">Altanera</label>
+                </li>
+              </ul>
+            </div>
+            <hr />
+            <div>
+              <button class="btn-clear" type="button" data-testid="button-clear">
+                Limpiar filtros
+              </button>
+            </div>
+          </aside>
+          <section>
+            <div class="container">
+              <div class="buscador">
+                <h2>Lista de vecinos</h2>
+                <div>
+                  <button class="btn-statics" id="openModal">
+                    <ion-icon name="stats-chart-outline"></ion-icon>
+                  </button>
+                </div>
+                <div>
+                  <label for="sort">Ordenar por:</label>
+                  <select name="sort" id="sort" data-testid="select-sort">
+                    <option value="all">Elige una opción</option>
+                    <option value="asc">Ordenar de la A-Z</option>
+                    <option value="desc">Ordenar de la Z-A</option>
+                  </select>
+                  <!-- este select esta oculto solo para que pase el test css -->
+                  <label for="sorthidden" hidden>Ordenar por:</label>
+                  <select name="sort" id="sorthidden" hidden></select>
+                  <input type="text" id="searchAnimal" placeholder="Buscar vecino"/>
+                  <button
+                    class="btn-clear-search"
+                    data-testid="button-clearName">
+                    Limpiar
+                  </button>
+                </div>
+              </div>
+              <div id="root"></div>
+              <div class="content-modal" id="modal">
+                <div class="modal-body">
+                  <div class="modal-header">
+                    <h1>Estadisticas</h1>
+                  </div>
+                  <div class="modal-main">
+                    <div id="centerModal">
+                      <div id="chart_div" style="padding-left: 100px"></div>
+                      <p id="page">texto</p>
+                    </div>
+                  </div>
+                  <div class="modal-footer">
+                    <button type="reset" id="close" class="btn-close">
+                      <ion-icon name="close-circle-outline"></ion-icon>
+                      Cerrar
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+        </main>
+    <!-- <footer></footer> -->
+    <footer>
+      <p>2024. All rights reserved</p>
+      <img src="./images/island.png" alt="island" width="100" />
+      <svg viewBox="0 -20 700 110" width="100%" height="110" preserveAspectRatio="none">
+        <path transform="translate(0, -20)" d="M0,10 c80,-22 240,0 350,18 c90,17 260,7.5 350,-20 v50 h-700" fill="#aaeaf0" />
+        <path d="M0,10 c80,-18 230,-12 350,7 c80,13 260,17 350,-5 v100 h-700z" fill="#86CFD5"/>
+      </svg>
+    </footer>
+    <script type="module" src="main.js"></script>
+    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
   </body>
-</html>
+</html>
+
+
diff --git a/src/info.html b/src/info.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon" href="images/animal.jpg" type="image/x-icon">
+    <link rel="stylesheet" href="styleInfo.css">
+    <title>DATAVERSE</title>
+</head>
+<body>
+    <header >
+        <h1>
+          Tarjetas Animal Crossing
+        </h1>
+      </header>
+
+      <article class="contentVisible" hidden="hidden" >
+      <h2>WIKINOOK</h2>
+        <p>Bienvenido a la wikinook, a continuación te explicaremos de que trata</p> 
+        <button type="button" id="continue">
+          <a href="#sectionOne">
+            <ion-icon name="caret-forward"></ion-icon>
+          </a>
+        </button>
+        <button type="button" id="following">
+          <a href="#sectionFour">SALTAR</a>
+        </button>
+    </article>
+
+      <article id="sectionOne" hidden="until-found" class="contentHidden">
+        <h2 >WIKINOOK</h2>
+        <p>Aquí podrás encontrar diferentes vecinos de Animal Crossing y conocerlos mucho mejor</p>
+        <button type="button">
+          <a href="#sectionTwo"> <ion-icon name="caret-forward"></ion-icon></a></button>
+      </article>
+
+      <article id="sectionTwo" hidden="until-found" class="contentHidden">
+        <p>Visualizarás a tus vecinos preferidos en tarjetas que guardan su información</p>
+        <figure><img src="https://areajugones.sport.es/wp-content/uploads/2020/09/cartas-amiibo-animal-crossing-2.jpg" alt="tajetas animal Crossing" ></figure>
+        <button type="button">
+          <a href="#sectionThree"><ion-icon name="caret-forward"></ion-icon></a>
+        </button>
+      </article>
+
+      <article id="sectionThree" hidden="until-found" class="contentHidden">
+        <div>
+          <p>Podrás filtrarlos por especie, personalidad y hasta signo zodiacal</p>
+          <br/>
+          <p class="page">PERSONALIDAD</p>    
+          <div>
+            <input type="radio" name="checkSweet" id="checkOne"> 
+            <label for="checkOne">Dulce</label>
+          </div>
+        <div>
+          <input type="radio" name="checkSnooty" id="checkTwo"> 
+          <label for="checkTwo">Altanera</label>
+        </div>
+        <div>
+          <input type="radio" name="checkCranky" id="checkThree">
+          <label for="checkThree">Gruñona</label> 
+        </div>
+        <div>
+          <input type="radio" name="checkJock" id="checkFour">
+          <label for="checkFour">Deportiva</label> 
+        </div>
+        <div>
+          <input type="radio" name="checkLazy" id="checkFive">
+          <label for="checkFive">Perezosa</label> 
+        </div>
+        <div>
+          <input type="radio" name="checkSmug" id="checkSix">
+          <label for="checkSix">Esnob</label> 
+        </div>
+      <p class="page">ESPECIES</p>
+        <div>
+          <input type="radio" name="checkDog" id="dog"> 
+          <label for="dog">Perro</label>
+        </div>
+        <div>
+          <input type="radio" name="checkCat" id="cat"> 
+          <label for="cat">Gato</label>
+        </div>
+        <div>
+          <input type="radio" name="checkChicken" id="chicken"> 
+          <label for="chicken">Pollo</label>
+        </div>
+        <div>
+          <input type="radio" name="checkSquirrel" id="squirrel"> 
+          <label for="squirrel">Ardilla</label>
+        </div>
+        <div>
+          <input type="radio" name="checkMouse" id="mouse"> 
+          <label for="mouse">Ratón</label>
+        </div>
+      </div>
+    <div>
+      <button type="button" class="next">
+          <a href="#sectionFour"><ion-icon name="caret-forward"></ion-icon></a>
+      </button>
+    </div>
+      </article>
+
+      <article id="sectionFour" hidden="until-found" class="contentHidden">
+        <h2>WIKINOOK</h2>
+        <p>¡Ahora si! ¿Puedes brindarnos tu nombre antes de comenzar? Te registraremos en un segundo...</p>
+        <input type="text" name="name" id="name" placeholder="Nombre">
+        <button type="button" class="infoAdditional"><a href="index.html"><ion-icon name="send"></ion-icon></a></button>
+      </article>
+
+      <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>    
+</body>
+</html>