Laboratoria · Adrianazambrano · Nov 17, 2022 · Nov 17, 2022 · Nov 17, 2022 · Nov 17, 2022
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/data.js b/src/data.js
@@ -1,7 +1,10 @@
 // estas funciones son de ejemplo
 
-export const example = () => {
-  return 'example';
+export const filtrar = () => {
+
+
+
+  return 'filtrar';
 };
 
 export const anotherExample = () => {

diff --git a/src/img/LogoPokemon.jpeg b/src/img/LogoPokemon.jpeg
diff --git a/src/img/LogoPokemon.jpg b/src/img/LogoPokemon.jpg
diff --git a/src/img/facebook.png b/src/img/facebook.png
diff --git a/src/img/fondopoke.jpg b/src/img/fondopoke.jpg
diff --git a/src/img/instagram.png b/src/img/instagram.png
diff --git a/src/img/paginaPokemonesDesktop.jpeg b/src/img/paginaPokemonesDesktop.jpeg
diff --git a/src/img/paginaPokemonesMovil.jpeg b/src/img/paginaPokemonesMovil.jpeg
diff --git a/src/img/pokemongo.png b/src/img/pokemongo.png
diff --git a/src/img/prototipoDesktop.jpeg b/src/img/prototipoDesktop.jpeg
diff --git a/src/img/prototipoDesktopbyn.jpeg b/src/img/prototipoDesktopbyn.jpeg
diff --git a/src/img/prototipoMovil.jpeg b/src/img/prototipoMovil.jpeg
diff --git a/src/img/prototipoMovilbyn.jpeg b/src/img/prototipoMovilbyn.jpeg
diff --git a/src/img/youtube.png b/src/img/youtube.png
diff --git a/src/index.html b/src/index.html
@@ -2,11 +2,85 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0", user-scalable="no", maximum-scale="1.0", minimum-scale="1.0">
     <title>Data Lovers</title>
     <link rel="stylesheet" href="style.css" />
   </head>
+
   <body>
-    <div id="root"></div>
+      <section class="paginaPrincipal">
+    <div class="Botones"> <!-- El grid tiene 3 columnas-->
+
+        <button type="button" id="btnPokemones" class = "btn"  >POKEMONES</button>
+        <button type="button" id="btnEstadistica" class = "btn" >ESTADISTICAS</button>
+
+         </div>
+
+    <footer>
+      <div class="redesSociales">
+        <img src="img/facebook.png" alt="" class="redes">
+        <img src="img/instagram.png" alt="" class="redes">
+        <img src="img/youtube.png" alt="" class="redes">
+
+      </div>
+    <div class="cajaAutores">
+      <p class = autores> by: Adriana Zambrano - Erika Suesca 2022</p> 
+    </div>
+
+    </footer>
+  </section>
+
+    <!-- PAGINA DE POKEMONES-->
+    <section class="filtrosBusqueda">
+      <input type="search" class="buscador" id="buscador" placeholder="Busca los pokemones">
+      <h4>FILTER</h4>
+
+      <input type="radio" name="Filter" value="Resistant" id="Resistant">
+      <label for="Resistant">Resistant</label>
+
+      <input type="radio" name="Filter" value="Weaknesses" id="Weaknesses">
+      <label for="Weaknesses">Weaknesses</label>
+
+      <input type="radio" name="Filter" value="Type" id="Type">
+      <label for="Type">Type</label>
+      <form> 
+          <label><input type="checkbox" name="cb-bug">Bug</label>
+          <label><input type="checkbox" name="cb-dark"> Dark</label>
+          <label><input type="checkbox" name="cb-dragon"> Dragon</label>
+          <label><input type="checkbox" name="cb-electric"> Electric</label>
+          <label><input type="checkbox" name="cb-fighting"> Fighting</label>
+          <label><input type="checkbox" name="cb-flying"> Flying</label>
+          <label><input type="checkbox" name="cb-ghost"> Ghost</label>
+          <label><input type="checkbox" name="cb-grass"> Grass</label>
+          <label><input type="checkbox" name="cb-ground"> Ground</label>
+          <label><input type="checkbox" name="cb-ice"> Ice</label>
+          <label><input type="checkbox" name="cb-normal"> Normal</label>
+          <label><input type="checkbox" name="cb-poison"> Poison</label>
+          <label><input type="checkbox" name="cb-psychic"> Psychic</label>
+          <label><input type="checkbox" name="cb-rock"> Rock</label>
+          <label><input type="checkbox" name="cb-steel"> Steel</label>
+          <label><input type="checkbox" name="cb-water"> Water</label>
+      </form>
+    </section>
+
+
+    <section class="paginaPokemones" id="seccionPokemones" >
+
+      </section>
+
+
+   <!-- PAGINA DE ESTADISTICAS-->      
+
+
+   <section class="paginaEstadistica">
+    <div class="estadisticas">
+
+    </div>
+  </section>
+
+
+
+
     <script src="main.js" type="module"></script>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,62 @@
-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';
+import {  } from './data.js';
+import pokemon from './data/pokemon/pokemon.js';
+
+
+
+ document.getElementById("btnPokemones").addEventListener("click", () => {
+    document.querySelector('.paginaPrincipal').style.display= 'none';
+    document.querySelector('.paginaEstadistica').style.display= 'none';
+    document.querySelector('.paginaPokemones').style.display= 'block';
+    document.querySelector('.filtrosBusqueda').style.display= 'block';
+
+});
+
+document.getElementById("btnEstadistica").addEventListener("click", () => {
+    document.querySelector('.paginaPrincipal').style.display= 'none';
+    document.querySelector('.paginaEstadistica').style.display= 'block';
+    document.querySelector('.paginaPokemones').style.display= 'none';
+    document.querySelector('.filtrosBusqueda').style.display= 'none'
+});
+
+//console.log(example, data);
+
+//Tarjetas de pokemones
+const seccion = document.getElementById('seccionPokemones');
+const contenedor = document.createElement('div');
+contenedor.setAttribute('class','contenedorTarjetas'); 
+
+const mostrar = (pokemones)=>{
+    pokemones.forEach(pokemon => {
+
+
+        seccion.appendChild(contenedor);
+        seccion.setAttribute('class', 'paginaPokemones');
+       contenedor.innerHTML+=  
+
+       ` <div class="tarjetaPokemones" id="tarjetaPokemones" >
+                                 <div class="encabezadoTarjeta">
+                                   <h2 id="nombrePokemon" class="nombreP">${pokemon.name} </h2>
+                                   <img src="${pokemon.img}" alt="" id="imagenPokemon" class="imgPokemon">
+                                   <h3 id="tipoPokemon" class="textoh3"> Type: </h3>
+                                   <h3 id="generacionPokemon" class="textoh3"> Generation:</h3>          
+                                 </div>
+
+                                 <div class="descripcionTarjeta">
+                                   <p id="aboutPokemon" class="aboutP">Descripcion</p>
+
+                                 </div>
+
+                                 <div class="botonesTarjeta">
+                                   <button id="btnStats" class="bntS"> Stats </button>
+                                   <button id="btnResistencia" class="btnR">Characteristics</button>
+                                 </div>
+
+                                 </div>  `                        
+
+
+    });
+} 
+ mostrar(pokemon.pokemon);
 
-console.log(example, data);
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,153 @@
+*{
+    box-sizing: border-box
+}
+
+body{
+    margin: 0;
+    background: rgb(242, 240, 245);
+    min-width: 100%; 
+    min-height: 100%;    
+
+}
+ .paginaPrincipal{
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+
+ }
+
+.Botones {
+   display: flex;
+   flex-direction: column;
+   width: max-content;
+   position: absolute;
+   top: 60% ;
+}
+
+.btn {
+     margin: 3%;
+    width:160px ;
+    font-size: 14px;
+    word-wrap: break-word;
+    font-weight: bolder;
+    background-color: #03071e;
+    opacity: 0.7;
+    color: white;
+    border-radius: 5px;
+    padding: 7px 20px;
+    text-transform: uppercase;
+   /* place-content: fixed;*/ 
+    cursor: pointer;
+ }
+
+ .btn:hover{
+    background: rgb(188, 214, 41); ;
+  }
+
+
+ footer {
+
+    display: flex;
+    justify-content: space-between;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 50px;
+    background-color: #0e153c;
+    opacity: 0.7;
+ }
+
+ .redesSociales{
+   margin: auto;
+
+ }
+
+ .redes{
+
+    width: 40px;
+    height:40px;
+    margin: 7px;
+
+ }
+.cajaAutores{
+    margin:auto ;
+    width: 30%;
+    height:40px;
+
+}
+ .autores {
+    position: center;
+    text-align: center;
+    color: white;
+    top: 90%;
+    font-weight: 100;
+    font-size: 13px;
+    right: 5%;
+ }
+
+/* Estilos pagina pokemones*/ 
+.paginaPokemones{
+   background-color: #b8bbc8;
+     width: 100%;
+    height: 100%;
+    display:none;
+}
+
+.contenedorTarjetas{
+    width: max-content;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+       grid-gap: 10px;
+
+}
+
+.tarjetaPokemones{
+    display: flex;
+    flex-direction: column;
+     width: max-content;
+    height: 50%;
+    border-radius: 10%;
+    background-image:url(img/fondopoke.jpg);
+} 
+
+
+.encabezadoTarjeta{
+
+    background-color: bisque;
+}
+
+.aboutP, .nombreP, .textoh3{
+    margin:0;
+} 
+
+.imgPokemon{
+   width: 70px;
+   height: 70px;
+}
+
+.nombreP{
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    font-size: 20px;
+    color: blue;
+}
+
+.descripcionTarjeta{
+
+    background-color: azure;
+}
+
+.botonesTarjeta{
+
+    background-color: coral;
+}
+
+.filtrosBusqueda {
+    display: none;
+}
+
+/* Estilos pagina Estadisticas*/ 
+
+.paginaEstadistica{
+    display: none;
+}