Laboratoria · AdrianaRosas · Jun 25, 2019 · Jun 25, 2019 · Jun 26, 2019 · Jun 26, 2019
diff --git a/README-EXAMPLE b/README-EXAMPLE
diff --git a/README.md b/README.md
diff --git a/Thumbs.db b/Thumbs.db
diff --git a/iconos/fonts/iconos-web.eot b/iconos/fonts/iconos-web.eot
diff --git a/iconos/fonts/iconos-web.svg b/iconos/fonts/iconos-web.svg
diff --git a/iconos/fonts/iconos-web.ttf b/iconos/fonts/iconos-web.ttf
diff --git a/iconos/fonts/iconos-web.woff b/iconos/fonts/iconos-web.woff
diff --git a/iconos/style.css b/iconos/style.css
diff --git a/main.js b/main.js
@@ -0,0 +1,7 @@
+for(personajes in RICKANDMORTY.results){
+  console.log(RICKANDMORTY.results[personajes].origin.url);
+}
+
+//console.log(RICKANDMORTY.results[0].image);
+
+
diff --git a/rick-and-morty-folder-icon-43801.png b/rick-and-morty-folder-icon-43801.png
diff --git a/rick-and-morty-folder-icon-43803-Windows.ico b/rick-and-morty-folder-icon-43803-Windows.ico
diff --git a/rick-and-morty-folder-icon-43819-Windows.ico b/rick-and-morty-folder-icon-43819-Windows.ico
diff --git a/rick-and-morty-serie.jpg b/rick-and-morty-serie.jpg
diff --git a/rick-morty4-rewisor.png b/rick-morty4-rewisor.png
diff --git a/src/PM-icon-207.png b/src/PM-icon-207.png
diff --git a/src/Thumbs.db b/src/Thumbs.db
diff --git a/src/data.js b/src/data.js
@@ -1,8 +0,0 @@
-// esta es una función de ejemplo
-// puedes ver como agregamos la función a nuestro objeto global window
-
-const example = () => {
-  return 'example';
-};
-
-window.example = example;

diff --git a/src/fondo22.jpg b/src/fondo22.jpg
diff --git a/src/imagen5.jpg b/src/imagen5.jpg
diff --git a/src/imagenes/Hist-usuario (2).png b/src/imagenes/Hist-usuario (2).png
diff --git a/src/imagenes/Prototipo.png b/src/imagenes/Prototipo.png
diff --git a/src/imagenes/Thumbs.db b/src/imagenes/Thumbs.db
diff --git a/src/imagenes/Usuario.png b/src/imagenes/Usuario.png
diff --git a/src/imagenes/imagen1.png b/src/imagenes/imagen1.png
diff --git a/src/imagenes/imagen2.png b/src/imagenes/imagen2.png
diff --git a/src/imagenes/imagen3.png b/src/imagenes/imagen3.png
diff --git a/src/index.html b/src/index.html
@@ -2,17 +2,166 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Data Lovers</title>
+    <link rel="shortcut icon" href="PM-icon-207.png">
+    <link rel="shortcut icon" href="https://scontent-mia3-2.cdninstagram.com/vp/3f268ef7e4cbdf16b0b298535fb3a095/5D98AB2E/t51.2885-15/sh0.08/e35/s640x640/60896059_363526267614915_9022280140086626890_n.jpg?_nc_ht=scontent-mia3-2.cdninstagram.com"/>
+    <link href="https://fonts.googleapis.com/css?family=Amatic+SC|Dosis|Titillium+Web&display=swap" rel="stylesheet">
+    <title>Rick & Morty API Universe</title>
+
     <link rel="stylesheet" href="style.css" />
+
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css?family=Dosis:400,600&display=swap" rel="stylesheet">
+
+
+    <!-- <script src="./data/steam/steam.js"></script> -->
+    <script src="./data/rickandmorty/rickandmorty.js"></script>
   </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> -->
-    <script src="data.js"></script>
+
+    <!-- Icono ir abajo -->
+    <span class="icon-circle-down"></span>
+
+  <!-- redes sociales -->
+  <div class="wrapper">
+    <div class="title">
+      <p>Simple hover effect only use CSS3</p>
+    </div>
+    <div class="buttons">
+      <div class="button button-fb">
+        <i class="fa fa-facebook"></i>
+      </div>
+      <div class="button button-tw">
+        <i class="fa fa-twitter"></i>
+      </div>
+      <div class="button button-go">
+        <i class="fa fa-google-plus"></i>
+      </div>
+    </div>
+  </div>
+
+
+  <!-- presentación pagina -->
+      <section class="informacion">
+        <div class="Textear"></div>
+        <p>Rick es un brillante científico un tanto borracho que secuestra
+          <br> 
+          a su irritable nieto adolescente Morty para vivir aventuras en 
+          <br>
+          otros mundos y en dimensiones alternativas, te animas
+          <br>
+          a conocer mas sobre estos y otros personajes.</p> 
+        </div> 
+    </aside>
+
+          <!-- <div><a href="#" class="btn-empezar">Empezar</a></div> -->
+        </section> 
+
+        <!-- tabla -->
+        <table class="table">
+          <thead>
+              <th>TOP RANKING</th>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="tabla">Rick Sánchez</td>
+              <td>1</td>
+            </tr>
+            <tr>
+              <td class="tabla">Morty Smith</td>
+              <td>2</td>
+            </tr>
+            <tr>
+              <td class="tabla">Mr. Poopybutthole</td>
+              <td>3</td>
+            </tr>
+            <tr>
+              <td class="tabla">Evil Morty</td>
+              <td>4</td>
+            </tr>
+            <tr>
+              <td class="tabla">Squanchy</td>
+              <td>5</td>
+            </tr>
+          </tbody>
+
+          <tfoot>  
+          </tfoot>
+        </table>
+        <!-- boton abajo -->
+      <div class="abajo">
+        <a href="" id="down" class="button"><i class="far fa-arrow-alt-circle-down"></i></a>
+        <div class="slide">
+            <div id="facts">
+            </div>
+      </div>
+
+
+
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+
+<!-- sección video -->
+<section>
+  <h1>Avances de la nueva temporada</h1>
+  <h2>Noviembre 2019</h2>
+
+        <div id="video"  class="contenedor-video">
+            <video width= "1200px" height="1000px" class="fm-video video-js vjs-16-9  vjs-big-play-centered" data-setup="{}" controls preload="auto">
+                <source src="video/rick_y_morty_temp4.mp4" type="video/mp4">
+            </video>
+
+        </div>
+
+</section>
+<br>
+<br>
+<br>
+<br>
+<br>
+
+<section id="info" class="hide">
+  <div class=" info">
+    <div class= "ordenar-boton">
+      <select name="filter" id="filter"> 
+      <option value="filter">Filtrar</option>
+      <option value="nombre.name">Nombre</option>
+      <option value="species.species">Especies</option>
+      <option value="location.name">Dimensión</option>
+      <option value="origin.name">Origen</option>
+      </select>
+
+      <select id="choose-fruit-multiple" multiple>
+          <option value="1">Apple</option>
+          <option value="2">Orange</option>
+          <option value="3">Banana</option>
+          <option value="4">Guava</option>
+          <option value="5">Grapes</option>
+        </select>
+    </div>
+    </div>
+
+</select>
+</div>
+<br>
+<br>
+<br>
+<div id="contenedor">
+  <section class="data" id='data'>
+</div>
+</section>
+
     <script src="main.js"></script>
+    <script src="data.js"></script>
   </body>
 </html>
+
+
diff --git a/src/inicio.jpg b/src/inicio.jpg
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,86 @@
+
+
+
+for(personajes in RICKANDMORTY.results){ 
+  // console.log(RICKANDMORTY.results[personajes].image); 
+  //console.log(RICKANDMORTY.results[personajes].gender); 
+
+for(personajes in RICKANDMORTY.results){
+  // console.log(RICKANDMORTY.results[personajes].image);
+
+
+for(personajes in RICKANDMORTY.results){
+  // console.log(RICKANDMORTY.results[personajes].image); 
+  //console.log(RICKANDMORTY.results[personajes].gender);
+
+
+
+
+
+}
+const data = RICKANDMORTY.results;
+// const data RICKANDMORTY.results
+const paraPintar = document.getElementById ('data');
+
+//filtrar data
+
+const muestraData = () => {
+  let str = '';
+  data.forEach(element => {
+    str += `<div class="tarjeta">
+    <div class= "caras">
+    <div class="nombre">
+    <p> ${element.name}</p></div>
+    <br>
+    <div class="img"> 
+    <img src="${element.image}"></img>
+    </div>
+ <div class= "info">
+    <p> Status: ${element.status} </p>
+    <p> Especie: ${element.species} </p>
+    <p> tamaño: ${element.origin.name} </p>
+    <p> Origen: ${element.location.name}</p>
+    </div>
+    </div>
+    </div>`
+  });
+
+  paraPintar.innerHTML = str;
+
+}
+muestraData();
+
+
+//Filtrar
+const filtrarData = (prop, val) => {
+  let str = '';
+  data.forEach(element => {
+
+    //console.log(element[prop])
+
+    if(element[prop] == val) {
+      str += `<div class="tarjeta">
+          <div class="nombre">
+          <p> ${element.name}</p></div>
+          <br>
+          <div class="img"> 
+          <img src="${element.image}"></img>
+          </div>
+       <div class= "info">
+
+          <p> Status: ${element.status} </p>
+          <p> Especie: ${element.species} </p>
+          <p> tamaño: ${element.origin.name} </p>
+          <p> Origen: ${element.location.name}</p>
+          </div>
+          </div>`  
+    }
+
+
+  });
+
+
+  console.log(str);
+
+}
+filtrarData('status', 'Alive')