feat: add favicon files and implement search history feature with animations

index.js

@@ -1,39 +1,130 @@
-import "/style.css"; // Import the CSS file
-import Pokedex from "pokedex-promise-v2"; // Use bare specifier
+import "/style.css"; // Ensure CSS is imported
+import Pokedex from "pokedex-promise-v2";
 
 const options = {
   protocol: "https",
-  hostName: "pokeapi.co", // Use the actual PokeAPI host
+  hostName: "pokeapi.co",
   versionPath: "/api/v2/",
-  cacheLimit: 100 * 1000, // 100s
-  timeout: 10 * 1000, // 10s increased timeout
+  cacheLimit: 100 * 1000,
+  timeout: 10 * 1000,
 };
 const pokemon = new Pokedex(options);
 
+// --- DOM Elements ---
 const searchButton = document.getElementById("searchButton");
 const pokemonNameInput = document.getElementById("pokemonName");
 const pokemonInfoDiv = document.getElementById("pokemonInfo");
-const voiceSearchButton = document.getElementById("voiceSearchButton"); // Get voice button
+const voiceSearchButton = document.getElementById("voiceSearchButton");
+const historyList = document.getElementById("historyList");
+
+// --- State ---
+let searchHistory = []; // Now stores full data objects
+const MAX_HISTORY_LENGTH = 3;
+let lastDisplayedPokemon = null; // Track the last displayed Pokémon
+
+// --- Functions ---
+
+const updateHistoryDisplay = (justAddedName = null) => {
+  historyList.innerHTML = ""; // Clear current list visually
+  if (searchHistory.length === 0) {
+    historyList.innerHTML =
+      '<li class="italic text-sm text-center text-gray-600">No history yet.</li>';
+  } else {
+    searchHistory.forEach((pokemonData, index) => {
+      const li = document.createElement("li");
+      li.classList.add("cursor-pointer"); // Make whole card clickable
+
+      // Determine scale based on index
+      let scale = 1.0; // Default scale for the newest item
+      if (index === 1) scale = 0.8;
+      else if (index === 2) scale = 0.6;
+
+      // Apply scale via inline style
+      li.style.transform = `scale(${scale})`;
+
+      // Build the inner HTML for the history card
+      li.innerHTML = `
+                <h4 class="text-center">${
+                  pokemonData.name.charAt(0).toUpperCase() +
+                  pokemonData.name.slice(1)
+                }</h4>
+                <img src="${pokemonData.sprites.front_default}" alt="${
+        pokemonData.name
+      }">
+                <p><strong>Type(s):</strong> ${pokemonData.types
+                  .map((t) => t.type.name)
+                  .join(", ")}</p>
+                <p><strong>Height:</strong> ${pokemonData.height / 10} m</p>
+                <p><strong>Weight:</strong> ${pokemonData.weight / 10} kg</p>
+            `;
+
+      // Add click listener to the card
+      li.addEventListener("click", () => {
+        pokemonNameInput.value = pokemonData.name; // Set input value
+        searchPokemon(); // Trigger search
+      });
+
+      // Animation for the newest item
+      if (index === 0 && pokemonData.name === justAddedName) {
+        li.classList.add("history-item-enter");
+        // Apply initial scale for animation start
+        li.style.transform = `translateX(-50px) scale(${scale * 0.9})`; // Start smaller
+        setTimeout(() => {
+          li.classList.remove("history-item-enter");
+          // Transition back to the target scale
+          li.style.transform = `scale(${scale})`;
+        }, 10); // Small delay
+      }
+
+      historyList.appendChild(li);
+    });
+  }
+};
 
 const displayPokemonInfo = (data) => {
+  const pokemonName = data.name; // Keep name for comparison
   pokemonInfoDiv.innerHTML = `
         <h2 class="text-2xl font-semibold mb-2">${
-          data.name.charAt(0).toUpperCase() + data.name.slice(1)
+          pokemonName.charAt(0).toUpperCase() + pokemonName.slice(1)
         }</h2>
-        <img src="${data.sprites.front_default}" alt="${
-    data.name
-  }" class="mx-auto mb-4 w-32 h-32">
+        <img src="${
+          data.sprites.front_default
+        }" alt="${pokemonName}" class="mx-auto mb-4 w-32 h-32">
         <p><strong>Type(s):</strong> ${data.types
           .map((typeInfo) => typeInfo.type.name)
           .join(", ")}</p>
         <p><strong>Height:</strong> ${data.height / 10} m</p>
         <p><strong>Weight:</strong> ${data.weight / 10} kg</p>
     `;
+
+  // --- Update History ---
+  // Only add the previous Pokémon to history (not the current one)
+  if (lastDisplayedPokemon && lastDisplayedPokemon.name !== data.name) {
+    // Remove if already exists
+    searchHistory = searchHistory.filter(
+      (item) => item.name !== lastDisplayedPokemon.name
+    );
+    // Add to beginning
+    searchHistory.unshift(lastDisplayedPokemon);
+    // Limit history length
+    if (searchHistory.length > MAX_HISTORY_LENGTH) {
+      searchHistory = searchHistory.slice(0, MAX_HISTORY_LENGTH);
+    }
+    updateHistoryDisplay(lastDisplayedPokemon.name);
+  } else {
+    updateHistoryDisplay();
+  }
+  // Update lastDisplayedPokemon to current
+  lastDisplayedPokemon = data;
 };
 
 const displayError = (error) => {
-  pokemonInfoDiv.innerHTML = `<p class="text-red-500">Error: ${error.message}</p>`;
-  console.error(error);
+  if (error && error.response && error.response.status === 404) {
+    pokemonInfoDiv.innerHTML = `<p class="text-orange-600">Sorry, Pokémon not found. Please check the spelling and try again.</p>`;
+  } else {
+    pokemonInfoDiv.innerHTML = `<p class="text-red-500">An error occurred while fetching Pokémon data. Please try again later.</p>`;
+    console.error("Error fetching Pokémon:", error);
+  }
 };
 
 const searchPokemon = () => {
@@ -42,10 +133,11 @@ const searchPokemon = () => {
     pokemonInfoDiv.innerHTML = `<p class="text-yellow-600">Please enter a Pokémon name.</p>`;
     return;
   }
-  pokemonInfoDiv.innerHTML = `<p>Loading...</p>`; // Provide loading feedback
+  pokemonInfoDiv.innerHTML = `<p>Loading...</p>`;
   pokemon.getPokemonByName(name).then(displayPokemonInfo).catch(displayError);
 };
 
+// --- Event Listeners & Voice Search ---
 searchButton.addEventListener("click", searchPokemon);
 
 pokemonNameInput.addEventListener("keypress", (event) => {
@@ -54,55 +146,56 @@ pokemonNameInput.addEventListener("keypress", (event) => {
   }
 });
 
-// --- Voice Search ---
 const SpeechRecognition =
   window.SpeechRecognition || window.webkitSpeechRecognition;
 let recognition;
 
 if (SpeechRecognition) {
   recognition = new SpeechRecognition();
-  recognition.continuous = false; // Only listen for a single utterance
+  recognition.continuous = false;
   recognition.lang = "en-US";
-  recognition.interimResults = false; // We only want final results
+  recognition.interimResults = false;
   recognition.maxAlternatives = 1;
 
   voiceSearchButton.addEventListener("click", () => {
     try {
       pokemonNameInput.placeholder = "Listening...";
       recognition.start();
-      voiceSearchButton.classList.add("text-red-500"); // Indicate listening
+      voiceSearchButton.classList.add("text-red-500");
     } catch (e) {
       console.error("Speech recognition already started.", e);
-      pokemonNameInput.placeholder = "Enter Pokémon name or use mic"; // Reset placeholder if error
+      pokemonNameInput.placeholder = "Enter Pokémon name or use mic";
     }
   });
 
   recognition.onresult = (event) => {
     const speechResult = event.results[0][0].transcript.toLowerCase();
     pokemonNameInput.value = speechResult;
-    // Optionally trigger search immediately after recognition
     searchPokemon();
   };
 
   recognition.onspeechend = () => {
     recognition.stop();
     pokemonNameInput.placeholder = "Enter Pokémon name or use mic";
-    voiceSearchButton.classList.remove("text-red-500"); // Remove listening indicator
+    voiceSearchButton.classList.remove("text-red-500");
   };
 
   recognition.onerror = (event) => {
     pokemonInfoDiv.innerHTML = `<p class="text-red-500">Voice recognition error: ${event.error}</p>`;
     console.error("Speech recognition error:", event);
     pokemonNameInput.placeholder = "Enter Pokémon name or use mic";
-    voiceSearchButton.classList.remove("text-red-500"); // Remove listening indicator
+    voiceSearchButton.classList.remove("text-red-500");
   };
 
   recognition.onnomatch = (event) => {
     pokemonInfoDiv.innerHTML = `<p class="text-yellow-600">Didn't recognize that Pokémon name.</p>`;
     pokemonNameInput.placeholder = "Enter Pokémon name or use mic";
-    voiceSearchButton.classList.remove("text-red-500"); // Remove listening indicator
+    voiceSearchButton.classList.remove("text-red-500");
   };
 } else {
   console.warn("Web Speech API not supported in this browser.");
-  voiceSearchButton.style.display = "none"; // Hide button if not supported
+  voiceSearchButton.style.display = "none";
 }
+
+// --- Initial Setup ---
+updateHistoryDisplay(); // Initialize history display on page load