Bug Fix

sky-lynx · Oct 2, 2024 · 67bb08a · 67bb08a
1 parent 52152c1
commit 67bb08a
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 21 deletions.
diff --git a/docs/script.js b/docs/script.js
@@ -1,12 +1,18 @@
 document.addEventListener('DOMContentLoaded', () => {
-    // Fetching data from the JSON file
-    fetch('pokemon-data.json') // Ensure the path is correct
+    // Load Pokémon data from the JSON file
+    fetch('pokemon-data.json')
         .then(response => response.json())
         .then(pokemonData => {
             const pokemonList = document.getElementById('pokemon-list');
             const popup = document.getElementById('popup');
             const closeButton = document.querySelector('.close-button');
 
+            // Create a dimmed background for the popup
+            const dimmedBackground = document.createElement('div');
+            dimmedBackground.className = 'dimmed';
+            document.body.appendChild(dimmedBackground);
+
+            // Generate Pokémon cards
             pokemonData.forEach(pokemon => {
                 const card = document.createElement('div');
                 card.className = 'pokemon-card';
@@ -23,6 +29,7 @@ document.addEventListener('DOMContentLoaded', () => {
                     document.getElementById('popup-abilities').innerText = `Abilities: ${pokemon.abilities.join(', ')}`;
                     document.getElementById('popup-base-stats').innerText = `Base Stats: ${pokemon.baseStats.join(', ')}`;
                     popup.style.display = 'block'; // Show the popup
+                    dimmedBackground.style.display = 'block'; // Show the dimmed background
                 });
 
                 pokemonList.appendChild(card);
@@ -31,14 +38,16 @@ document.addEventListener('DOMContentLoaded', () => {
             // Close button functionality
             closeButton.addEventListener('click', () => {
                 popup.style.display = 'none'; // Hide the popup
+                dimmedBackground.style.display = 'none'; // Hide the dimmed background
             });
 
             // Close popup when clicking outside of it
             window.addEventListener('click', (event) => {
-                if (event.target === popup) {
+                if (event.target === dimmedBackground) {
                     popup.style.display = 'none'; // Hide the popup
+                    dimmedBackground.style.display = 'none'; // Hide the dimmed background
                 }
             });
         })
-        .catch(error => console.error('Error fetching data:', error));
+        .catch(error => console.error('Error loading Pokémon data:', error));
 });
diff --git a/docs/style.css b/docs/style.css
@@ -1,7 +1,7 @@
 body {
-    font-family: Arial, sans-serif; /* General font for the page */
+    background-color: #f4f4f4; /* Light gray background */
+    font-family: Arial, sans-serif;
 }
-
 h1 {
     text-align: center;
 }
@@ -14,18 +14,20 @@ h1 {
 }
 
 .pokemon-card {
-    background-color: #f9f9f9; /* Card background */
-    border-radius: 10px; /* Round borders */
-    padding: 10px; /* Inner padding */
-    margin: 5px; /* Smaller space between cards */
-    width: calc(18% - 10px); /* Adjust width to fit more cards (5 in a row) */
-    display: inline-block; /* Align cards in a row */
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Card shadow */
-    transition: transform 0.2s; /* Animation on hover */
+    width: 18%;
+    margin: 10px;
+    padding: 20px;
+    background-color: white;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    display: inline-block;
+    vertical-align: top;
+    text-align: center;
+    transition: transform 0.2s ease;
 }
 
 .pokemon-card:hover {
-    transform: scale(1.05); /* Slightly enlarge the card on hover */
+    transform: scale(1.05); /* Slight zoom on hover */
 }
 
 .pokemon-card h2 {
@@ -37,14 +39,18 @@ h1 {
 }
 
 #popup {
-    display: none; /* Hide the popup by default */
-    position: fixed; /* Position it in the viewport */
-    top: 50%; /* Center vertically */
-    left: 50%; /* Center horizontally */
-    transform: translate(-50%, -50%); /* Offset to truly center */
-    z-index: 1000; /* Ensure it appears on top */
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+    z-index: 10;
 }
 
+
 .popup-content {
     background-color: white; /* Popup background */
     border-radius: 10px; /* Round borders */
@@ -55,6 +61,17 @@ h1 {
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Add shadow to the popup */
 }
 
+.dimmed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5); /* Dimmed background */
+    z-index: 9;
+    display: none;
+}
+
 .popup-content h2 {
     font-size: 16px; /* Smaller font size for popup title */
 }