Laboratoria · 1531nana · Jul 22, 2022 · Jul 22, 2022 · Jul 25, 2022 · Jul 26, 2022
diff --git a/README.md b/README.md
diff --git a/img.readme/historias_usuarios.png b/img.readme/historias_usuarios.png
diff --git a/img.readme/prototipo_altaf.png b/img.readme/prototipo_altaf.png
diff --git a/img.readme/prototipo_baja.png b/img.readme/prototipo_baja.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,73 @@
-// estas funciones son de ejemplo
+//función que itera sobre los datos image, name, species, gender, status
+export const showData = (element) => {
+  let listName = element["results"].map((total) => total.name);
+  let listImage = element["results"].map((total) => total.image);
+  let listSpecies = element["results"].map((total) => total.species);
+  let listGender = element["results"].map((total) => total.gender);
+  let listStatus = element["results"].map((total) => total.status);
 
-export const example = () => {
-  return 'example';
+  //función constructora, para crearle una propiedad a cada objeto
+  function createItem(name, image, species, gender, status) {
+    this.name = name;
+    this.image = image;
+    this.species = species;
+    this.gender = gender;
+    this.status = status;
+  }
+  //ciclo que añade cada valor a su determinada propiedad
+  let dataToOrder = [];
+  for (let i = 0; i < listImage.length; i++) {
+    let createObject = new createItem(
+      listName[i],
+      listImage[i],
+      listSpecies[i],
+      listGender[i],
+      listStatus[i]
+    );
+    dataToOrder.push(createObject);
+  }
+  return dataToOrder;
 };
 
-export const anotherExample = () => {
-  return 'OMG';
+//función que exporta los datos ordenados de la A-Z
+export const showOrder = (element) => {
+  const compareName = (a, b) => {
+    if (a.name.toLowerCase() < b.name.toLowerCase()) {
+      return -1;
+    }
+  };
+  return element.sort(compareName);
+};
+
+
+
+//función que filtra especies humanas
+export const filterHuman = (element) => {
+  return  element.filter((element) => element.species == "Human");
+};
+
+//función que filtra especies aliens
+export const filterAlien = (element) => {
+  return element.filter((element) => element.species == "Alien");
+};
+
+//función que muestra el cálculo
+export const showRandom = (element) => {
+  let gender1 = element.map((element) => element.gender);
+  let showMale = gender1.filter((element) => element === "Male");
+  let showFemale = gender1.filter((element) => element === "Female");
+  let showUndefined = gender1.filter((element) => element === "unknown");
+  let status1 = element.map((element) => element.status);
+  let showAlive = status1.filter((element) => element === "Alive");
+  let showDead = status1.filter((element) => element === "Dead");
+  let showUnknow = status1.filter((element) => element === "unknown");
+  let dataRandom = {
+    male: showMale.length,
+    female: showFemale.length,
+    genderUndefined: showUndefined.length,
+    alive: showAlive.length,
+    dead: showDead.length,
+    statusUndefined: showUnknow.length,
+  };
+  return dataRandom;
 };
diff --git a/src/index.html b/src/index.html
@@ -2,11 +2,56 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Data Lovers</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <div id="root"></div>
-    <script src="main.js" type="module"></script>
+    <header>
+      <img id="title-header" src="rick-nombre-2.jpg" alt="title">
+  </header>
+  <section id="page-init">
+    <div id="page-start">
+      <img id="img-start" src="https://www.tonica.la/__export/1589659313867/sites/debate/img/2020/05/16/rick-and-morty-portada.jpg_423682103.jpg" alt="Rick-y-Morty">
+      <div>
+        <p id="p-intro">Después de haber estado desaparecido durante casi 20 años, Rick Sánchez llega de imprevisto a la puerta de la casa de su hija Beth y se va a vivir con ella y su familia utilizando el garaje como su laboratorio personal.</p>
+        <button id="button-characteres">Ver personajes</button>
+        <button id="button-main-characteres">Personajes principales</button>
+
+      </div>
+
+    </div>
+  </section>
+  <section id="page-characteres">
+    <nav id="nav">
+      <ul id="bottons-navegation">
+        <li id="init"><a href="#">Inicio</a></li>
+        <li id="order-alphabetic"><a href="#">Ordenar alfabéticamente</a>
+          <ul id="unfold-alphabet">
+            <li id="order-a-z"><a href="#">Ordenar de A-Z</a></li>
+            <li id="order-z-a"><a href="#">Ordenar de Z-A</a></li>
+          </ul>
+        </li>
+        <li id="filter-species"><a href="#">Filtrar especies</a>
+        <ul id="unfold-species">
+          <li id="human"><a href="#">Humanas</a></li>
+          <li id="alien"><a href="#">Aliens</a></li>
+        </ul>
+      </li>
+        <li id="curious-fact"><a href="#">Dato Curioso</a></li>
+      </ul>
+    </nav>
+    <div class="container">
+      <div id="screen-all-characteres"></div>
+      <p id="descrption"></p>
+      <img class="control left" id="left" src="https://img1.freepng.es/20180604/rhr/kisspng-arrow-computer-icons-encapsulated-postscript-butto-back-icon-5b160a5f752a05.7625289415281711034799.jpg" alt="flecha izquierda">
+      <img class="control rigth" id="rigth" src="https://cdn-icons-png.flaticon.com/512/17/17437.png" alt="flecha derecha">
+    </div>
+  </section>
+  <section id="page-main-characteres">
+    <div id="screen-main-characteres"></div>
+    <p name="curious" id="curious-box"></p>
+  </section>
+  <script src="main.js" type="module"></script>
   </body>
-</html>
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,225 @@
-import { example } from './data.js';
-// import data from './data/lol/lol.js';
-import data from './data/pokemon/pokemon.js';
-// import data from './data/rickandmorty/rickandmorty.js';
+import {
+  showData,
+  showOrder,
+  filterHuman,
+  filterAlien,
+  showRandom,
+} from "./data.js";
+import data from "./data/rickandmorty/rickandmorty.js";
+let dataRyM = data;
+let showDatas = showData(dataRyM);
 
-console.log(example, data);
+// variables del DOM
+let btnInit = document.getElementById("init");
+let screenAllCharacteres = document.getElementById("screen-all-characteres");
+let btnCurious = document.getElementById("curious-fact");
+let boxCurious = document.getElementById("curious-box");
+let btnHuman = document.getElementById("human");
+let btnAlien = document.getElementById("alien");
+let btnMainCharacteres = document.getElementById("button-main-characteres");
+let pageStart = document.getElementById("page-start");
+let pageCharacteres = document.getElementById("page-characteres");
+let btnCharacteres = document.getElementById("button-characteres");
+let btnRigth = document.getElementById("rigth");
+let btnLeft = document.getElementById("left");
+let btnOrderAZ = document.getElementById("order-a-z");
+let btnOrderZA = document.getElementById("order-z-a");
+let screenMainCharacteres = document.getElementById("screen-main-characteres");
+
+//declaración de variables
+let showRandom1 = showRandom(showDatas);
+let positionStart = -15;
+let positionEnd = 0;
+let sizeData = showDatas.length;
+let acum = "";
+let addDiv;
+
+//Incializar estilos
+pageStart.style.display = "visible";
+pageCharacteres.style.display = "none";
+btnLeft.style.display = "none";
+boxCurious.style.display = "none";
+
+const styleScreenAllCharacteres = () => {
+  screenMainCharacteres.style.display = "none";
+  pageStart.style.display = "none";
+  pageCharacteres.style.display = "block";
+  screenAllCharacteres.style.display = "grid";
+}
+
+//función rigth() con forEach
+const rigth = () => {
+  styleScreenAllCharacteres();
+  boxCurious.style.display = "none";
+  positionStart += 15;
+  positionEnd += 15;
+  btnRigth.style.display = "block";
+  screenAllCharacteres.innerHTML = "";
+  if (positionStart >= 15) {
+    btnLeft.style.display = "block";
+  }
+  acum = "";
+  showDatas.forEach((element, index) => {
+    if (positionEnd >= sizeData) {
+      btnRigth.style.display = "none";
+      return;
+    } else if (index >= positionStart && index < positionEnd) {
+      addDiv = `
+           <div id=${"div" + index} >
+           <img src=${element.image} id=${"img" + index}>
+           <span id=${"name" + index}>${element.name}</span>
+           </div>
+           `;
+      acum += addDiv;
+      screenAllCharacteres.innerHTML = acum;
+    }
+  });
+};
+btnCharacteres.addEventListener("click", rigth);
+btnRigth.addEventListener("click", rigth);
+
+//función refactorizada
+let dataCopied = (datas) => {
+  return (
+    (showDatas = showData(dataRyM)),
+    (showDatas = datas(showDatas)),
+    (sizeData = showDatas.length),
+    (positionStart = -15),
+    (positionEnd = 0),
+    rigth()
+  );
+};
+
+const left = () => {
+  styleScreenAllCharacteres()
+  positionStart -= 15;
+  positionEnd -= 15;
+  btnRigth.style.display = "block";
+  if (positionStart < 0) {
+    positionStart = 0;
+    positionEnd = 15;
+    btnLeft.style.display = "none";
+    return;
+  } else if (positionStart >= 15) {
+    btnLeft.style.display = "block";
+  }
+  screenAllCharacteres.innerHTML = "";
+  acum = "";
+  showDatas.forEach((element, index) => {
+    if (index >= positionStart && index < positionEnd) {
+      addDiv = `
+              <div id=${"div" + index} >
+              <img src=${element.image} id=${"img" + index}>
+              <span id=${"name" + index}>${element.name}</span>
+               </div>
+              `;
+      acum += addDiv;
+      screenAllCharacteres.innerHTML = acum;
+    }
+  });
+};
+btnLeft.addEventListener("click", left);
+
+const styleScreen = () => {
+  screenMainCharacteres.style.display = "none";
+  screenAllCharacteres.style.display = "grid";
+  btnRigth.style.display = "block";
+}
+//función para volver a la página de inicio
+const home = () => {
+  screenMainCharacteres.style.display = "none";
+  pageCharacteres.style.display = "none";
+  pageStart.style.display = "grid";
+  boxCurious.style.display = "none";
+  positionStart = -15;
+  positionEnd = 0;
+  showDatas = showData(dataRyM);
+};
+btnInit.addEventListener("click", home);
+
+// función para el botón ordenar de la A-Z
+const selectOrder = () => {
+  styleScreen();
+  dataCopied(showOrder);
+};
+btnOrderAZ.addEventListener("click", selectOrder);
+
+// función para el botón ordenar de la Z-A
+const orderReverse = () => {
+  styleScreen();
+  showDatas = showData(dataRyM);
+  showDatas = showOrder(showDatas).reverse();
+  positionStart = -15;
+  positionEnd = 0;
+  rigth();
+};
+btnOrderZA.addEventListener("click", orderReverse);
+
+//función para filtrar por especies humanas
+const filtersHuman = () => {
+  styleScreen();
+  dataCopied(filterHuman);
+};
+btnHuman.addEventListener("click", filtersHuman);
+
+//función para filtrar por especies aliens
+const filtersAliens = () => {
+  styleScreen();
+  dataCopied(filterAlien);
+};
+btnAlien.addEventListener("click", filtersAliens);
+
+//función muestra los personajes principales
+let showMainCharacteres = () => {
+  boxCurious.style.display = "none";
+  pageStart.style.display = "none";
+  pageCharacteres.style.display = "block";
+  screenAllCharacteres.style.display = "none";
+  screenMainCharacteres.style.display = "visible";
+  btnRigth.style.display = "none";
+  btnLeft.style.display = "none";
+  screenMainCharacteres.innerHTML = "";
+  acum = "";
+  for (let i = 0; i < 5; i++) {
+    addDiv = `
+      <div id=${"divMain" + i} class=${"card"}>
+      <div id=front class=face>
+      <img src=${showDatas[i].image} id=${"imgMain" + i}>
+      <span id=${"nameMain" + i}>${showDatas[i].name}</span>
+      </div>
+      <div id=back class=face>
+      <span id=${"nameMain" + i}>Name: ${showDatas[i].name} <br> 
+      Specie: ${showDatas[i].species} <br>
+      Status: ${showDatas[i].status} <br> 
+      Gender: ${showDatas[i].gender} </span>
+      </div>
+      </div>  
+        `;
+    acum += addDiv;
+    screenMainCharacteres.innerHTML = acum;
+  }
+};
+btnMainCharacteres.addEventListener("click", showMainCharacteres);
+
+//arreglo, que almacena los mensajes aleatorios para el usuario (cálculo)
+let datosRan = [
+  " En la serie hay " + showRandom1.male + " personajes masculinos.",
+  " En la serie hay " + showRandom1.female + " personajes femeninos.",
+  " En la serie hay " + showRandom1.genderUndefined + " personajes de género indefinido.",
+  " En la serie hay " + showRandom1.alive + " personajes vivos.",
+  " En la serie hay " + showRandom1.dead + " personajes muertos.",
+  " En la serie hay " + showRandom1.statusUndefined + " personajes de estatus indefinidos",
+];
+
+//función que muestra en una textarea el mensaje aleatorio
+const datesRandom = () => {
+  screenMainCharacteres.style.display = "none";
+  pageStart.style.display = "none";
+  screenAllCharacteres.style.display = "none";
+  btnRigth.style.display = "none";
+  btnLeft.style.display = "none";
+  boxCurious.style.display = "block";
+  let aleatorie = datosRan[Math.floor(Math.random() * datosRan.length)];
+  boxCurious.textContent = aleatorie;
+};
+btnCurious.addEventListener("click", datesRandom);