Pokedex

Deliverables

Figma Wireframes
Web Application using HTML, CSS and JavaScript
Custom UI Elements and Animations

Project Description

This capstone web app is a responsive, single‑page Pokedex built with HTML, CSS, and vanilla JavaScript on top of the public PokeAPI.

It was designed to be as playful and polished as the Pokémon universe itself. From the clean, grid‑based layout to the subtle hover interactions, every design detail was crafted to delight users: uncaught Pokémon appear in greyscale, hinting at the thrill of discovery; hovering partially restores color to tease what’s to come; and clicking the Pokéball icon “catches” a Pokémon (saved to localStorage) — filling the sprite with full color and activating a red‑dot indicator inside the ball. Clicking "more details" brings up a full‑screen overlay with a larger official artwork and key stats, while a “More” button smoothly appends the next batch of 20. The cohesive color palette, rounded‑corner cards, and custom Pokéball animations all reinforce a clean, game‑inspired aesthetic.

Live Website GitHub Code

Pokedex Website Design using Figma, HTML, CSS and Javascript

Goal

Design and develop a Pokedex application that not only demonstrates advanced DOM manipulation and Fetch API skills, but also delivers a clean, game‑inspired UX — leveraging greyscale‑to‑color transitions, animated Pokéball interactions, and intuitive catch/release mechanics to engage users and bring the Pokémon world to life online.

Approach

I began with a sitemap and wireframe to define the core screens: the Pokémon grid, detail overlay, and caught‑list view. The color scheme was chosen to mimic classic Pokéball reds and game menus, while CSS filters and transitions enabled greyscale‑to‑color effects on hover. In JavaScript, fetch() retrieves paginated Pokémon data and parses IDs to build sprite URLs. Event listeners manage “catch,” “release,” and “More” actions, updating the UI and persisting caught status in localStorage. Custom CSS animations make the Pokéball icon “open” on hover and display a red center when active — mirroring the franchise’s iconic visuals. Throughout, I iterated on spacing, card shadows, and responsive breakpoints to keep the design crisp across devices.

Challenges

Bringing these playful interactions to life meant juggling complex JavaScript and CSS work. I had to layer CSS filters and transitions just right to achieve the greyscale‑to‑color hover tease and Pokéball open/close animations without conflicts. On the JavaScript side, fetching batches of Pokémon asynchronously and wiring up click events to catch or release them required careful promise handling and breaking the code into focused functions.

Results

The final Pokedex is a fully responsive, single‑page app that never reloads and delights users with its clean, game‑inspired design. Greyscale hover teasers, color‑restoring catch animations, and authentic Pokéball interactions create an immersive experience, while the overlay detail view and “More” pagination keep exploration seamless. This project reinforced my skills in DOM manipulation, the Fetch API, and localStorage — and proves how playful, thoughtful design patterns can transform a technical demo into a truly engaging UX.