Laboratoria · eugynias · Nov 13, 2019 · Nov 13, 2019 · Nov 13, 2019 · Nov 13, 2019
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -4,9 +4,7 @@ module.exports = {
     es6: true,
     'jest/globals': true,
   },
-  extends: [
-    'airbnb-base',
-  ],
+
   globals: {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly',
@@ -28,4 +26,4 @@ module.exports = {
     'jest/prefer-to-have-length': 'warn',
     'jest/valid-expect': 'error',
   },
-};
+};
diff --git a/README.md b/README.md
diff --git a/src/data.js b/src/data.js
@@ -1,7 +1,44 @@
-/* Manejo de data */
 
-// esta es una función de ejemplo
+export  const filterType = (Pokemon) => {
+const type = Pokemon.filter((pkm) => {
+  //console.log(pkm.type)
+  return pkm.type[0] === 'Grass' || pkm.type[1] === 'Grass'
 
-export const example = () => {
-  return 'example';
+});
+console.log(type)
+return type;
+};
+
+export const ordenName = (Pokemon) => {
+ const ordenNam = Pokemon.sort((pk1,pk2) => {
+   if(pk1.name > pk2.name){
+     return 1;
+   }else if(pk1.name < pk2.name){
+     return -1;
+   }
+   return 0
+})
+//console.log(ordenNam, 'order')
+return ordenNam
+ //console.log(ordenNam)
+};
+
+export  const filterWater = (Pokemon) => {
+const type = Pokemon.filter((pkm) => {
+    return pkm.type[0] === 'Water' || pkm.type[1] === 'Water'
+
+
+});
+console.log(type)
+return type;
+};
+
+export  const filterRock = (Pokemon) => {
+const type = Pokemon.filter((pkm) => {
+    return pkm.type[0] === 'Rock' || pkm.type[1] === 'Rock'
+
+
+});
+console.log(type)
+return type;
 };
diff --git a/src/data/pokemon/pokemon.js b/src/data/pokemon/pokemon.js
@@ -1,4 +1,6 @@
+
 export default [{
+
   id: 1,
   num: '001',
   name: 'Bulbasaur',
@@ -4081,4 +4083,5 @@ export default [{
     'Ghost',
     'Dark',
   ],
+
 }];
diff --git a/src/images/2363559.png b/src/images/2363559.png
diff --git a/src/images/Capturap.PNG b/src/images/Capturap.PNG
diff --git a/src/images/IMG_20191202_080553878.jpg b/src/images/IMG_20191202_080553878.jpg
diff --git a/src/images/International_Pokémon_logo.svg.png b/src/images/International_Pokémon_logo.svg.png
diff --git a/src/images/figmapkm.png b/src/images/figmapkm.png
diff --git a/src/images/finalpk.jpg b/src/images/finalpk.jpg
diff --git a/src/images/pikagif.gif b/src/images/pikagif.gif
diff --git a/src/images/pkm-uni.jpg b/src/images/pkm-uni.jpg
diff --git a/src/images/pokebola.png b/src/images/pokebola.png
diff --git a/src/images/pokebola_debilidad.png b/src/images/pokebola_debilidad.png
diff --git a/src/images/pokebola_poder.jpg b/src/images/pokebola_poder.jpg
diff --git a/src/images/pokebola_poder.png b/src/images/pokebola_poder.png
diff --git a/src/images/pokebolagrass.png b/src/images/pokebolagrass.png
diff --git a/src/images/pokebolarock.png b/src/images/pokebolarock.png
diff --git a/src/images/pokebolawater.png b/src/images/pokebolawater.png
diff --git a/src/index.html b/src/index.html
@@ -6,9 +6,80 @@
     <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" />
+    <link href="https://fonts.googleapis.com/css?family=Heebo&display=swap" rel="stylesheet">
+
   </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="main.js"></script>
-  </body>
+  <!--  inicia body ,no mover arriba-->
+
+<body>
+
+  <!-- NO TOCAR-->
+ <script type="module" src="main.js"></script>
+ <div id="root">
+   <script src="./data/pokemon/pokemon.js" type="module"></script>
+    <script src="data.js" type="module"></script>
+    <script src="main.js" type="module"></script>
+
+  <!--  logo -->
+
+     <header id="logoPKM">
+      <img src="images/International_Pokémon_logo.svg.png">
+    </header>
+    <!--  gif -->
+ <marquee direction=right scrolldelay="5"><img src="images/pikagif.gif"></marquee>
+
+ <!--  botones -->
+<div id="pokebolas">
+  <!--  boton grass -->
+  <div class="tooltip">
+    <span class="tooltiptext">Presiona aqui y conoce la debilidad de los pokemones tipo Grass</span>
+    <div id="TyperGrass" class= "TyperG">
+<a id="button" ><img class= "grass" src="images/pokebolagrass.png"></a>
+            <div id="content1" class="contenedor1 ">
+
+              </div>
+           </div><!-- este div es donde se manda el map no borrar-->
+    </div>
+
+    <!--  boton water -->
+    <div class="tooltip2">
+      <span class="tooltiptext2">Presiona aqui y conoce la debilidad de los pokemones tipo Water</span>
+     <div id="TyperWater" class="TyperW">
+     <a id="buttonW" ><img class= "water" src="images/pokebolawater.png"></a>
+             <div id="content2" class="contenedor2 ">
+         </div>
+      </div>
+    </div>
+
+      <!--  boton rock -->
+      <div class="tooltip3">
+        <span class="tooltiptext3">Presiona aqui y conoce la debilidad de los pokemones tipo Rock</span>
+      <div id="TyperRock" class="TyperR">
+ <a id="buttonR" ><img class= "rock" src="images/pokebolarock.png"></a>
+        <div id="content3" class="contenedor3 ">
+           </div>
+        </div>
+    </div>
+  </div>
+
+    <!--  Pie de pagina -->
+
+<footer>
+<div class="contenedorf">
+  <h2><strong>Redes Sociales </strong></h2>
+
+  <a href="TU DIRECCION DE TWITTER" target="_blank" ><img src="http://2.bp.blogspot.com/-KVx3pHuLjTU/UwJJ-nmXAKI/AAAAAAAAL0A/xZOdy-WSGbE/s1600/twitter.png" /></a>
+
+  <a href="TU DIRECCION DE GOOGLE+" target="_blank"><img src="http://3.bp.blogspot.com/-PfEM3EjAsaY/UwJJwy7dKyI/AAAAAAAALz4/bSzCTvnPt70/s1600/googleplus.png" /></a>
+
+  <a href="TU DIRECCION DE FACEBOOK" target="_blank"><img src="http://3.bp.blogspot.com/-wlgJ5-sFi5Q/UwJKFJU3dsI/AAAAAAAAL0I/wMHiOkPcsMU/s1600/facebook.png" /></a>
+
+  <a href="TU DIRECCION DE FEED" target="_blank"><img src="http://3.bp.blogspot.com/-jjhKe8yf2RE/UwJKKmPrxaI/AAAAAAAAL0Q/iwRG2fkix08/s1600/feedrss.png" /></a>
+</div><!-- fin de class bar-->
+
+ </footer>
+
+
+
+</body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,15 +1,145 @@
-/**
- * import POKEMON from './data/pokemon/pokemon.js'
- * import LoL from './data/lol/lol.js'
- * import POTTER from './data/potter/potter.js'
- */
+import Pokemon from './data/pokemon/pokemon.js'
+console.log(Pokemon);
+import {filterType, ordenName} from './data.js'//filtro grass
+import {filterWater} from './data.js' //filtro water
+import {filterRock} from './data.js' //filtro Rock
 
-import { example } from './data.js';
 
-console.log(example);
+let poke= filterType(Pokemon);//filterType es nuestro filter y Pokemon es la data con la que trabaja
+ordenName(poke)//sort de grass
 
-/*
- * console.log(POKEMON);
- * console.log(LoL);
- * console.log(POTTER)
-*/
+
+let pokew= filterWater(Pokemon); //Variable filter water
+ordenName(pokew)//sort de agua
+
+let pokeR= filterRock(Pokemon);//filterRock
+ordenName(poke)//sort de rock
+
+
+//mostrando filtro Grass a HTML class con map
+poke.map((pkm)=>{
+const template = `<div class="card">
+<h1>${pkm.name}</h1>
+<img src="${pkm.img}"></img>
+<h3>Weaknesses:</h3>
+<p> ${pkm.weaknesses}</p>
+</div>`
+document.getElementById('content1').innerHTML += template
+}); //En content se muesta el template
+
+
+//boton grass
+var contentVisible = true;
+document.addEventListener("click", function(e) {
+    var clicked = e.target;
+    var content = document.getElementById("content1");
+  }, true);
+
+document.getElementById("button").addEventListener("click", function(e) {
+    var content = document.getElementById("content1");
+    var content2 = document.getElementById("content2");
+    var content3 = document.getElementById("content3");
+
+    e.preventDefault();
+
+   //e.stopPropagation();
+   if (contentVisible){
+       content.style.display = "flex";
+       contentVisible = false;
+       content2.style.display = "none";
+       content3.style.display = "none";
+   } else {
+       content.style.display = "none";
+       contentVisible = true;
+       content2.style.display = "none";
+       content3.style.display = "none";
+
+    }
+}, false);// fin boton grass
+
+
+//mostrando filtro Water a HTML class con map
+pokew.map((pkm)=>{
+const template1 = `<div class="card2">
+<h1>${pkm.name}</h1>
+<img src="${pkm.img}"></img>
+<h3>Weaknesses:</h3>
+<p>${pkm.weaknesses}</p>
+</div>`
+document.getElementById('content2').innerHTML += template1
+});
+
+
+//boton water
+var contentVisible = true;
+document.addEventListener("click", function(e) {
+    var clicked = e.target;
+    var content = document.getElementById("content2");
+  }, true);
+
+document.getElementById("buttonW").addEventListener("click", function(e) {
+    var content = document.getElementById("content2");
+    var content2 = document.getElementById("content1");
+    var content3 = document.getElementById("content3");
+
+    e.preventDefault();
+
+   //e.stopPropagation();
+   if (contentVisible){
+       content.style.display = "flex";
+       contentVisible = false;
+       content2.style.display = "none";
+       content3.style.display = "none";
+   } else {
+       content.style.display = "none";
+       contentVisible = true;
+       content2.style.display = "none";
+       content3.style.display = "none";
+
+    }
+}, false);// fin boton water
+
+//mostrando filtro Rock a HTML class con map
+pokeR.map((pkm)=>{
+const template2 = `<div class="card3">
+<h1>${pkm.name}</h1>
+<img src="${pkm.img}" ></img>
+<h3>Weaknesses:</h3>
+<div>${pkm.weaknesses}</div>
+</div>`
+document.getElementById('content3').innerHTML += template2
+}); //En content se muesta el template
+
+
+//boton rock
+
+var contentVisible = true;
+document.addEventListener("click", function(e) {
+    var clicked = e.target;
+    var content = document.getElementById("content3");
+  }, true);
+
+document.getElementById("buttonR").addEventListener("click", function(e) {
+    var content = document.getElementById("content3");
+    var content2 = document.getElementById("content1");
+    var content3 = document.getElementById("content2");
+
+
+    //e.preventDefault();
+   e.stopPropagation();
+    if (contentVisible){
+        content.style.display = "flex";
+        contentVisible = false;
+        content2.style.display = "none";
+        content3.style.display = "none";
+
+
+    } else {
+        content.style.display = "none";
+        contentVisible = true;
+        content2.style.display = "none";
+        content3.style.display = "none";
+
+
+    }
+}, false);// fin boton water