🧪A Pokédex Built with JavaScript

#javascript #api #html #css

As part of the Software Engineering Transform course at Academy Xi, I built a Pokédex web app as my Phase-1 project. The app fetches data from the PokeAPI and displays the original 151 Pokémon, complete with images, types, and descriptions.

🔗 View the project on GitHub

🌐 Have a go!

🎥 Getting Started

I followed a great tutorial by Kenny Yip Coding (YouTube link) to help set up the initial structure. From there, I built on it using what I’ve learned in the course—adding functionality like search, filtering, and a favourites system.

🛠 Tech & Features

⚙️ HTML + CSS + JavaScript

The app is built using vanilla JS. It loads all 151 OG Pokémon at once, with Bulbasaur displayed by default. Clicking on a Pokémon updates the main view with its image, name, type, and a short description.

🔍 Search by Name or Number

Users can search for a Pokémon using either its name or Pokédex number. If no match is found, an error message appears and the input clears.

🧪 Filter by Type

A dropdown lets users filter Pokémon by their type (e.g., Grass, Fire, Water).

❤️ Favourites (Add/Remove)

Each Pokémon has a heart icon beside its name. Clicking it adds or removes the Pokémon from a favourites list displayed on the page. Favourites are saved using localStorage so they persist between sessions.

😎 Styling Touches

Added hover effects to make the UI feel more dynamic
Applied colour-coded badges based on Pokémon type
Highlighted the selected Pokémon in both the main list and favourites for better UX

I learned heaps during this project—especially how to structure an app, interact with APIs, and manage DOM updates. It’s been really rewarding to see the features come together, and I’m excited to keep building on this foundation in future projects.

Thanks for reading! I’d love any feedback, especially around improving the code or refining features.