Laboratoria · Cindyflower23 · May 26, 2023 · May 26, 2023 · May 26, 2023 · May 26, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/222-2227129_pokemon-pokedex-hd-png-download.png b/src/222-2227129_pokemon-pokedex-hd-png-download.png
diff --git a/src/68747470733a2f2f692e696d6775722e636f6d2f415975745a4f462e706e67.png b/src/68747470733a2f2f692e696d6775722e636f6d2f415975745a4f462e706e67.png
diff --git a/src/Daco_5394286.png b/src/Daco_5394286.png
diff --git a/src/Pokemon-Ash-PNG-HD.png b/src/Pokemon-Ash-PNG-HD.png
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,41 @@
-// estas funciones son de ejemplo
+// // estas funciones son de ejemplo
 
-export const example = () => {
-  return 'example';
-};
+// export const example = () => {
+//   return 'example';
+// };
 
-export const anotherExample = () => {
-  return 'OMG';
-};
+// export const anotherExample = () => {
+//   return 'OMG';
+// };
+
+export const filterDataByType= (data, condition) =>{
+  const pokemonesFiltrados= data.filter((pokemon) => pokemon.type.includes(condition));
+  console.log(pokemonesFiltrados)
+  return pokemonesFiltrados;
+  }
+
+ export const sortData=(data,sortOrder) => {
+  const ordenarAsc=data.sort((a,b) => { 
+  let name1= a.name.toLowerCase()
+  let name2= b.name.tolowerCase()
+    if (sortOrder=== "asc") {
+
+      if(name1<name2){
+
+        return -1;
+        }
+    }
+
+    if (sortOrder=== "desc") {
+
+       if(name1>name2){
+
+    return -1 ;
+
+    }
+  }
+   return 0;
+  })
+ }
+
+ console.log(data.sort((a,b)))
diff --git a/src/index.html b/src/index.html
@@ -6,7 +6,40 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <div id="root"></div>
+    <div class="contenedor" id="contenedor">
+
+      <div class="buscador" id="buscador">
+        <img src="Daco_5394286.png" class="im2">
+        <img src="Pokemon-Ash-PNG-HD.png" class="im1" >
+
+        <li class="nav-item"><button class="btn btn-header" id="ver-todos">Ver todos</button></li> 
+        <li class="nav-item"><button class="btn btn-header normal" id="normal">Normal</button></li>
+        <li class="nav-item"><button class="btn btn-header fire" id="fire">Fire</button></li>
+        <li class="nav-item"><button class="btn btn-header water" id="water">Water</button></li>
+        <li class="nav-item"><button class="btn btn-header grass" id="grass">Grass</button></li>
+        <li class="nav-item"><button class="btn btn-header electric" id="electric">Electric</button></li>
+        <li class="nav-item"><button class="btn btn-header ice" id="ice">Ice</button></li>
+        <li class="nav-item"><button class="btn btn-header fighting" id="fighting">Fighting</button></li>
+        <li class="nav-item"><button class="btn btn-header poison" id="poison">Poison</button></li>
+        <li class="nav-item"><button class="btn btn-header ground" id="ground">Ground</button></li>
+        <li class="nav-item"><button class="btn btn-header flying" id="flying">Flying</button></li>
+        <li class="nav-item"><button class="btn btn-header psychic" id="psychic">Psychic</button></li>
+        <li class="nav-item"><button class="btn btn-header bug" id="bug">Bug</button></li>
+        <li class="nav-item"><button class="btn btn-header rock" id="rock">Rock</button></li>
+        <li class="nav-item"><button class="btn btn-header ghost" id="ghost">Ghost</button></li>
+        <li class="nav-item"><button class="btn btn-header dark" id="dark">Dark</button></li>
+        <li class="nav-item"><button class="btn btn-header dragon" id="dragon">Dragon</button></li>
+        <li class="nav-item"><button class="btn btn-header steel" id="steel">Steel</button></li>
+        <li class="nav-item"><button class="btn btn-header fairy" id="fairy">Fairy</button></li>
+        </ul>
+        </nav>
+
+      </div>
+      <div class="targets" id="targets"> 
+      </div> 
+    </div>
     <script src="main.js" type="module"></script>
+
+
   </body>
 </html>