add support for badges on json pokemon

AM1CODES · Oct 10, 2023 · e1da47a · e1da47a
1 parent 537367d
commit e1da47a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -10346,6 +10346,8 @@ <h5 class="card-subtitle">#037</h5>
     <template id="cardTemplate">
       <div class="col-lg-4 mb-4">
         <div class="card">
+          <div class="card-header">
+          </div>
           <img alt="alt" class="card-img-top" src="" />
           <div class="card-body">
             <h5 class="card-title"></h5>
@@ -10359,6 +10361,10 @@ <h5 class="card-title"></h5>
         </div>
       </div>
     </template>
+
+    <template id="badgeTemplate">
+      <div class="badge"></div>
+    </template>
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script

diff --git a/index.js b/index.js
@@ -55,13 +55,13 @@ const fixBrokenImages = () => {
 $(document).ready(function () {
   $.getJSON("pokemon.json", function (allPokemon) {
     const template = $("#cardTemplate").html();
+    const badgeTemplate = $("#badgeTemplate").html();
     allPokemon.forEach((pokemon) => {
       const card = $(template).clone();
       card
         .find("img")
         .attr("src", pokemon.pokemonImage)
         .attr("alt", pokemon.pokemonName);
-
       card.find(".card-title").text(pokemon.pokemonName);
       card.find(".card-text").text(pokemon.pokemonDescription);
       card.find("a").text(`Contributed by - ${pokemon.contributedByName}`);
@@ -78,14 +78,28 @@ $(document).ready(function () {
           .attr("style", "margin-top: 20px")
           .text(`Improved by - ${pokemon.improvedByName}`);
         if (pokemon.improvedByUrl) {
-          console.log("here");
           button.attr("href", pokemon.contributedByUrl);
         } else {
           button = `<p>Improved by - ${pokemon.improvedByName}</p>`;
         }
         card.find(".card-body").append(button);
       }
 
+      if(pokemon.pokemonType) {
+        let types = Array.isArray(pokemon.pokemonType)
+          ? pokemon.pokemonType
+          : [pokemon.pokemonType];
+
+        card.find(".card-header").append(
+          types.map((type) => {
+            return $(badgeTemplate)
+              .clone()
+              .addClass(type.toLowerCase())
+              .text(type);
+          })
+        );
+      }
+
       $("#pokemon-row").prepend(card);
     });
   }).fail(function () {

diff --git a/pokemon.json b/pokemon.json
@@ -10,6 +10,7 @@
   },
   {
     "pokemonName": "Abra",
+    "pokemonType": ["Psychic"],
     "pokemonDescription": "Abra uses psychic powers while it sleeps. Its dreams affect the powers that the Pokemon wields.",
     "pokemonImage": "https://assets.pokemon.com/assets/cms2/img/pokedex/full/063.png",
     "contributedByName": "felipprodrigues",
@@ -28,6 +29,7 @@
   },
   {
     "pokemonName": "Eevee",
+    "pokemonType": ["Normal"],
     "pokemonDescription": "It has the ability to alter the composition of its body to suit its surrounding environment.",
     "pokemonImage": "https://assets.pokemon.com/assets/cms2/img/pokedex/full/133.png",
     "contributedByName": "Monochrome Taisa",
@@ -37,6 +39,7 @@
   },
   {
     "pokemonName": "Rattata",
+    "pokemonType": ["Normal"],
     "pokemonDescription": "Will chew on anything with its fangs. If you see one, you can be certain that 40 more live in the area.",
     "pokemonImage": "https://assets.pokemon.com/assets/cms2/img/pokedex/full/019.png",
     "contributedByName": "Aagam Shah",