Laboratoria · BrinaGarofalo · Mar 8, 2023 · Mar 8, 2023 · Mar 8, 2023 · Mar 8, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,38 @@
-// estas funciones son de ejemplo
-
-export const example = () => {
-  return 'example';
+export const filtro = {
+  porNombrePokemon: (listaPokemones, nombreBuscar) => {
+    const busca = nombreBuscar.toLowerCase();
+    const dataFiltrada = listaPokemones.filter((pokemon) => pokemon.name.startsWith(busca))
+    return  dataFiltrada;
+  },
+  elPrimeroPorNombre: (listaPokemones, nombreBuscar) => {
+    const busca = nombreBuscar.trim();
+    const dataFiltrada = listaPokemones.filter((pokemon) => pokemon.name === busca)
+    return  dataFiltrada[0];
+  } 
 };
 
 export const anotherExample = () => {
   return 'OMG';
 };
+
+export const cartillas = (data) => {
+  let cartillaString = "";
+  for (const pokemon of data.pokemon) {
+    cartillaString += `
+    <article>
+    <h3>${pokemon.name}</h3>
+    <p>
+    ${pokemon.about}
+    </p>
+    <img src=${pokemon.img}>
+    </article>`;
+  }
+  return cartillaString;
+};
+
+
+export const buscarPorNombre = (data, nombreBuscar) => {
+  const busca = nombreBuscar.trim();
+  const dataFiltrada = data.pokemon.filter((pokemon) => pokemon.name.startsWith(busca))
+  return { pokemon: dataFiltrada }
+};
diff --git a/src/data/pokemon/README.md b/src/data/pokemon/README.md
@@ -35,3 +35,4 @@ de los hallazgos.
   después.
 - Los Pokémon se alimentan de caramelos y un maestro Pokémon necesita saber
   cuántos caramelos necesita un Pokémon para evolucionar.
+hola
diff --git a/src/index.html b/src/index.html
@@ -2,11 +2,77 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Data Lovers</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Poke web (Data Lover)</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <div id="root"></div>
-    <script src="main.js" type="module"></script>
-  </body>
-</html>
+    <header>
+      <figure>
+        <a href="https://fonttmeme.com/es/fuente-pokemon/">
+        <img src="https://fontmeme.com/permalink/230321/687d67403dbb62892116f1b85225b722.png"
+         alt="fuente-pokemon" borde="0">
+         </a>
+        </figure>
+    </header>
+
+      <section id="Encabezado"> 
+        <div class="buscar" id="input-buscar">
+        <label for="name"> Busqueda </label>
+        <input type="text" id="inputBuscar" placeholder="nombre">
+         <button>Buscar</button>
+        </div>
+
+         <label for="region">Region</label>
+         <select name="region" id="Region">
+            <option value=""></option>
+            <option value="reg-uno">Johto</option>
+            <option value="reg-dos">Canto</option>
+            </select> 
+
+        <label for="tipo">Tipo</label>
+        <select id="TipoPokemon">
+          <option value="All">Todos</option>
+          <option value="water">Agua</option>
+          <option value="fire">Fuego</option>
+          <option value="grass">Planta</option>
+          <option value="ground">Tierra</option>
+          <option value="rock">Roca</option>
+          <option value="steel">Metal</option>
+          <option value="ice">Hielo</option>
+          <option value="electric">Eléctrico</option>
+          <option value="dragon">Dragon</option>
+          <option value="ghost">Fantasma</option>
+          <option value="psychic">Psiquico</option>
+          <option value="normal">Normal</option>
+          <option value="fighting">Lucha</option>
+          <option value="poison">Veneno</option>
+          <option value="bug">Insecto</option>
+          <option value="flying">Volador</option>
+          <option value="dark">Oscuro</option>
+          <option value="fairy">Hada</option>
+        </select>
+        <label for="tipo">Orden</label>
+        <select id="OrdePokemon">
+          <option>Sin Ordenar</option>
+          <option>Ordenar A-Z</option>
+          <option>Ordenar Z-A</option>
+        </select>
+
+
+      </section>
+      <section id="seccionUno">
+      </section>   
+
+      <button name="button">Retroceder</button>
+      <button name="button">Siguiente</button>
+
+   <div id="root"></div>
+  <script src="main.js" type="module"></script>
+
+<footer>
+  <span>Proyecto creado por Maria & Brina</span>
+</footer>
+ </body>
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,5 @@
-import { example } from './data.js';
-// import data from './data/lol/lol.js';
 import data from './data/pokemon/pokemon.js';
 // import data from './data/rickandmorty/rickandmorty.js';
-
+const generation= pokemon.filter(region => (region.generation .length===2));
+prompt (generation);
 console.log(example, data);
diff --git a/src/mainPokemon.js b/src/mainPokemon.js
@@ -0,0 +1,20 @@
+import data from './data/pokemon/pokemon.js';
+
+const queryString = window.location.search;
+console.log(queryString);
+
+const urlParams = new URLSearchParams(queryString);
+
+const nombrePokemon = urlParams.get('nombre')
+console.log(nombrePokemon);
+const listaDePokemon = data.pokemon;
+
+const pokemon =buscarPokemonPorNombre(nombrePokemon)
+console.log( pokemon);
+
+pokemon[0].evolution['next-evolution'];
+
+
+function buscarPokemonPorNombre(nombre) {
+  return  listaDePokemon.filter(item => item.name === nombre);
+}
diff --git a/src/mainpokemon.js b/src/mainpokemon.js
@@ -0,0 +1,20 @@
+import data from './data/pokemon/pokemon.js';
+
+const queryString = window.location.search;
+console.log(queryString);
+
+const urlParams = new URLSearchParams(queryString);
+
+const nombrePokemon = urlParams.get('nombre')
+console.log(nombrePokemon);
+const listaDePokemon = data.pokemon;
+
+const pokemon =buscarPokemonPorNombre(nombrePokemon)
+console.log( pokemon);
+
+pokemon[0].evolution['next-evolution'];
+
+
+function buscarPokemonPorNombre(nombre) {
+  return  listaDePokemon.filter(item => item.name === nombre);
+}
diff --git a/src/pokemon.html b/src/pokemon.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Poke web (Data Lover)</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header>
+        <h1>Poke-web</h1> 
+    </header>
+    <section id ="seccionDos">
+<<<<<<< HEAD
+      <article id="artSeccionDos">
+        <h3 id="tituloSeccionDos"></h3>
+        <p id="parrafoSeccionDos"></p>
+        <figure id="figuSeccionDos">
+        <img id="imagenSeccionDos">  
+        </figure>
+        <div>  Tamano: <span  id="tamañoDelPokemonUno"></span> </div>
+        <div > Peso: <span id="tamañoDelPokemonDos"> </span> </div>
+        <div > Resistencia: <span id="resistenciaDelPokemon"> </span> </div>
+        <div > Tipo: <span id="tipoDePokemon"></span> </div>
+        <div > Debilidades: <span id="debilidadesDelPokemon"></span> </div>
+      </article>
+=======
+>>>>>>> origin/main
+    </section>  
+    <script src="mainPokemon.js" type="module"></script>
+
+<footer>
+<<<<<<< HEAD
+  <span>Proyecto creado por Maria Y Brina</span>
+</footer>
+
+ </body>
+</html>
+=======
+  <span>Proyecto creado por Maria & Brina</span>
+</footer>
+
+ </body>
+</html>
+>>>>>>> origin/main
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,80 @@
+body{
+    background-color: rgba(197, 249, 249, 0.914);
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    text-align: center;
+    background-size: contain; 
+    background-image:  linear-gradient(rgba(0, 0, 0, 0.232), rgba(0, 0, 0, 0.232)),url(https://wallpaperset.com/w/full/a/e/f/40134.jpg);
+
+}
+
+figure{ 
+    font-size: 200px;
+    justify-content: center;
+    margin: 10px;
+    padding: 20px;
+    width: 100%;
+
+}
+#seccionUno{
+    display: grid;
+    grid-template-columns: auto auto auto;
+    grid-template-rows: auto auto auto;
+    justify-content: center;
+    width: 100%;
+    margin: 10px;
+    background-color: rgba(225, 225, 225, 0.295);
+    padding: 20px;
+    border: 1px solid black;
+    color: black;
+    font-size: 30px;
+}
+article {
+    border: 4px solid rgba(1, 10, 18, 0.901);
+    border-radius: 20px;
+    background-color: rgba(235, 229, 234, 0.962);
+    text-align: center;
+    margin: 10px;
+    color: black;
+    font-size: 50px;
+   image-orientation: center;
+    }
+p {
+        text-align: justify;
+        display: block;
+        margin-block-start: -1em;
+        margin-block-end: 8em;
+        margin-inline-start: 45px;
+        margin-inline-end: 45px;
+}
+input{
+    color: black;
+    font-size: 40px;   
+}
+button {
+    color: black;
+    font-size: 40px;
+}
+select {
+
+    color: black;
+    font-size: 40px;    
+
+}
+section { 
+    display: grid;
+    color: black;
+    font-size: 37px;
+    justify-content: center;
+    background-color: rgba(162, 230, 247, 0.803);
+    border: 2px solid black;size: 20px
+
+}
+
+footer{ 
+    display: grid;
+    color: black;
+    font-size: 40px;
+    justify-content: center;
+    background-color: rgba(162, 230, 247, 0.803);
+    border: 1px solid black;
+}