From 9185cd9fa903cb2a90d6921e499b2379cfad937d Mon Sep 17 00:00:00 2001
From: KMR <kerry.russell@cashflow-manager.com>
Date: Wed, 11 Oct 2023 00:47:52 +1030
Subject: [PATCH] add support for badges on json pokemon

---
 index.html   |  6 ++++++
 index.js     | 18 ++++++++++++++++--
 pokemon.json |  2 ++
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 60c0fe0a..35afca17 100644
--- 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="cardTemplate">
+      <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
index d902667b..9f868a6b 100644
--- 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,7 +78,6 @@ $(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>`;
@@ -86,6 +85,21 @@ $(document).ready(function () {
         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
index dd540744..a8104634 100644
--- 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",