Laboratoria · EdithOrt · Feb 28, 2020 · Feb 28, 2020 · Mar 2, 2020 · Mar 2, 2020
diff --git a/README.md b/README.md
diff --git a/imgReadme/DiagramadeFlujo.JPG b/imgReadme/DiagramadeFlujo.JPG
diff --git a/imgReadme/Thumbs.db b/imgReadme/Thumbs.db
diff --git a/imgReadme/Wireframe-Pokemon.jpg b/imgReadme/Wireframe-Pokemon.jpg
diff --git a/imgReadme/demo.png b/imgReadme/demo.png
diff --git a/imgReadme/desktop.png b/imgReadme/desktop.png
diff --git a/imgReadme/sketchPantallaEmergente.JPG b/imgReadme/sketchPantallaEmergente.JPG
diff --git a/imgReadme/sketchPantallaPrincipal.JPG b/imgReadme/sketchPantallaPrincipal.JPG
diff --git a/imgReadme/sketchPantallaRanking.JPG b/imgReadme/sketchPantallaRanking.JPG
diff --git a/imgReadme/tablet.png b/imgReadme/tablet.png
diff --git a/src/b.id) b/src/b.id)
diff --git a/src/data.js b/src/data.js
@@ -1,13 +1,24 @@
-// import data from './data/injuries/injuries.js';
-// import data from './data/lol/lol.js';
-// import data from './data/patient/patient.js';
-// import data from './data/pokemon/pokemon.js';
-// import data from './data/rickandmorty/rickandmorty.js';
-// import data from './data/steam/steam.js';
-// import data from './data/steam/worldbank.js';
-
-// esta es una función de ejemplo
-
-export const example = () => {
-  return 'example';
-};
+import data from './data/pokemon/pokemon.js';
+//Mostrar la data
+export const dataPokemon= data.pokemon;
+//Filtracion 
+function onChange(e){
+  let value = e.target.value
+  let nuevaListaFiltrada = data.pokemon.filter(p=>p.type.includes(value))
+}
+//console.log(nuevaListaFiltrada)
+
+//Orden por numero de Pokedex
+export let numberPokedex= 
+data.pokemon.sort((a, b)=>{
+  if(a.id< b.id){
+    return -1;
+  }
+  if (a.id> b.id){
+    return 1;
+  }
+});
+//console.log(numberPokedex)
+
+
+
diff --git a/src/images/background.png b/src/images/background.png
diff --git a/src/images/bienvenida.png b/src/images/bienvenida.png
diff --git a/src/images/youdex.png b/src/images/youdex.png
diff --git a/src/index.html b/src/index.html
@@ -2,13 +2,53 @@
 <html lang="es">
   <head>
     <meta charset="UTF-8">
-    <title>Data Lovers</title>
+    <title>YouDex</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <div id="root"></div>
+    <div class="container">
+      <header>
+        <img class="logo" src="images/youdex.png">
+          <nav>
+            ORDENAR POR:
+            <li><a href="#">NÚMERO DE POKÉDEX</a></li>
+            <li class="dropdown">
+
+                <select class="dropdown-content">
+                  <option id="grass">grass</option>
+                  <option id= "poison">poison</option>
+                  <option id= "fire">fire</option>
+                  <option id = "fairy">fairy</option>
+                  <option id= "water">water</option>
+                  <option id = "bug">bug</option>
+                  <option id = "normal">normal</option>
+                  <option id = "electric">electric</option>
+                  <option id = "ground">ground</option>
+                  <option id = "fighting">fighting</option>
+                  <option id = "psychic">psychic</option>
+                  <option id = "rock">rock</option>
+                  <option id = "ice">ice</option>
+                  <option id = "ghost">ghost</option>
+                  <option id = "dragon">dragon</option>
+                </select>
+
+          </nav>
+      </header>
+  <main>
+        <div class="dinamic" id="boxImages">
+        </div>
+        <section id="modalPokemon" class="modalPokemon">
+          <span class= "close" id= "close">&times;</span>
+          <div id="contentInfo"></div>
+        </section>
+  </main>
+      <footer>
+        Hola soy el footer
+      </footer>
+    </div>
+   <!-- <div id="root"></div> -->
     <script type="module" src="main.js"></script>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,4 +1,59 @@
-import { example } from './data.js';
+import {dataPokemon} from './data.js';
+import pokemon from './data/pokemon/pokemon.js';
 
-console.log(example);
+console.log();
+//Nodos 
+let closeModal = document.querySelectorAll(".close");
 
+//Mostrar imagenes pantalla principal
+const images = dataPokemon.forEach((item) => {
+     let image= item.img;
+     let label= document.createElement('img');
+     label.id= ("a"+item.type)
+     let btn= document.createElement('button');
+     btn.className+= ("btn-Images")
+     btn.id+= item.id
+     btn.appendChild(label);
+     label.src= image;
+     let node= btn;
+     document.getElementById("boxImages").appendChild(node);
+  });
+//Modal Información Pokemon   
+
+     let btnImg = document.querySelectorAll('.btn-Images');
+     let Imgs = document.querySelector('#a')
+      btnImg.forEach(poke =>{ 
+        let a = poke.id -1;
+
+            const showData = () => {
+
+             document.getElementById("modalPokemon").style.display="block";
+             let container= document.getElementById("contentInfo");
+             document.createElement('div');
+             container.innerHTML=`
+             <h3 class="num"> ${dataPokemon[a].num}</h3>
+             <h4 class= "name"> ${dataPokemon[a].name}</h4>
+             <div class= "img-contain"> <img class="img poke" src='${dataPokemon[a].img}' /> </div>
+             <p class="type"> Tipo: ${dataPokemon[a].type} </p>
+             <p class="weigth"> Peso: ${dataPokemon[a].weight}  Altura: ${dataPokemon[a].height} </p>
+             <p class="candy"> Dulces: ${dataPokemon[a].candy_count} ${dataPokemon[a].candy}</p>
+             <p class="egg"> Tipo de huevo: ${dataPokemon[a].egg}</p>
+             <p class="average spawn"> Frecuencia de aparición: ${dataPokemon[a].avg_spawns}</p>`
+            }
+         poke.addEventListener('click',showData)          
+        });                  
+     closeModal.forEach(closeModalPoke=>{
+      closeModalPoke.addEventListener('click',function(){
+          document.getElementById("modalPokemon").style.display = 'none';})
+        }); 
+
+ //Filtración 
+      let options= document.querySelector(".dropdown-content");
+      options.addEventListener('click',onChange)
+
+       function onChange(e){
+        let value = e.target.value
+        let nuevaListaFiltrada = dataPokemon.filter(p=>p.type.includes(value))
+         console.log(nuevaListaFiltrada)
+   };
+
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,240 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background: linear-gradient(to right,#FF6950, #FF3050);
+    font-family: 'Open Sans';
+}
+
+.logo {
+    height: 77.98px;
+    width: 90px;
+}
+
+.container {
+    background: linear-gradient(to right,#FF6950, #FF3050);
+    width: 100%;
+    max-width: 1500vw;
+    height: 150vh;
+    /* background: #ffffff; */
+    margin: auto;
+/*Flex*/
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+header{
+    width: 100%;
+    padding: 20px;
+    height: 150px;
+/*Flex*/
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+header nav {
+    list-style-type: none;
+    width: 50%;
+/*Flex*/
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+header nav a {
+    border: 1px solid #ffffff;
+    margin-left: 30px;
+    margin-right: 30px;
+    width: 200px; 
+    height: 55px;
+    border-radius: 30px;
+    text-align: center;
+    text-decoration: none;
+    padding: 10px;
+    display: block;
+    font-family: 'Open Sans';
+/*Flex*/
+    flex-grow: 1;
+}
+
+main {
+    /* background-color: yellowgreen; */
+    padding: 10px;
+/*Flex*/
+    flex: 1 1 100%;
+}
+
+main .dinamic {
+     margin-bottom: 20px;
+     padding-bottom: 20px;
+/*Flex*/
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 5px;
+}
+
+main section .bienvenida {
+    flex: 0 0 382px;
+}
+
+main div img {
+    height: 80px;
+    width: 80px;
+}
+
+li a, .dropbtn {
+    color: white;
+    text-align: center;
+/*    padding: 14px 16px; Desacomoda el desplegable a forma hotizontal*/
+    text-decoration: none;
+}
+
+li a:hover, dropdown:hover .dropbtn {
+    background-color: white;
+    color: #FF3050;
+}
+
+/*cajas contenedoras de texto para tipos de pokemon*/
+.dropdown-content {
+    /* display: none; */
+    min-width: 160px;
+    z-index: 1;
+    position: absolute; /*Hizo que el menú multinivel apareciera vertical*/
+}
+
+/*texto para tipos de pokemon*/
+.dropdown-content a {
+    background-color: #ffffff;
+    color:#FF3050;
+    border-radius: 0px;
+    text-decoration: none;
+    display: block; /*Hace de forma vertical el acomodo desplegable*/
+    text-align: center;
+}
+
+.dropdown-content a:hover {
+    color: #ffffff;
+    background-color:#FF6950;
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+footer {
+    width: 100%;
+    padding: 20px;
+    background: red;
+    display: flex;
+    flex-wrap: wrap;
+    color: white;
+    text-decoration: none;
+}
+
+img {
+    width: 160vw;
+    height: 160vh;   
+}
+
+@media screen and (max-width: 10vw) {
+    .container {
+        flex-direction: column;
+    }
+    header {
+        flex-direction: column;
+        padding: 0;
+    }
+    header img {
+     margin: 20px 0;   
+    }
+    header nav {
+      width: 100%;  
+    }
+}
+/* Modal Ranking */
+.modal-container{
+   display: none; 
+   position: fixed;
+   z-index: 1;
+   overflow: auto;
+   left: 20vw;
+   top: 20vh;
+   width: 60%;
+   height: 60%;
+   background: rgb(238, 235, 235);
+}
+.contenido-modal{
+   position: relative;
+   background-color: rgb(214, 210, 210);
+   margin: auto;
+   width: 30%;
+   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.4);
+}
+.close{
+   color: rgb(3, 3, 3);
+   font-size: 30px;
+   font-weight: bold;
+}
+.close:hover{
+   color: rgb(224, 30, 30);
+   text-decoration: none;
+   cursor: pointer;
+}
+/* Modal Información Pokemon */
+.modalPokemon{
+   display: none; 
+   position: fixed;
+   z-index: 1;
+   overflow: auto;
+   left: 20vw;
+   top: 20vh;
+   width: 20%;
+   height: 50%;
+   background: rgb(238, 235, 235);
+}
+.contenido-modal-pokemon{
+    position: relative;
+   background-color: rgb(214, 210, 210);
+   margin: auto;
+   width: 60%;
+   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.4);
+}
+.closePokemon{
+    color: rgb(3, 3, 3);
+    font-size: 30px;
+    font-weight: bold;
+ }
+ .closePokemon:hover{
+    color: rgb(224, 30, 30);
+    text-decoration: none;
+    cursor: pointer;
+ }
+
+.btn-Images{
+    background-color: transparent;
+    border: transparent;
+}
+
+/*
+.button {
+    display: block;
+    padding: 15px 20px;
+    background-color: transparent;
+    border: 1px solid #ffffff;
+    margin-left: 30px;
+    margin-right: 30px;
+    width: 200px; 
+    height: 55px;
+    border-radius: 30px;
+    font-family: 'Open Sans';
+    font-weight: bold;
+    color: white;
+}*/
diff --git a/src/{ b/src/{