Laboratoria · fiorella-yumi-diaz · Mar 12, 2023 · Mar 13, 2023 · Mar 13, 2023 · Mar 23, 2023
diff --git a/Img/Comparacion 1.png b/Img/Comparacion 1.png
diff --git a/Img/Comparacion 2.png b/Img/Comparacion 2.png
diff --git a/Img/Prototipo de alta fidelidad 1-4.jpeg.png b/Img/Prototipo de alta fidelidad 1-4.jpeg.png
diff --git a/Img/Prototipo de alta fidelidad 2-4.jpeg.png b/Img/Prototipo de alta fidelidad 2-4.jpeg.png
diff --git a/Img/Prototipo de alta fidelidad 3-4.jpeg.png b/Img/Prototipo de alta fidelidad 3-4.jpeg.png
diff --git a/Img/Prototipo de alta fidelidad 4-4.jpeg.png b/Img/Prototipo de alta fidelidad 4-4.jpeg.png
diff --git a/Img/Prototipo de baja fidelidad 1-3.jpeg b/Img/Prototipo de baja fidelidad 1-3.jpeg
diff --git a/Img/Prototipo de baja fidelidad 2-3.jpeg b/Img/Prototipo de baja fidelidad 2-3.jpeg
diff --git a/Img/Prototipo de baja fidelidad 3-3.jpeg b/Img/Prototipo de baja fidelidad 3-3.jpeg
diff --git a/Img/Proyecto Pokemon (Final).png b/Img/Proyecto Pokemon (Final).png
diff --git a/Img/Proyecto Pokemon 1 (Final).png b/Img/Proyecto Pokemon 1 (Final).png
diff --git a/Img/Test Usabilidad 1.png b/Img/Test Usabilidad 1.png
diff --git a/Img/Test Usabilidad 4.png b/Img/Test Usabilidad 4.png
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "eslint": "eslint --ext .js src/ test/",
     "pretest": "npm run eslint && npm run htmlhint",
     "test": "jest --verbose --coverage",
+    "quicktest": "jest --verbose",
     "open-coverage-report": "opener ./coverage/lcov-report/index.html",
     "start": "serve src/",
     "deploy": "gh-pages -d src"
@@ -19,7 +20,7 @@
     "eslint": "^8.3.0",
     "gh-pages": "^3.1.0",
     "htmlhint": "^1.0.0",
-    "jest": "^27.0.1",
+    "jest": "^27.5.1",
     "opener": "^1.5.1",
     "serve": "^13.0.2"
   },
@@ -31,4 +32,4 @@
     "version": "5.6.0",
     "commit": "ffa75c8b2bede153844195479abeff01f3e34227"
   }
-}
+}
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,69 @@
-// estas funciones son de ejemplo
+export const filter = {
+  typeFilter: function (arrData, n) {
+    const typeFilterData = arrData.filter((elem) => elem.type.includes(n));
+    return typeFilterData;
+  },
 
-export const example = () => {
-  return 'example';
+  typeFilterGeneration: function (arrData, n) {
+    const typeFilterDataGeneration = arrData.filter((elem) =>
+      elem.generation.name.includes(n)
+    );
+    return typeFilterDataGeneration;
+  },
 };
 
-export const anotherExample = () => {
-  return 'OMG';
+export const order = {
+  orderAscending: function (arrData) {
+    const orderAs = arrData.sort((a, b) => {
+      if (a.name > b.name) {
+        return 1;
+      } else if (b.name > a.name) {
+        return -1;
+      } else {
+        return 0;
+      }
+    });
+    return orderAs;
+  },
+
+  orderDescending: function (arrData) {
+    const orderDes = arrData.sort((a, b) => {
+      if (a.name > b.name) {
+        return -1;
+      } else {
+        return 0;
+      }
+    });
+    return orderDes;
+  },
+  orderNumber1:function (arrData) {
+    const orderNum1 = arrData.sort((a, b) => {
+      if (a.num > b.num) {
+        return -1;
+      } else if (b.num > a.num) {
+        return 1;
+      } else {
+        return 0;
+      }
+    });
+    return orderNum1;
+  },
+  orderNumber2: function (arrData) {
+    const orderNum2 = arrData.sort((a, b) => {
+      if (b.num > a.num) {
+        return -1;
+      } else {
+        return 0;
+      }
+    });
+    return orderNum2;
+  },
 };
+
+export const spawnCal = {
+  spawnPer: function (number) {
+    const perOperation = ((number * 100) / 15.98).toFixed(2);
+    const answerOperation = perOperation + "%";
+    return answerOperation;
+  },
+};
diff --git a/src/index.html b/src/index.html
@@ -4,9 +4,114 @@
     <meta charset="utf-8">
     <title>Data Lovers</title>
     <link rel="stylesheet" href="style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
   </head>
-  <body>
-    <div id="root"></div>
+    <body>
+      <!--Cabeza y navegador de la pagina-->
+      <header class="container-title">
+        <div class="container-logo">
+          <a href="index.html"><img src="https://1000marcas.net/wp-content/uploads/2020/01/Logo-Pokemon-720x450.png" alt="Logo titulo pokemon"></a>
+        </div>
+        <nav>
+         <ul class="nav-list">
+            <li data-target="#filters">Home</li>
+            <li data-target="#stats">Stats Pokemon</li>
+          </ul>
+        </nav> 
+      </header>
+
+      <!--main menu box one-->
+      <main  data-content="content" id="filters" class="index">
+        <div class="container-filter-box">
+          <div class="filterr">
+            <div class="filter__01">
+              <label class="filter-label-1">Filter by:</label>
+
+                <select id="type-pokemon" name="type-pokemon" class="type-pokemon">
+                  <option selected value="Type">Type</option>
+                  <option value="bug">Bug</option>
+                  <option value="dark">Dark</option>
+                  <option value="dragon">Dragon</option>
+                  <option value="electric">Electric</option>
+                  <option value="fairy">Fairy</option>
+                  <option value="fighting">Fighting</option>
+                  <option value="fire">Fire</option>
+                  <option value="flying">Flying</option>
+                  <option value="ghost">Ghost</option>
+                  <option value="grass">Grass</option>
+                  <option value="ground">Ground</option>
+                  <option value="ice">Ice</option>
+                  <option value="normal">Normal</option>
+                  <option value="poison">Poison</option>
+                  <option value="psychic">Psychic</option>
+                  <option value="rock">Rock</option>
+                  <option value="steel">Steel</option>
+                  <option value="water">Water</option>
+                </select>
+                <select id="type-generation" name="type-generation" class="type-generation">
+                  <option selected value="Gen">Generation</option>
+                  <option value="kanto">Kanto</option>
+                  <option value="johto">Johto</option>
+                </select>
+
+            </div>
+            <select id="type-order" class="filter__02"> <!--order filtering-->
+              <option selected value="1">Order</option>
+              <option value="Ascending">Ascending</option>
+              <option value="Descending">Descending</option>
+              <option value="Major-Minor">Major-Minor</option>
+              <option value="Minor-Major">Minor-Major</option>
+            </select>
+          </div>
+        </div>
+        <div class="box-pokedex" id="content-pokedexs"></div>
+      </main>
+
+      <!-- percentage box number two-->
+      <section data-content="content" id="stats" class="stats-contain">
+          <table border="1" class="main-table" >
+            <thead>
+              <th colspan="9" class="title-table">Pokemon Stats</th>
+              <tr>
+                <th>#</th>
+                <th>Pokemon</th>
+                <th>Name</th>
+                <th>Base Attack</th>
+                <th>Base Defense</th>
+                <th>Base Stamina</th>
+                <th>Max-CP</th>
+                <th>Max-HP</th>
+                <th>Encounter Percentage</th>
+               </tr>
+            </thead>
+            <tbody id="pokedex-stats"></tbody>
+          </table>
+      </section>
+
+      <!--Footer-->
+      <footer id="" class="cotainer-footer">
+        <div class="logo-footer">
+          <div class="box-img-poke">
+            <img src="https://1000marcas.net/wp-content/uploads/2020/01/Logo-Pokemon-720x450.png" alt="Logo footer pokemon">
+          </div>
+        </div>
+        <div class="data-collaborator">  
+          <div>
+            <a href="mailto:angiemorarosas@gmai.com? subject=angie & body=correo">@angiemorarosas</a>
+            <a href="mailto:fiorella.dm2002@gmai.com? subject=fiorella & body=correo">@fiorella.dm2002</a>
+          </div>
+          <p>Project collaborators: Diana Fiorella Diaz Mayta and Angie Lorena Mora Rosas </p>
+        </div>
+        <div class="icon-info">
+         <a href=""><ion-icon name="logo-github"></ion-icon></a>
+         <a href=""><ion-icon name="logo-figma"></ion-icon></a>
+         <a href=""><ion-icon name="logo-linkedin"></ion-icon></a>
+        </div>
+      </footer>
+
+
+    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
     <script src="main.js" type="module"></script>
   </body>
-</html>
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,102 @@
-import { example } from './data.js';
-// import data from './data/lol/lol.js';
+import {filter} from './data.js';
+import {order} from "./data.js";
+import {spawnCal} from "./data.js";
 import data from './data/pokemon/pokemon.js';
-// import data from './data/rickandmorty/rickandmorty.js';
 
-console.log(example, data);
+//dynamic browser windows
+const targets = document.querySelectorAll('[data-target]')
+const content = document.querySelectorAll('[data-content]')
+targets.forEach(target => {
+  target.addEventListener('click', () => {
+    content.forEach(c => {
+      c.classList.remove('index');
+    });
+    const t = document.querySelector(target.dataset.target);
+    t.classList.add('index');
+  })
+});
+
+//Constant where the data is stored
+const dataPokedex = data.pokemon;
+//Vizualization of the data on the pag(img,num,name,generation,type)
+function paint (dataArray) {
+  let contentPokedexMain = "";
+  dataArray.forEach((element)=>{
+    contentPokedexMain += `<article class="card"> 
+                        <p>${element.num}</p>
+                        <div class="pokemon-img">
+                        <img src="${element.img}">
+                        </div>
+                        <p class="p-1">${element.name}</p>
+                        <p class="p-2">${element.generation.name}</p>
+                        <p class="p-3">${element.type}<p>
+                      </article>`                    
+  })
+  document.getElementById('content-pokedexs').innerHTML = contentPokedexMain
+}
+paint (dataPokedex);
+// pokemon power percentage display
+function statsPokemon (dataArry) {
+  let contentPokedexStats = "";
+  dataArry.forEach((element)=> {
+    contentPokedexStats += `
+                        <tr class="element-datatr">
+                         <td>${element.num}</td>
+                         <td><img src="${element.img}"/></td>
+                         <td>${element.name}</td>
+                         <td>${element.stats["base-attack"]}</td>
+                         <td>${element.stats["base-defense"]}</td>
+                         <td>${element.stats["base-stamina"]}</td>
+                         <td>${element.stats["max-cp"]}</td>
+                         <td>${element.stats["max-hp"]}</td>
+                         <td>${spawnCal.spawnPer(element["spawn-chance"])}</td>
+                       </tr>`
+  });
+  document.getElementById('pokedex-stats').innerHTML =contentPokedexStats;
+}
+statsPokemon(dataPokedex);
+//Type filter
+function filter1() {
+  const selectFilter = document.getElementById("type-pokemon");
+  selectFilter.addEventListener("change", () => {
+    const typeF = selectFilter.value;
+    if (typeF === "Type") {
+      paint(dataPokedex);
+    } else {
+      paint(filter.typeFilter(dataPokedex, typeF));
+    }
+  });
+}
+filter1();
+
+//Generation filter
+function filter2() {
+  const selectGeneration = document.getElementById("type-generation");
+  selectGeneration.addEventListener("change", () => {
+    const generationF = selectGeneration.value;
+    if (generationF === "Gen") {
+      paint(dataPokedex);
+    } else {
+      return paint(filter.typeFilterGeneration(dataPokedex, generationF));
+    }
+  });
+}
+filter2();
+
+//Order (Ascending,orderDescending,Number)
+function allOrder() {
+  const selectOrder = document.getElementById("type-order");
+  selectOrder.addEventListener("change", () => {
+    const typ = selectOrder.value;
+    if (typ === "Ascending") {
+      return paint(order.orderAscending(dataPokedex));
+    } else if (typ === "Descending") {
+      return paint(order.orderDescending(dataPokedex));
+    } else if (typ === "Major-Minor") {
+      return paint(order.orderNumber1(dataPokedex));
+    } else if (typ === "Minor-Major") {
+      return paint(order.orderNumber2(dataPokedex));
+    }
+  });
+}
+allOrder();