Pokédex - First 50 Pokémon

Pokédex

Select a Pokémon to see details

body { margin: 0; font-family: 'Segoe UI', Arial, sans-serif; background: #f2f2f2; color: #222; } .pokedex-container { max-width: 900px; margin: 30px auto; background: #fff; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.12); overflow: hidden; display: flex; flex-direction: column; min-height: 80vh; } header { background: linear-gradient(90deg, #ef5350 60%, #fbc531 100%); color: #fff; padding: 24px 32px 16px 32px; display: flex; flex-direction: column; gap: 12px; } header h1 { margin: 0; font-size: 2.2rem; letter-spacing: 2px; font-weight: 700; } #search { padding: 8px 14px; border-radius: 8px; border: none; font-size: 1rem; width: 100%; max-width: 350px; outline: none; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } main { display: flex; flex: 1; min-height: 0; } .pokemon-list { width: 260px; background: #f7f7f7; border-right: 1px solid #e0e0e0; overflow-y: auto; padding: 0; margin: 0; list-style: none; } .pokemon-list ul { padding: 0; margin: 0; list-style: none; } .pokemon-list li { display: flex; align-items: center; gap: 12px; padding: 10px 18px; cursor: pointer; border-bottom: 1px solid #ececec; transition: background 0.15s; font-size: 1.05rem; } .pokemon-list li.selected, .pokemon-list li:hover { background: #ffe082; } .pokemon-list img { width: 48px; height: 48px; image-rendering: pixelated; background: #fff; border-radius: 50%; border: 1px solid #e0e0e0; } .pokemon-details { flex: 1; padding: 32px 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; } .pokemon-details .placeholder { color: #aaa; font-size: 1.2rem; } .pokemon-details .details-card { width: 100%; max-width: 420px; background: #fafafa; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.07); padding: 32px 24px 24px 24px; display: flex; flex-direction: column; align-items: center; animation: fadeIn 0.4s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px);} to { opacity: 1; transform: none;} } .details-card .poke-sprite { width: 120px; height: 120px; margin-bottom: 12px; image-rendering: pixelated; background: #fff; border-radius: 50%; border: 2px solid #e0e0e0; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .details-card h2 { margin: 0 0 6px 0; font-size: 2rem; text-transform: capitalize; letter-spacing: 1px; font-weight: 700; color: #ef5350; } .details-card .poke-id { color: #888; font-size: 1.1rem; margin-bottom: 10px; } .details-card .types { display: flex; gap: 10px; margin-bottom: 18px; } .type-badge { padding: 4px 12px; border-radius: 12px; font-size: 0.95rem; color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.12); background: #888; text-transform: capitalize; box-shadow: 0 1px 4px rgba(0,0,0,0.07); } /* Type colors */ .type-badge.grass { background: #78c850; } .type-badge.fire { background: #f08030; } .type-badge.water { background: #6890f0; } .type-badge.bug { background: #a8b820; } .type-badge.normal { background: #a8a878; } .type-badge.poison { background: #a040a0; } .type-badge.electric { background: #f8d030; color: #222;} .type-badge.ground { background: #e0c068; color: #222;} .type-badge.fairy { background: #ee99ac; color: #222;} .type-badge.fighting { background: #c03028; } .type-badge.psychic { background: #f85888; } .type-badge.rock { background: #b8a038; } .type-badge.ghost { background: #705898; } .type-badge.ice { background: #98d8d8; color: #222;} .type-badge.dragon { background: #7038f8; } .type-badge.steel { background: #b8b8d0; color: #222;} .type-badge.flying { background: #a890f0; color: #222;} .details-card .stats { width: 100%; margin-top: 10px; } .stat-row { display: flex; align-items: center; margin-bottom: 7px; font-size: 1rem; } .stat-label { width: 90px; color: #666; font-weight: 500; text-transform: capitalize; } .stat-bar-bg { flex: 1; height: 12px; background: #e0e0e0; border-radius: 8px; margin: 0 10px; overflow: hidden; position: relative; } .stat-bar { height: 100%; border-radius: 8px; background: linear-gradient(90deg, #ef5350 60%, #fbc531 100%); transition: width 0.4s; } .stat-value { width: 36px; text-align: right; color: #333; font-weight: 600; } @media (max-width: 700px) { .pokedex-container { max-width: 100vw; border-radius: 0; } main { flex-direction: column; } .pokemon-list { width: 100vw; max-height: 180px; border-right: none; border-bottom: 1px solid #e0e0e0; flex-shrink: 0; overflow-x: auto; overflow-y: hidden; display: flex; flex-direction: row; } .pokemon-list ul { display: flex; flex-direction: row; width: max-content; } .pokemon-list li { flex-direction: column; align-items: center; min-width: 90px; border-bottom: none; border-right: 1px solid #ececec; font-size: 0.95rem; padding: 10px 6px; } .pokemon-details { padding: 18px 6px; } } // Fetches and displays the first 50 Pokémon with animation and stats const POKE_API = 'https://pokeapi.co/api/v2/pokemon/'; const POKEMON_COUNT = 50; const pokemonListEl = document.getElementById('pokemon-list'); const pokemonDetailsEl = document.getElementById('pokemon-details'); const searchInput = document.getElementById('search'); let allPokemon = []; let filteredPokemon = []; let selectedId = null; // Utility: Capitalize first letter function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1); } // Utility: Pad ID with zeros function padId(id) { return id.toString().padStart(3, '0'); } // Fetch the first 50 Pokémon (basic info) async function fetchPokemonList() { const res = await fetch(`${POKE_API}?limit=${POKEMON_COUNT}`); const data = await res.json(); return data.results.map((poke, idx) => ({ name: poke.name, id: idx + 1, url: poke.url })); } // Fetch full details for a Pokémon by ID async function fetchPokemonDetails(id) { const res = await fetch(`${POKE_API}${id}`); return await res.json(); } // Render the Pokémon list function renderPokemonList(list) { let html = '

#${padId(poke.id)}
${capitalize(poke.name)}

'; pokemonListEl.innerHTML = html; // Add click listeners document.querySelectorAll('.pokemon-list li').forEach(li => { li.addEventListener('click', () => { const id = Number(li.getAttribute('data-id')); selectPokemon(id); }); }); } // Render Pokémon details function renderPokemonDetails(poke) { const types = poke.types.map(t => ` ${t.type.name} `).join(''); // Use animated sprite if available, fallback to static const animatedSprite = poke.sprites.versions['generation-v']['black-white'].animated.front_default || poke.sprites.front_default; const stats = poke.stats.map(stat => { // Max base stat in Gen 1-8 is 255, but most are below 150 const percent = Math.min(stat.base_stat / 150, 1) * 100; return `

${stat.stat.name.replace('special-', 'Sp. ')}

${stat.base_stat}

`; }).join(''); pokemonDetailsEl.innerHTML = `

${capitalize(poke.name)}

#${padId(poke.id)}

${types}

${stats}

`; } // Show placeholder function showPlaceholder() { pokemonDetailsEl.innerHTML = `

Select a Pokémon to see details

`; } // Select a Pokémon by ID async function selectPokemon(id) { selectedId = id; renderPokemonList(filteredPokemon); pokemonDetailsEl.innerHTML = `

`; try { const poke = await fetchPokemonDetails(id); renderPokemonDetails(poke); } catch (e) { pokemonDetailsEl.innerHTML = `

Failed to load Pokémon details.

`; } } // Filter Pokémon by search function filterPokemon(query) { query = query.trim().toLowerCase(); if (!query) return allPokemon; return allPokemon.filter(poke => poke.name.includes(query) || padId(poke.id).includes(query) || poke.id.toString() === query ); } // Handle search input searchInput.addEventListener('input', e => { filteredPokemon = filterPokemon(e.target.value); renderPokemonList(filteredPokemon); showPlaceholder(); selectedId = null; }); // Initial load async function init() { allPokemon = await fetchPokemonList(); filteredPokemon = allPokemon; renderPokemonList(filteredPokemon); showPlaceholder(); } init();