{"id":32,"date":"2026-03-13T15:12:54","date_gmt":"2026-03-13T15:12:54","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/m_vicander\/?p=32"},"modified":"2026-03-13T15:43:25","modified_gmt":"2026-03-13T15:43:25","slug":"what-i-did-today-4","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/m_vicander\/2026\/03\/13\/what-i-did-today-4\/","title":{"rendered":"what i did today"},"content":{"rendered":"\n

what i did today was make a pokemon website where you can look up all the pokemon and if you type all it will show all the pokemon in order in the pokedex and if you scroll it changes color if you want you make <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
.pokeBox:hover {\n\u00a0 \u00a0 \u00a0 transform: translateY(-5px);\n\u00a0 \u00a0 \u00a0 box-shadow: 0 0 18px rgba(0,0,0,0.5);\n\u00a0 \u00a0 }<\/code><\/pre>\n\n\n\n
<!DOCTYPE html><\/p>\n\n\n\n
<html lang=”en”><\/p>\n\n\n\n
<head><\/p>\n\n\n\n
  <meta charset=”UTF-8″><\/p>\n\n\n\n
  <title>Pok\u00e9mon Viewer<\/title><\/p>\n\n\n\n
  <link rel=”stylesheet” href=”styles.css”><\/p>\n\n\n\n
  <style><\/p>\n\n\n\n
    body {<\/p>\n\n\n\n
      font-family: “Segoe UI”, Arial, sans-serif;<\/p>\n\n\n\n
      text-align: center;<\/p>\n\n\n\n
      margin: 0;<\/p>\n\n\n\n
      padding: 20px;<\/p>\n\n\n\n
      background: linear-gradient(135deg, #6104ad, #6473f6);<\/p>\n\n\n\n
      min-height: 100vh;<\/p>\n\n\n\n
      color: white;<\/p>\n\n\n\n
    }<\/p>\n\n\n\n
    h1 {<\/p>\n\n\n\n
      font-size: 42px;<\/p>\n\n\n\n
      text-shadow: 3px 3px 8px rgba(0,0,0,0.4);<\/p>\n\n\n\n
      margin-bottom: 20px;<\/p>\n\n\n\n
    }<\/p>\n\n\n\n
    \/* Search bar + button *\/<\/p>\n\n\n\n
    #pokemonName {<\/p>\n\n\n\n
      padding: 12px 18px;<\/p>\n\n\n\n
      width: 260px;<\/p>\n\n\n\n
      border-radius: 25px;<\/p>\n\n\n\n
      border: none;<\/p>\n\n\n\n
      outline: none;<\/p>\n\n\n\n
      font-size: 16px;<\/p>\n\n\n\n
      box-shadow: 0 0 10px rgba(0,0,0,0.3);<\/p>\n\n\n\n
    }<\/p>\n\n\n\n
    button {<\/p>\n\n\n\n
      padding: 12px 20px;<\/p>\n\n\n\n
      margin-left: 10px;<\/p>\n\n\n\n
      border: none;<\/p>\n\n\n\n
      border-radius: 25px;<\/p>\n\n\n\n
      background: #ffffff;<\/p>\n\n\n\n
      color: #3a147b;<\/p>\n\n\n\n
      font-size: 16px;<\/p>\n\n\n\n
      font-weight: bold;<\/p>\n\n\n\n
      cursor: pointer;<\/p>\n\n\n\n
      transition: 0.2s;<\/p>\n\n\n\n
      box-shadow: 0 0 10px rgba(0,0,0,0.3);<\/p>\n\n\n\n
    }<\/p>\n\n\n\n
    button:hover {<\/p>\n\n\n\n
      background: #ae7ed0;<\/p>\n\n\n\n
      transform: scale(1.05);<\/p>\n\n\n\n
    }<\/p>\n\n\n\n
    \/* Single Pok\u00e9mon *\/<\/p>\n\n\n\n
    #pokemonSprite {<\/p>\n\n\n\n
      display: none;<\/p>\n\n\n\n
      margin-top: 25px;<\/p>\n\n\n\n
      width: 180px;<\/p>\n\n\n\n
      image-rendering: pixelated;<\/p>\n\n\n\n
      filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));<\/p>\n\n\n\n
    }<\/p>\n\n\n\n
    \/* All Pok\u00e9mon grid *\/<\/p>\n\n\n\n
    #allContainer {<\/p>\n\n\n\n
      display: none;<\/p>\n\n\n\n
      margin-top: 40px;<\/p>\n\n\n\n
      display: grid;<\/p>\n\n\n\n
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));<\/p>\n\n\n\n
      gap: 25px;<\/p>\n\n\n\n
      padding: 10px;<\/p>\n\n\n\n
      max-width: 1100px;<\/p>\n\n\n\n
      margin-left: auto;<\/p>\n\n\n\n
      margin-right: auto;<\/p>\n\n\n\n
    }<\/p>\n\n\n\n
    \/* Pok\u00e9mon card *\/<\/p>\n\n\n\n
    .pokeBox {<\/p>\n\n\n\n
      background: rgba(255,255,255,0.2);<\/p>\n\n\n\n
      padding: 15px;<\/p>\n\n\n\n
      border-radius: 15px;<\/p>\n\n\n\n
      backdrop-filter: blur(6px);<\/p>\n\n\n\n
      box-shadow: 0 0 12px rgba(0,0,0,0.3);<\/p>\n\n\n\n
      transition: 0.2s;<\/p>\n\n\n\n
    }<\/p>\n\n\n\n
    .pokeBox:hover {<\/p>\n\n\n\n
      transform: translateY(-5px);<\/p>\n\n\n\n
      box-shadow: 0 0 18px rgba(0,0,0,0.5);<\/p>\n\n\n\n
    }<\/p>\n\n\n\n
    .pokeBox img {<\/p>\n\n\n\n
      width: 96px;<\/p>\n\n\n\n
      image-rendering: pixelated;<\/p>\n\n\n\n
      filter: drop-shadow(0 0 6px rgba(0,0,0,0.4));<\/p>\n\n\n\n
    }<\/p>\n\n\n\n
    .pokeBox div {<\/p>\n\n\n\n
      margin-top: 8px;<\/p>\n\n\n\n
      font-size: 16px;<\/p>\n\n\n\n
      font-weight: bold;<\/p>\n\n\n\n
      text-transform: capitalize;<\/p>\n\n\n\n
      color: #9dbd10;<\/p>\n\n\n\n
      text-shadow: 2px 2px 5px rgba(0,0,0,0.5);<\/p>\n\n\n\n
    }<\/p>\n\n\n\n
  <\/style><\/p>\n\n\n\n
<\/head><\/p>\n\n\n\n
<body><\/p>\n\n\n\n
  <h1>Pok\u00e9mon Viewer<\/h1><\/p>\n\n\n\n
  <input type=”text” id=”pokemonName” placeholder=”Enter Pok\u00e9mon name (e.g. pikachu or all)” \/><\/p>\n\n\n\n
  <button onclick=”fetchData()”>Search<\/button><\/p>\n\n\n\n
  <div><\/p>\n\n\n\n
    <img id=”pokemonSprite” alt=”Pok\u00e9mon sprite” \/><\/p>\n\n\n\n
  <\/div><\/p>\n\n\n\n
  <div id=”allContainer”><\/div><\/p>\n\n\n\n
  <script><\/p>\n\n\n\n
    async function fetchData() {<\/p>\n\n\n\n
      const input = document.getElementById(“pokemonName”).value.toLowerCase();<\/p>\n\n\n\n
      const singleImg = document.getElementById(“pokemonSprite”);<\/p>\n\n\n\n
      const allContainer = document.getElementById(“allContainer”);<\/p>\n\n\n\n
      singleImg.style.display = “none”;<\/p>\n\n\n\n
      allContainer.style.display = “none”;<\/p>\n\n\n\n
      allContainer.innerHTML = “”;<\/p>\n\n\n\n
      if (input === “all”) {<\/p>\n\n\n\n
        loadAllPokemon();<\/p>\n\n\n\n
        return;<\/p>\n\n\n\n
      }<\/p>\n\n\n\n
      try {<\/p>\n\n\n\n
        const response = await fetch(`https:\/\/pokeapi.co\/api\/v2\/pokemon\/${input}`);<\/p>\n\n\n\n
        if (!response.ok) throw new Error(“Not found”);<\/p>\n\n\n\n
        const data = await response.json();<\/p>\n\n\n\n
        singleImg.src = data.sprites.front_default;<\/p>\n\n\n\n
        singleImg.style.display = “block”;<\/p>\n\n\n\n
      } catch (error) {<\/p>\n\n\n\n
        alert(“Could not fetch that Pok\u00e9mon. Check the name and try again.”);<\/p>\n\n\n\n
      }<\/p>\n\n\n\n
    }<\/p>\n\n\n\n
    async function loadAllPokemon() {<\/p>\n\n\n\n
      const allContainer = document.getElementById(“allContainer”);<\/p>\n\n\n\n
      allContainer.style.display = “grid”;<\/p>\n\n\n\n
      try {<\/p>\n\n\n\n
        const listRes = await fetch(“https:\/\/pokeapi.co\/api\/v2\/pokemon?limit=1025”);<\/p>\n\n\n\n
        const listData = await listRes.json();<\/p>\n\n\n\n
        for (const pokemon of listData.results) {<\/p>\n\n\n\n
          const res = await fetch(pokemon.url);<\/p>\n\n\n\n
          const data = await res.json();<\/p>\n\n\n\n
          const box = document.createElement(“div”);<\/p>\n\n\n\n
          box.className = “pokeBox”;<\/p>\n\n\n\n
          const img = document.createElement(“img”);<\/p>\n\n\n\n
          img.src = data.sprites.front_default;<\/p>\n\n\n\n
          const label = document.createElement(“div”);<\/p>\n\n\n\n
          label.textContent = data.name;<\/p>\n\n\n\n
          box.appendChild(img);<\/p>\n\n\n\n
          box.appendChild(label);<\/p>\n\n\n\n
          allContainer.appendChild(box);<\/p>\n\n\n\n
        }<\/p>\n\n\n\n
      } catch (err) {<\/p>\n\n\n\n
        alert(“Error loading all Pok\u00e9mon.”);<\/p>\n\n\n\n
      }<\/p>\n\n\n\n
    }<\/p>\n\n\n\n
  <\/script><\/p>\n\n\n\n
  <div id=”statsOverlay” style=”<\/p>\n\n\n\n
  position: fixed; top:0; left:0; width:100%; height:100%;<\/p>\n\n\n\n
  background: rgba(0,0,0,0.6); display:none;<\/p>\n\n\n\n
  justify-content:center; align-items:center;”><\/p>\n\n\n\n
  <div style=”<\/p>\n\n\n\n
    background:white; color:black; padding:25px; width:320px;<\/p>\n\n\n\n
    border-radius:15px; text-align:center;”><\/p>\n\n\n\n
    <h2 id=”statsName”><\/h2><\/p>\n\n\n\n
    <div id=”statsList”><\/div><\/p>\n\n\n\n
    <button onclick=”closeStats()” style=”<\/p>\n\n\n\n
      margin-top:15px; padding:8px 15px; border:none;<\/p>\n\n\n\n
      background:#ff4444; color:white; border-radius:8px; cursor:pointer;”><\/p>\n\n\n\n
      Close<\/p>\n\n\n\n
    <\/button><\/p>\n\n\n\n
  <\/div><\/p>\n\n\n\n
<\/div><\/p>\n\n\n\n
<div id=”searchStack”><\/div><\/p>\n\n\n\n
<\/body><\/p>\n\n\n\n
<\/html><\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
what i did today was make a pokemon website where you can look up all the pokemon and if you type all it will show all the pokemon in order in the pokedex and if you scroll it changes color if you want you make <!DOCTYPE html> <html lang=”en”> <head>   <meta charset=”UTF-8″>   <title>Pok\u00e9mon […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-32","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/posts\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":3,"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/posts\/32\/revisions"}],"predecessor-version":[{"id":36,"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/posts\/32\/revisions\/36"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/media?parent=32"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/categories?post=32"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/m_vicander\/wp-json\/wp\/v2\/tags?post=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}