Finished details screen

full-stack-bcn · Apr 28, 2023 · 53a4e33 · 53a4e33
1 parent 4ededa0
commit 53a4e33
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 1,551 deletions.
diff --git a/apis/fecth-pokemons.ts b/apis/fecth-pokemons.ts
@@ -13,9 +13,10 @@ export const loadPokemons = async (count: number): Promise<Pokemon[]> => {
     const responseDetails = await fetch(detailsURL);
     const jsonDetails: any = await responseDetails.json();
 
-    const { base_experience, height, weight, sprites } = jsonDetails;
+    const { id, base_experience, height, weight, sprites } = jsonDetails;
     const pokemonImg = sprites.other.dream_world.front_default;
 
+    pokemon.id = id;
     pokemon.experience = base_experience;
     pokemon.height = height;
     pokemon.weight = weight;

diff --git a/dom/load-details.js b/dom/load-details.js
@@ -0,0 +1,103 @@
+const fetchDetails = async (urlString) => {
+  const response = await fetch(urlString);
+  const jsonData = await response.json();
+
+  const { id, name, stats, sprites } = jsonData;
+  const pokemonImg = sprites.other.dream_world.front_default;
+  const [
+    hpStats,
+    attackStats,
+    defenseStat,
+    specialAttStats,
+    specialDefStats,
+    speedStats,
+  ] = stats;
+
+  console.log(id, name, hpStats.base_stat, attackStats.base_stat);
+  return {
+    name,
+    hpStats,
+    attackStats,
+    defenseStat,
+    specialAttStats,
+    specialDefStats,
+    speedStats,
+    pokemonImg,
+  };
+};
+
+window.addEventListener('DOMContentLoaded', async () => {
+  const currentUrl = localStorage.getItem('pokemonUrl');
+  console.log('URL', currentUrl);
+  const details = await fetchDetails(currentUrl);
+  const htmlContent = renderDetailsHtml(details);
+  document.querySelector('#root').innerHTML = htmlContent;
+  console.log(details);
+});
+
+const renderDetailsHtml = ({
+  name,
+  hpStats,
+  attackStats,
+  defenseStat,
+  specialAttStats,
+  specialDefStats,
+  speedStats,
+  pokemonImg,
+}) => {
+  return `
+    <h1>${name.toUpperCase()}</h1>
+    <hr />
+
+    <div class="row">
+      <div class="col-3" style="text-align: center;">
+        <img
+          src="${pokemonImg}"
+          />
+      </div>
+
+      <div class="col-9">
+        <div class="row mb-3">
+          <div class="col-4">
+            <div class="stats-card ${hpStats.base_stat <= 50 ? 'bad-stat' :'good-stat'}">
+              <p class="stat-title">Hp:</p>
+              <p class="stat-number">${hpStats.base_stat}</p>
+            </div>
+          </div>
+          <div class="col-4">
+            <div class="stats-card ${attackStats.base_stat <= 50 ? 'bad-stat' :'good-stat'}">
+              <p class="stat-title">Attack:</p>
+              <p class="stat-number">${attackStats.base_stat}</p>
+            </div>
+          </div>
+          <div class="col-4">
+            <div class="stats-card ${defenseStat.base_stat <= 50 ? 'bad-stat' :'good-stat'}">
+              <p class="stat-title">Defense:</p>
+              <p class="stat-number">${defenseStat.base_stat}</p>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-4">
+            <div class="stats-card ${specialAttStats.base_stat <= 50 ? 'bad-stat' :'good-stat'}">
+              <p class="stat-title">Special Attack:</p>
+              <p class="stat-number">${specialAttStats.base_stat}</p>
+            </div>
+          </div>
+          <div class="col-4">
+            <div class="stats-card ${specialDefStats.base_stat <= 50 ? 'bad-stat' :'good-stat'}">
+              <p class="stat-title">Special Defense:</p>
+              <p class="stat-number">${specialDefStats.base_stat}</p>
+            </div>
+          </div>
+          <div class="col-4">
+            <div class="stats-card ${speedStats.base_stat <= 50 ? 'bad-stat' :'good-stat'}">
+              <p class="stat-title">Speed:</p>
+              <p class="stat-number">${speedStats.base_stat}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    `;
+};
diff --git a/dom/see-details-button.js b/dom/see-details-button.js
@@ -0,0 +1,3 @@
+const onSeeMore = (pokemonUrl) => {
+  localStorage.setItem('pokemonUrl', pokemonUrl);
+};
diff --git a/helpers/render-files.ts b/helpers/render-files.ts
@@ -35,9 +35,9 @@ const renderUsers = (pokemons: Pokemon[]) => {
                   <li>Weight: ${pokemon.weight}</li>
                 </ul>
                 <a
-                  href="${pokemon.url}"
+                  href="/pokemon-details.html"
                   class="btn btn-primary"
-                  target="_blank"
+                  onclick="onSeeMore('${pokemon.url}')"
                   >See more</a
                 >
               </div>
@@ -61,6 +61,7 @@ export const render = (pokemons: Pokemon[]) => {
     <div class="row">
         ${renderUsers(pokemons)}
     </div>
+    <script src="./dom/see-details-button.js"></script>
     </body>
 </html>
 `;

diff --git a/index.ts b/index.ts
@@ -3,6 +3,6 @@ import { writeFile } from 'fs/promises';
 import { loadPokemons } from './apis/fecth-pokemons.js';
 import { render } from './helpers/render-files.js';
 
-const pokemons = await loadPokemons(50);
+const pokemons = await loadPokemons(2);
 const indexHTML = render(pokemons);
 await writeFile('pokemons.html', indexHTML);
diff --git a/models/pokemon-model.ts b/models/pokemon-model.ts
@@ -1,4 +1,5 @@
 export class Pokemon {
+  id: string;
   name: string;
   url: string;
   weight: number;
@@ -7,14 +8,15 @@ export class Pokemon {
   image: string;
 
   constructor(
+    id: string,
     name: string,
     url: string,
     height: number,
     weight: number,
     experience: number,
     image: string
   ) {
-    this.name = name;
+    (this.id = id), (this.name = name);
     this.url = url;
     this.weight = weight;
     this.height = height;

diff --git a/pokemon-details.html b/pokemon-details.html
@@ -14,60 +14,10 @@
     <link href="./styles.css" rel="stylesheet" />
   </head>
   <body>
-    <h1>Pokemon Name</h1>
-    <hr />
+    <div id="root"></div>
+    <br /><br />
 
-    <div class="row">
-      <div class="col-3" style="text-align: center;">
-        <img
-          src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/1.svg"
-          />
-      </div>
-
-      <div class="col-9">
-        <div class="row mb-3">
-          <div class="col-4">
-            <div class="stats-card">
-              <p class="stat-title">HP:</p>
-              <p class="stat-number">350</p>
-            </div>
-          </div>
-          <div class="col-4">
-            <div class="stats-card">
-              <p class="stat-title">HP:</p>
-              <p class="stat-number">350</p>
-            </div>
-          </div>
-          <div class="col-4">
-            <div class="stats-card">
-              <p class="stat-title">HP:</p>
-              <p class="stat-number">350</p>
-            </div>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-4">
-            <div class="stats-card">
-              <p class="stat-title">HP:</p>
-              <p class="stat-number">350</p>
-            </div>
-          </div>
-          <div class="col-4">
-            <div class="stats-card">
-              <p class="stat-title">HP:</p>
-              <p class="stat-number">350</p>
-            </div>
-          </div>
-          <div class="col-4">
-            <div class="stats-card">
-              <p class="stat-title">HP:</p>
-              <p class="stat-number">350</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <button class="btn btn-primary"> << Go back</button>
+    <button onclick="history.back()" class="btn btn-primary"><< Go back</button>
+    <script src="./dom/load-details.js"></script>
   </body>
 </html>