Laboratoria · MonicaTorresVite · Jun 28, 2019 · Jun 28, 2019 · Jul 2, 2019 · Jul 2, 2019
diff --git a/README.md b/README.md
diff --git a/presentacion-proyecto.md b/presentacion-proyecto.md
diff --git a/src/data.js b/src/data.js
@@ -1,8 +1,103 @@
-// esta es una función de ejemplo
-// puedes ver como agregamos la función a nuestro objeto global window
+const data = RICKANDMORTY.results;
+console.log(data);
+
+const allAlive = data.filter(element => element.status === "Alive");
+console.log(allAlive);
+
+const allDead = data.filter(element => element.status === "Dead");
+console.log(allDead);
+
+const allFemale = data.filter(element => element.gender === "Female");
+console.log(allFemale);
+
+const allMale = data.filter(element => element.gender === "Male");
+console.log(allMale);
+
+const ordenarData = () => {
+let newArray = data.forEach (element => element.name);
+console.log(newArray)}
+ordenarData();
+
+
+window.allAlive = allAlive;
+window.allDead = allDead;
+window.allMale = allMale;
+window.allFemale = allFemale;
+
+
+
+/*const filterName = () => {
+  let allRick = data.filter(element => element.name === "Rick Sanchez");
+  console.log(allRick);
+  return allRick;
+}
+filterName();*/
+
+/*const filterPersonajes = (data, filterValue) => {
+  let filterData = data.filter (element => element.status == filterValue);
+  console.log(filterData)
+  return filterPersonajes;
+}
+
+window.filterPersonajes = filtrarPersonajes;
+/*
+
+const filtrarPersonajes = (data) => {
+  let filterData = data.filter (element => element.status[0] == filterValue);
+  console.log(filterData)
+  printDataPersonajes(filterData);
+}
+
+const filtrarPersonajes = (data) => {
+  let filterData = data.filter (element => element.status.includes(filterValue));
+}
+
+window.filtrarPersonajes = filtrarPersonajes;
+--
+
+selectType.addEventListener('change', () => {
+  const selectUser = selectType.value
+  const pokeTierra = data.filter(tierra => tierra.type.includes(selectUser));
+
+  const pokeTierra = data.filter(tierra => tierra.type[0] == selectUser);
+
+  console.log(pokeTierra);
+  printPokemons(pokeTierra)
+ })*/
+
+
+/*const newArray = data.filter( element => console.log(element.key[0])) (regresa cada uno de los elementos del array, con el key invocado)
+
+const pokemonEgg = newArray.filter(pokemonEgg => console.log(havegg))*/
+
+
+/*let filterData2 = () => {
+    let filterResult = "";
+    let filterValue = buttonFilter.value;
+    let filterResult = window.filterPersonajes(data,filterValue);
+    printDataPersonajes(filterResult);
+    console.log(filterData2);*/
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-const example = () => {
-  return 'example';
-};
 
-window.example = example;
diff --git a/src/data/rickandmorty/rickandmorty.js b/src/data/rickandmorty/rickandmorty.js
@@ -1,4 +1,4 @@
-const RICKANDMORTY = {
+window.RICKANDMORTY = {
   "info": {
     "count": 493,
     "pages": 25,

diff --git a/src/images/background-stars.jpeg b/src/images/background-stars.jpeg
diff --git a/src/images/banner1.png b/src/images/banner1.png
diff --git a/src/images/banner2.png b/src/images/banner2.png
diff --git a/src/images/giphy (1).gif b/src/images/giphy (1).gif
diff --git a/src/images/giphy (2).gif b/src/images/giphy (2).gif
diff --git a/src/images/giphy(3).gif b/src/images/giphy(3).gif
diff --git a/src/images/giphy(4).gif b/src/images/giphy(4).gif
diff --git a/src/images/giphy(5).gif b/src/images/giphy(5).gif
diff --git a/src/images/giphy.gif b/src/images/giphy.gif
diff --git a/src/images/morty(2).gif b/src/images/morty(2).gif
diff --git a/src/images/morty.gif b/src/images/morty.gif
diff --git a/src/images/plumbus.png b/src/images/plumbus.png
diff --git a/src/images/portal png 1(3).gif b/src/images/portal png 1(3).gif
diff --git a/src/images/portal png 1(6).gif b/src/images/portal png 1(6).gif
diff --git a/src/images/portal png 1.gif b/src/images/portal png 1.gif
diff --git a/src/images/r&m-banner.jpg b/src/images/r&m-banner.jpg
diff --git a/src/images/rick-morty-watch-giphy(2).gif b/src/images/rick-morty-watch-giphy(2).gif
diff --git a/src/images/rick-morty-watch-giphy.gif b/src/images/rick-morty-watch-giphy.gif
diff --git a/src/images/rick-spinning.giphy(2).gif b/src/images/rick-spinning.giphy(2).gif
diff --git a/src/images/rick-spinning.giphy.gif b/src/images/rick-spinning.giphy.gif
diff --git a/src/images/spacechip.png b/src/images/spacechip.png
diff --git a/src/images/yell.giphy.gif b/src/images/yell.giphy.gif
diff --git a/src/index.html b/src/index.html
@@ -1,18 +1,105 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <title>Data Lovers</title>
-    <link rel="stylesheet" href="style.css" />
+    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+      <title>Rick and Morty Lovers</title>
+      <link rel="stylesheet" href="style.css" />
   </head>
-  <body>
-    <div id="root"></div>
-    <!-- <script src="./data/injuries/injuries.js"></script> -->
-    <!-- <script src="./data/pokemon/pokemon.js"></script> -->
-    <!-- <script src="./data/steam/steam.js"></script> -->
-    <!-- <script src="./data/worldbank/worldbank.js"></script> -->
-    <!-- <script src="./data/lol/lol.js"></script> -->
+  <body> 
+    <main class="container" id="container">
+      <header class="row">
+        <figure>
+          <a href="">
+            <img src="images/banner1.png" alt="Rick and Morty Lovers">
+          </a>
+        </figure>
+      </header>
+
+    <!--PANTALLA DE BIENVENIDA-->
+    <section id="pantalla-bienvenida" class="row">
+        <!--<div id="button-inicio" class="gif-button col-6"><input type="image" alt="Inicio" src="images/portal png 1(6).gif" :hover></div>-->
+        <div id="button-personajes" class="gif-button col-6"><input type="image" alt="Personajes" src="images/rick-spinning.giphy(2).gif" :hover><div class="nombre-secciones">Personajes</div></div>
+        <div id="button-planetas" class="gif-button col-6"><input type="image" alt="Planetas" src="images/yell.giphy.gif" :hover><div class="nombre-secciones">Planetas y dimensiones</div></div>
+        <div id="button-explorar" class="gif-button col-6"><input type="image" alt="Explorar" src="images/rick-morty-watch-giphy(2).gif" :hover><div class="nombre-secciones">Explorar</div></div>
+        <div id="button-ayuda" class="gif-button col-6"><input type="image"  alt="Explorar" src="images/morty(2).gif" :hover><div class="nombre-secciones">Ayuda</div></div>
+    </section>
+
+     <!--PANTALLA DE PERSONAJES-->
+    <section id="pantalla-personajes" class="row disappear">
+      <article>
+        <div class="section-header">
+          <h1>Personajes</h1>
+        </div>
+      </article>
+      <div class="card-display">
+        <div id="card-display"></div>
+      </div>
+      <div class="row" id="filter-personajes">
+        <select class="col-2" id="input-filter-personajes">
+          <option value="filter">Filtrar</option>
+          <option value="all">Todos</option>
+          <option value="allAlive">Vivos</option>
+          <option value="allDead">Muertos</option>
+          <option value="allMale">Masculinos</option>
+          <option value="allFemale">Femeninos</option>
+        </select>
+      </div>
+      <!--<div class="row" id="ordenar-personajes">
+        <select class="col-2" name="ordenar" id="input-ordenar-personajes">
+          <option value="a-z">A-Z</option>
+          <option value="z-a">Z-A</option>
+        </select>
+      </div>-->
+    </section>
+
+     <!--PANTALLA DE PLANETAS-->
+    <section id="pantalla-planetas" class="row disappear">
+      <article class="header">
+        <h1>Planetas y dimensiones</h1>
+      </article>
+    </section>
+
+     <!--PANTALLA DE EXPLORAR-->
+    <section id="pantalla-explorar" class="row disappear">
+      <article class="row">
+        <h2 class="col-12">Explorar</h2>
+      </article>
+      <article class="col-12 event-videos">
+        <figure class="event-imageContainer">
+          <iframe width='560' height='315' src='https://www.adultswim.com/player/embed/AWq749adCorLtcgflqdN' frameborder='0' allowfullscreen>
+          </iframe>
+        </figure>
+        <div class="event-videos">
+          <h3 class="event-videos-título">Rick ann Morty Temporada 4</h3>
+            <p class="event-videos-descrip"> La cuarta temporada de Rick and Morty llega en Noviembre de 2019!
+              Mientras tanto vuelve a ver tus episodios favoritos.
+            </p>
+        </div>
+      </article>
+    </section>
+
+     <!--PANTALLA DE AYUDA-->
+    <section id="pantalla-ayuda" class="row disappear">
+     <article class="header">
+       <h1>Sobre Rick and Morty Lovers</h1>
+      </article>
+    </section>
+
+     <!--BOTÓN REINICIO-->
+    <div id="button-reinicio">
+      <div>
+        <input id="portal" type="image" alt="Inicio" :hover src="images/portal png 1(3).gif">
+      </div>
+    </div>
+
+    <footer id="footer" class="row">
+      <h3>Rick and Morty Lovers - 2019</h3>
+    </footer>
+
+    <script src="./data/rickandmorty/rickandmorty.js"></script>
     <script src="data.js"></script>
     <script src="main.js"></script>
+
+    </main>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,120 @@
+const buttonReinicio = document.getElementById("button-reinicio");
+const buttonPersonajes = document.getElementById("button-personajes");
+const buttonPlanetas = document.getElementById("button-planetas");
+const buttonExplorar = document.getElementById("button-explorar");
+const buttonAyuda = document.getElementById("button-ayuda");
+const buttonFilter = document.getElementById("input-filter-personajes");
+const screenBienvenida = document.getElementById("pantalla-bienvenida");
+const screenPersonajes = document.getElementById("pantalla-personajes");
+const screenPlanetas = document.getElementById("pantalla-planetas");
+const screenExplorar = document.getElementById("pantalla-explorar");
+const screenAyuda = document.getElementById("pantalla-ayuda");
+//const buttonInicio = document.getElementById("button-inicio");
+
+const pantallaBienvenida = () => {
+    screenBienvenida.classList.remove("disappear");
+    screenPersonajes.classList.add("disappear");
+    screenPlanetas.classList.add("disappear");
+    screenExplorar.classList.add("disappear");
+    screenAyuda.classList.add("disappear");
+    buttonReinicio.classList.remove("disappear");
+    buttonFilter.classList.add("disappear");
+}
+
+const pantallaPersonajes = () => {
+    screenBienvenida.classList.add("disappear");
+    screenPersonajes.classList.remove("disappear");
+    screenPlanetas.classList.add("disappear");
+    screenExplorar.classList.add("disappear");
+    screenAyuda.classList.add("disappear");
+    buttonReinicio.classList.remove("disappear");
+    buttonFilter.classList.remove("disappear");
+}
+
+let printDataPersonajes = (data) => {
+    let str = "";
+    data.forEach(element => {
+      str += `<div id="cards">
+        <div class="col-10">
+            <div class="row">
+                <img class="imagen-personaje" src=${element.image}>
+            </div>
+            <div class="row data-personajes">
+                    <h3 class="nombre-personaje">${element.name}</h3>
+                    <p>Especie: ${element.species}</p>
+                    <p>Género: ${element.gender}</p>
+                    <p>Origen: ${element.origin.name}</p>
+                    <p>Estatus: ${element.status}</p>
+            </div>
+        </div>
+    </div>`
+    });
+    document.getElementById("card-display").innerHTML = str;
+    }
+    printDataPersonajes(data);
+
+let filterData1 = () => {
+    let filterResult = "";
+    let filterValue = buttonFilter.value;
+    console.log(filterValue);
+    if (filterValue === "allAlive") {
+        let filterResult = window.allAlive;
+        printDataPersonajes(filterResult);
+        console.log(filterResult);
+    } else if (filterValue === "allDead") {
+        let filterResult = window.allDead;
+        printDataPersonajes(filterResult);
+        console.log(filterResult);
+    } else if (filterValue === "allMale") {
+        let filterResult = window.allMale;
+        printDataPersonajes(filterResult);
+        console.log(filterResult);
+    } else if (filterValue === "allFemale") {
+        let filterResult = window.allFemale;
+        printDataPersonajes(filterResult);
+        console.log(filterResult);
+    } else if (filterValue === "all") {
+        let filterResult = printDataPersonajes();
+        printDataPersonajes(filterResult);
+    }
+    console.log(filterResult);
+    return filterResult;
+}
+
+const pantallaPlanetas = () => {
+    screenBienvenida.classList.add("disappear");
+    screenPersonajes.classList.add("disappear");
+    screenPlanetas.classList.remove("disappear");
+    screenExplorar.classList.add("disappear");
+    screenAyuda.classList.add("disappear");
+    buttonReinicio.classList.remove("disappear");
+    buttonFilter.classList.add("disappear");
+}
+
+const pantallaExplorar = () => {
+    screenBienvenida.classList.add("disappear");
+    screenPersonajes.classList.add("disappear");
+    screenPlanetas.classList.add("disappear");
+    screenExplorar.classList.remove("disappear");
+    screenAyuda.classList.add("disappear");
+    buttonReinicio.classList.remove("disappear");
+    buttonFilter.classList.add("disappear");
+}
+
+const pantallaAyuda = () => {
+    screenBienvenida.classList.add("disappear");
+    screenPersonajes.classList.add("disappear");
+    screenPlanetas.classList.add("disappear");
+    screenExplorar.classList.add("disappear");
+    screenAyuda.classList.remove("disappear");
+    buttonReinicio.classList.remove("disappear");
+    buttonFilter.classList.add("disappear");
+}
+
+//buttonInicio.addEventListener("click", pantallaBienvenida);
+buttonReinicio.addEventListener("click", pantallaBienvenida);
+buttonPersonajes.addEventListener("click", pantallaPersonajes);
+buttonPlanetas.addEventListener("click", pantallaPlanetas);
+buttonExplorar.addEventListener("click", pantallaExplorar);
+buttonAyuda.addEventListener("click", pantallaAyuda);
+buttonFilter.addEventListener("change", filterData1);