Laboratoria · LinaAtehortua · May 22, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/src/img/pikachu.png b/src/img/pikachu.png
diff --git a/src/img/pokedex.png b/src/img/pokedex.png
diff --git a/src/index.html b/src/index.html
@@ -4,9 +4,38 @@
     <meta charset="utf-8">
     <title>Data Lovers</title>
     <link rel="stylesheet" href="style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
-  <body>
+
+  <header>
+      <img src="https://cdn.worldvectorlogo.com/logos/pokemon-23.svg">
+
+    </header>
+    <div class="search">
+      <form>
+        <input type="text" id="searchbox" name="name" placeholder="Busca tu pokemon">
+        <button id="btnfilter">SEARCH</button>
+
+      </form>
+    </div>
+
+    <body>
+    <section class="home">
+      <div class="contenedor">
+        <div class="resultado" id="resultado"></div> 
+        <div class="pokedata" id="contenedor">
+      </div>
+        <div class="pokedex">
+        <p>
+
+          <img src="img/pokedex.png">
+        </p>
+      </div>
+    </div>
+    </section>
+
     <div id="root"></div>
     <script src="main.js" type="module"></script>
   </body>
-</html>
+  <footer>Creado por Lina y Vero</footer>
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,67 @@
-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';
+//console.log(data)
+//declarar las variables que vamos a usar 
+const pokemones = data.pokemon; //para ingresar a la data
+const contenedor = document.getElementById("contenedor");
+// recorrer el objeto usando foreach, declarando las constantes que vamos a usar en la data
+pokemones.forEach((pokemon) => {
+    const num = pokemon.num;
+    const name = pokemon.name;
+    const about = pokemon.about;
+    const img = pokemon.img;
+    const type = pokemon.type;
+
+    //hacer que la data aparezca en un innerhtml creando un div
+    const card = document.createElement("div");
+    card.className = "card";
+    card.innerHTML = ` 
+    <img src="${img}" alt="${name}" width="100%">
+    <h1>${name}</h1>
+    <p>#${num}<p> 
+    <p>Type: ${type}</p>
+    </div>
+    `;
+    contenedor.appendChild(card);
+});
 
-console.log(example, data);
+
+//opcion de filtrar
+/* const filterbtn = document.getElementById("btnfilter");
+
+filterbtn.addEventListener("click", (e) => {
+contenedor.innerHTML = "";
+pokemones.forEach((pokemon) => {
+    contenedor.innerHTML += `<p>${pokemon.name}</p>`;
+});
+})
+*/
+
+// funcion de busqueda para que filtre por nombre
+//declarar las variables para acceder al dom
+const inputBuscar = document.getElementById('searchbox');
+const divResultado = document.getElementById('resultado');
+//crear un evento input que se inicie cada vez que el usuario ingrese texto en el input
+inputBuscar.addEventListener('input', () => {
+const busqueda = inputBuscar.value.toLowerCase().trim(); 
+const pokemonesFiltrados = pokemones.filter((pokemon) => { //crea un nuevo array con los pokemones filtrados que coincidan con la busqueda
+    return pokemon.name.toLowerCase().startsWith(busqueda) && busqueda.length >= 3;
+});
+mostrarPokemones(pokemonesFiltrados);
+});
+// crear funcion para mostrar la data en el div con innerhtml
+function mostrarPokemones(pokemones) { //funcion que toma el argumento del array de objetos pokemones
+let html = '';
+pokemones.forEach((pokemon) => { // recorrer el array usando metodo foreach
+    html += `
+    <div>
+        <img src="${pokemon.img}" alt="${pokemon.name}">
+        <h2>${pokemon.name}</h2>
+        <p>${pokemon.about}</p>
+
+    </div>
+    `;
+});
+divResultado.innerHTML = html;
+}
+
+//
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,103 @@
+*{
+    padding: 0px;
+    margin: 0px;
+}
+html {
+    border: rgba(196, 42, 42, 1)20px ridge;
+}
+
+body {
+    background: linear-gradient(to left, transparent, rgb(255, 187, 0) );
+}
+
+header {
+    display: flex;
+    justify-content: center;
+
+}
+
+header img{
+    object-fit: scale-down;
+    width: 30%;
+    height: 30%;
+    justify-content: center;
+
+
+}
+.home {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.pokedata {
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+    display: flex;
+    width: 50%;
+    justify-content: space-around;
+
+}
+.card{
+    background-color: rgba(194, 217, 173, 1);
+    font-family: 'Courier New', Courier, monospace;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    transition: 0.3s;
+    border-radius: 5px;
+    max-width: min-content;
+    max-height: min-content;
+    padding: 10px;
+    margin: 20px;
+    justify-content:space-around;
+    flex-wrap: wrap;
+
+
+}
+.card:hover {
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+}
+
+.search {
+    display: flex;
+    justify-content: center;
+}
+.pokedex :first-child {
+    flex: 2;
+    padding: 25px;
+    margin: 20px;
+    margin-bottom: 0px;
+}
+.pokedex div {
+    padding: 25px;
+    margin: 20px;
+}
+.resultado {
+    display: flex;
+    flex-direction: row;
+    padding: 30px;
+    margin: auto;
+}
+.contenedor {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+input[type=search] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -o-appearance: none;
+    height: 30px;
+    width: 200px;
+    background: #CCC;
+    color: rgb(6, 6, 6);
+}
+
+button {
+    background-color: rgb(252, 251, 250);
+    height: 30px;
+    width: 70px;
+}
+