Pokemon Popup w/ statblock

css/styles.css

@@ -51,7 +51,7 @@ body {
 }
 
 #landing {
-  width: 100vw;
+  width: 100%;
   height: 100vh;
   display: flex;
   justify-content: center;
@@ -87,6 +87,7 @@ h1 {
   font-weight: 600;
   text-align: center;
   user-select: none;
+  white-space: nowrap;
 }
 
 #titleBanner {
@@ -138,7 +139,7 @@ h1 {
   background-color: #101010;
   overflow: auto;
   color: white;
-  padding: 50px;
+  padding: 10px;
 }
 
 p {
@@ -191,10 +192,118 @@ h3 {
   border-bottom: none;
 }
 
+/* FULLSCREEN STYLES */
+#fullscreen {
+  position: fixed;
+  height: 100vh;
+  width: 100%;
+  background: #1118;
+  z-index: 100;
+  backdrop-filter: blur(10px);
+  top: 0px;
+  left: 0px;
+  display: none;
+}
+
+#fullscreen.visible {
+  display: block;
+}
+
+#pokemon-display {
+  height: calc(100% - 70px);
+  width: calc(100% - 70px);
+  background: white;
+  margin: 35px;
+  display: flex;
+  border-radius: 25px;
+}
+
+#fullscreen #close-button {
+  position: absolute;
+  top: 2px;
+  right: 0px;
+  height: 40px;
+  width: 40px;
+  border: 0;
+  background: #fff0;
+  font-size: 1.5em;
+  cursor: pointer;
+  color: white;
+  text-shadow: black 1px 1px 3px;
+}
+
+#pokemon-display img {
+  max-height: 475px;
+  max-width: 475px;
+}
+
+#statblock .stat-empty {
+  color: #bbb;
+}
+
+#statblock #hp .stat-filled {
+  color: #90d060;
+}
+
+#statblock #attack .stat-filled {
+  color: #ffd060;
+}
+
+#statblock #defense .stat-filled {
+  color: #f09040;
+}
+
+#statblock #special-attack .stat-filled {
+  color: #40a0f0;
+}
+
+#statblock #special-defense .stat-filled {
+  color: #a030ff;
+}
+
+#statblock #speed .stat-filled {
+  color: #ff40ff;
+}
+
+#statblock {
+  background-color: #222;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px;
+  height: fit-content;
+}
+
+.stat-bar {
+  display: grid;
+  margin-bottom: 8px;
+}
+
+#statblock .stat-name {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+#statblock .stat-value {
+  grid-column: 2;
+  grid-row: 1;
+  text-align: right;
+}
+
+#statblock .stat-graphic {
+  grid-column: 1 / span 2;
+  grid-row: 2;
+}
+
+#statblock p {
+  margin: 0;
+}
+
 /* POKEDEX STYLES */
 
 #pokedex {
-  max-width: 1300px;
+  max-width: 1440px;
   margin: auto;
   margin-bottom: 50px;
 }
@@ -348,147 +457,147 @@ h3 {
   background-color: var(--fairy) !important;
 }
 
-#pokemon-container .normal-primary-type {
+.normal-primary-type {
   background-color: var(--normal) !important;
 }
 
-#pokemon-container .normal-secondary-type {
+.normal-secondary-type {
   box-shadow: inset 0px -150px 100px -100px var(--normal) , 0px 0px 0px 0px transparent !important;
 }
 
-#pokemon-container .fighting-primary-type {
+.fighting-primary-type {
   background-color: var(--fighting) !important;
 }
 
-#pokemon-container .fighting-secondary-type {
+.fighting-secondary-type {
   box-shadow: inset 0px -150px 100px -100px var(--fighting) , 0px 0px 0px 0px transparent !important;
 }
 
-#pokemon-container .flying-primary-type {
+.flying-primary-type {
   background-color: var(--flying) !important;
 }
 
-#pokemon-container .flying-secondary-type {
+.flying-secondary-type {
   box-shadow: inset 0px -150px 100px -100px var(--flying) , 0px 0px 0px 0px transparent !important;
 }
 
-#pokemon-container .poison-primary-type {
+.poison-primary-type {
   background-color: var(--poison) !important;
 }
 
-#pokemon-container .poison-secondary-type {
+.poison-secondary-type {
   box-shadow: inset 0px -150px 100px -100px var(--poison) , 0px 0px 0px 0px transparent !important;
 }
 
-#pokemon-container .ground-primary-type {
+.ground-primary-type {
   background-color: var(--ground) !important;
 }
 
-#pokemon-container .ground-secondary-type {
+.ground-secondary-type {
   box-shadow: inset 0px -150px 100px -100px var(--ground) , 0px 0px 0px 0px transparent !important;
 }
 
-#pokemon-container .rock-primary-type {
+.rock-primary-type {
   background-color: var(--rock) !important;
 }
 
-#pokemon-container .rock-secondary-type {
+.rock-secondary-type {
   box-shadow: inset 0px -150px 100px -100px var(--rock) , 0px 0px 0px 0px transparent !important;
 }
 
-#pokemon-container .bug-primary-type {
+.bug-primary-type {
   background-color: var(--bug) !important;
 }
 
-#pokemon-container .bug-secondary-type {
+.bug-secondary-type {
   box-shadow: inset 0px -150px 100px -100px var(--bug) , 0px 0px 0px 0px transparent !important;
 }
 
-#pokemon-container .ghost-primary-type {
+.ghost-primary-type {
   background-color: var(--ghost) !important;
 }
 
-#pokemon-container .ghost-secondary-type {
+.ghost-secondary-type {
   box-shadow: inset 0px -150px 100px -100px var(--ghost) , 0px 0px 0px 0px transparent !important;
 }
 
-#pokemon-container .steel-primary-type {
+.steel-primary-type {
   background-color: var(--steel) !important;
 }
 
-#pokemon-container .steel-secondary-type {
+.steel-secondary-type {
   box-shadow: inset 0px -150px 100px -100px var(--steel) , 0px 0px 0px 0px transparent !important;
 }
 
-#pokemon-container .fire-primary-type {
+.fire-primary-type {
   background-color: var(--fire) !important;
 }
 
-#pokemon-container .fire-secondary-type {
+.fire-secondary-type {
   box-shadow: inset 0px -150px 100px -100px var(--fire) , 0px 0px 0px 0px transparent !important;
 }
 
-#pokemon-container .water-primary-type {
+.water-primary-type {
   background-color: var(--water) !important;
 }
 
-#pokemon-container .water-secondary-type {
+.water-secondary-type {
   box-shadow: inset 0px -150px 100px -100px var(--water) , 0px 0px 0px 0px transparent !important;
 }
 
-#pokemon-container .grass-primary-type {
+.grass-primary-type {
   background-color: var(--grass) !important;
 }
 
-#pokemon-container .grass-secondary-type {
+.grass-secondary-type {
   box-shadow: inset 0px -150px 100px -100px var(--grass) , 0px 0px 0px 0px transparent !important;
 }
 
-#pokemon-container .electric-primary-type {
+.electric-primary-type {
   background-color: var(--electric) !important;
 }
 
-#pokemon-container .electric-secondary-type {
+.electric-secondary-type {
   box-shadow: inset 0px -150px 100px -100px var(--electric) , 0px 0px 0px 0px transparent !important;
 }
 
-#pokemon-container .psychic-primary-type {
+.psychic-primary-type {
   background-color: var(--psychic) !important;
 }
 
-#pokemon-container .psychic-secondary-type {
+.psychic-secondary-type {
   box-shadow: inset 0px -150px 100px -100px var(--psychic) , 0px 0px 0px 0px transparent !important;
 }
 
-#pokemon-container .ice-primary-type {
+.ice-primary-type {
   background-color: var(--ice) !important;
 }
 
-#pokemon-container .ice-secondary-type {
+.ice-secondary-type {
   box-shadow: inset 0px -150px 100px -100px var(--ice) , 0px 0px 0px 0px transparent !important;
 }
 
-#pokemon-container .dragon-primary-type {
+.dragon-primary-type {
   background-color: var(--dragon) !important;
 }
 
-#pokemon-container .dragon-secondary-type {
+.dragon-secondary-type {
   box-shadow: inset 0px -150px 100px -100px var(--dragon) , 0px 0px 0px 0px transparent !important;
 }
 
-#pokemon-container .dark-primary-type {
+.dark-primary-type {
   background-color: var(--dark) !important;
 }
 
-#pokemon-container .dark-secondary-type {
+.dark-secondary-type {
   box-shadow: inset 0px -150px 100px -100px var(--dark) , 0px 0px 0px 0px transparent !important;
 }
 
-#pokemon-container .fairy-primary-type {
+.fairy-primary-type {
   background-color: var(--fairy) !important;
 }
 
-#pokemon-container .fairy-secondary-type {
+.fairy-secondary-type {
   box-shadow: inset 0px -150px 100px -100px var(--fairy) , 0px 0px 0px 0px transparent !important;
 }
 
@@ -498,7 +607,7 @@ h3 {
   overflow-x: auto;
   overflow-y: hidden;
   width: 100%;
-  height: 220px;
+  height: 230px;
 }
 
 .pokemon-card {
@@ -518,6 +627,7 @@ h3 {
   width: 192px;
   margin: 10px;
   image-rendering: pixelated;
+  color: black;
 }
 
 .pokemon-card .pokemon-name {
@@ -648,11 +758,10 @@ h3 {
   }
 
   .carousel-item {
-    min-width: 200px;
     height: 800px;
-    width: 150px;
+    width: 146px;
-    min-width: 150px;
+    min-width: 146px;
-    border-radius: 74px;
+    border-radius: 75px;
   }
 
   .carousel-item .carousel-id {
@@ -674,12 +783,36 @@ h3 {
   }
 
   .content-column {
-    max-width: 1300px;
+    max-width: 1440px;
     margin: auto;
   }
 
+  /* FULLSCREEN STYLES */
+
+  #pokemon-display {
+    height: calc(100% - 200px);
+    width: calc(100% - 200px);
+    margin: 100px;
+    border-radius: 60px;
+  }
+
+  #fullscreen #close-button {
+    top: 20px;
+    right: 20px;
+    height: 60px;
+    width: 60px;
+    border-radius: 60px;
+    font-size: 2em;
+  }
+
+
+
   /* BELOW LANDING STYLES */
 
+  #below-landing {
+    padding: 50px;
+  }
+
   .feature-showcase {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -720,3 +853,11 @@ h3 {
   }
 
 }
+
+h1 {
+  margin: auto;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

index.html

@@ -17,7 +17,7 @@
           <input id="bgColour" type="color" value="#ffffff">
         </div>
       </div>
-
+      <div id="fullscreen"></div>
       <div id="below-landing">
         <section id="pokedex">
           <h2>Pokedex</h2>

js/scripts.js

@@ -375,6 +375,11 @@ function addPokemon(pokemonData) {
     pokemonImg.alt = pokemonData.name;
     pokemon.appendChild(pokemonImg);
 
+    pokemon.addEventListener("click", () => {
+        const id = pokemonData.id;
+        createPokemonDisplay(id);
+    });
+
     container.appendChild(pokemon);
 }
 
@@ -397,6 +402,115 @@ function restartPokedexUpdate() {
     }, 250);
 }
 
+async function createPokemonDisplay(id) {
+    const fullscreenContainer = document.getElementById("fullscreen");
+    fullscreenContainer.className = "visible";
+
+    const pokemonDisplay = document.createElement("div");
+    pokemonDisplay.id = "pokemon-display";
+
+    const closeButton = document.createElement("button");
+    closeButton.id = "close-button";
+    closeButton.innerHTML = "X";
+    closeButton.addEventListener("click", () => {
+        closePokemonDisplay();
+    });
+
+    fullscreenContainer.addEventListener("click", (event) => {
+        if (event.target.id === "fullscreen") {
+            closePokemonDisplay();
+        }
+    });
+
+    const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
+    const response = await fetch(url);
+    const data = await response.json();
+    
+    pokemonDisplay.className = data.types[0].type.name + "-primary-type"
+
+    const pokemonName = document.createElement("p");
+    pokemonName.className = "pokemon-name";
+
+    let formatedName = "";
+    data.name.split("-").forEach((word) => {
+        formatedName += word.charAt(0).toUpperCase() + word.slice(1) + " ";
+    });
+    formatedName = formatedName.slice(0, formatedName.length - 1);
+
+    pokemonName.innerHTML = formatedName;
+
+    const pokemonId = document.createElement("p");
+    pokemonId.className = "pokemon-id";
+    pokemonId.innerHTML = `#${data.id}`;
+
+    const pokemonImg = document.createElement("img");
+    pokemonImg.src = data.sprites.other["official-artwork"].front_default;
+    pokemonImg.alt = data.name;
+
+    const pokemonStatblock = document.createElement("div");
+    pokemonStatblock.id = "statblock";
+
+    data.stats.forEach((stat) => {
+        const statBar = document.createElement("div");
+        statBar.className = "stat-bar";
+        statBar.id = stat.stat.name;
+        const statName = document.createElement("p");
+        statName.className = "stat-name";
+        let formatedStatName = "";
+        stat.stat.name.split("-").forEach((word) => {
+            formatedStatName += word.charAt(0).toUpperCase() + word.slice(1) + " ";
+        });
+        formatedStatName = formatedStatName.slice(0, formatedStatName.length - 1);
+
+        statName.innerHTML = formatedStatName;
+        const statValue = document.createElement("p");
+        statValue.className = "stat-value";
+        statValue.innerHTML = stat.base_stat;
+
+        const statGraphic = document.createElement("p");
+        statGraphic.className = "stat-graphic";
+        let stringFilled = document.createElement("span");
+        let stringEmpty = document.createElement("span");
+
+        const barSize = 25;
+
+        const baseStat = (stat.base_stat / 255) * barSize;
+        const emptyStat = barSize - baseStat;
+
+        stringFilled.innerHTML = "❚".repeat(baseStat);
+        stringEmpty.innerHTML = "❚".repeat(emptyStat);
+
+        stringFilled.className = "stat-filled";
+        stringEmpty.className = "stat-empty";
+
+        statGraphic.appendChild(stringFilled);
+        statGraphic.appendChild(stringEmpty);
+
+        statBar.appendChild(statGraphic);
+        statBar.appendChild(statName);
+        statBar.appendChild(statValue);
+        pokemonStatblock.appendChild(statBar);
+    });
+
+    pokemonDisplay.appendChild(pokemonName);
+    pokemonDisplay.appendChild(pokemonId);
+    pokemonDisplay.appendChild(pokemonImg);
+    pokemonDisplay.appendChild(pokemonStatblock);
+
+    fullscreenContainer.appendChild(pokemonDisplay);
+    fullscreenContainer.appendChild(closeButton);
+}
+
+function closePokemonDisplay() {
+    const fullscreenContainer = document.getElementById("fullscreen");
+    fullscreenContainer.className = "";
+    const children = Array.from(fullscreenContainer.children);
+    children.forEach((child) => {
+        fullscreenContainer.removeChild(child);
+    });
+
+}
+
 // ACCORDIAN IMAGES
 
 function carouselExpand(i) {
@@ -438,4 +552,19 @@ document.documentElement.style.setProperty("--bgColor", bgColour.value);
 initCarousel();
 carouselExpand(1);
 // Initialize pokedex
-initPokedex();
+initPokedex();
+
+function handleMouseMove(event) {
+    const width = document.body.clientWidth;
+    const height = document.body.clientHeight;
+    
+    const xAbsolute = event.clientX / width;
+    const yAbsolute = event.clientY / height;
+    
+    const maxOffset = 40;
+    const xOffset = (xAbsolute * (2 * maxOffset)) - maxOffset;
+    const yOffset = (yAbsolute * (2 * maxOffset)) - maxOffset;
+    
+    document.body.style.backgroundPosition = `${xOffset}px ${yOffset}px`;
+  }
+