From 473914dd22015fc22ab7edf4ca260c9212345bb9 Mon Sep 17 00:00:00 2001
From: vista-man <524715@vistacollege.nl>
Date: Thu, 27 Mar 2025 12:04:01 +0100
Subject: [PATCH] =?UTF-8?q?Add=20sorting=20functionality=20for=20Pok=C3=A9?=
 =?UTF-8?q?mon=20list=20and=20format=20Pok=C3=A9mon=20ID=20display?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 v2/pokemon.js | 34 +++++++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/v2/pokemon.js b/v2/pokemon.js
index 91295f8..b21b89c 100644
--- a/v2/pokemon.js
+++ b/v2/pokemon.js
@@ -4,12 +4,14 @@
   const listWrapper = document.querySelector(".list-wrapper");
   const searchInput = document.querySelector("#search-input");
   const notFoundMessage = document.querySelector("#not-found-message");
+  const sortWrapper = document.querySelector(".sort-wrapper");
 
   let allPokemons = [];
   let filteredPokemons = [];
 
   document.addEventListener("DOMContentLoaded", () => {
     fetchPokemons();
+    setupSorting();
   });
 
   function fetchPokemons() {
@@ -50,7 +52,7 @@
       listItem.className = "list-item";
       listItem.innerHTML = `
           <div class="number-wrap">
-              <p class="caption-fonts">#${pokemon.id}</p>
+              <p class="caption-fonts">#${String(pokemon.id).padStart(3, "0")}</p>
           </div>
           <div class="img-wrap">
               <img src="${pokemon.image_url}" alt="${pokemon.name}" />
@@ -69,4 +71,34 @@
       notFoundMessage.style.display = "none";
     }
   }
+
+  function setupSorting() {
+    const sortOptions = document.querySelectorAll(".filter-wrap input[name='filters']");
+    sortOptions.forEach((option) => {
+      option.addEventListener("change", handleSortChange);
+    });
+  }
+
+  function handleSortChange(event) {
+    const sortValue = event.target.value;
+
+    switch (sortValue) {
+      case "number-asc":
+        filteredPokemons.sort((a, b) => a.id - b.id);
+        break;
+      case "number-desc":
+        filteredPokemons.sort((a, b) => b.id - a.id);
+        break;
+      case "name-asc":
+        filteredPokemons.sort((a, b) => a.name.localeCompare(b.name));
+        break;
+      case "name-desc":
+        filteredPokemons.sort((a, b) => b.name.localeCompare(a.name));
+        break;
+      default:
+        console.warn("Unknown sort option:", sortValue);
+    }
+
+    displayPokemons(filteredPokemons);
+  }
 })();