'%3e%3cg%20id='LOGO'%3e%3cpath%20d='M218.682,452.163L111.153,452.304L111.153,374.157L484.347,374.157L484.347,452.304C450.657,452.257%20432.581,452.21%20376.881,452.163'%20style='fill:none;stroke:rgb(0,171,169);stroke-width:14.7px;'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
'%3e%3cg%20id='LOGO'%3e%3cpath%20d='M1439.38,212.633L1439.38,276.743L1041.14,276.743L1041.14,212.633L1439.38,212.633ZM1435.22,216.8L1045.3,216.8L1045.3,272.577L1435.22,272.577L1435.22,216.8Z'%20style='fill:rgb(0,171,169);'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
Vanilla Javascript // API Integration // Interactive UI
Javascript Web App
Pokedex
A responsive JavaScript web app that fetches Pokemon data from an external API, displays a searchable list and opens detailed information in modal views.
Overview
Pokedex is an interactive web application built with JavaScript, HTML and CSS that allows users to browse Pokemon data and inspect additional details through modal views. The app uses an external Pokemon API to create a dynamic and user-friendly browsing experience.
Users can view a list of Pokemon, search for specific entries and open detailed information such as type, abilities and stats. The interface was designed to stay responsive across devices and to work consistently in major web browsers.
As one of the earlier projects from my training, it captures an important stage in my learning process. It focuses on frontend fundamentals such as API integration, DOM updates, responsive layout and clean JavaScript structure before moving into larger frameworks.
Key Features
Fetch Pokemon data from an external REST APIDisplay a list of Pokemon with basic informationSearch and browse the list in the browserOpen a modal with type, abilities and stats for each PokemonUse a responsive layout across different devices and screen sizesKeep the project compatible with major web browsers
Core Stack
JavascriptHTMLCSSBootstrapjQueryREST API
Build Focus
API integrationDOM interactionResponsive interfaceClean frontend fundamentals
Core Functionality
- Fetch Pokemon data from an external RESTful API.
- Render a list of Pokemon with their basic information.
- Allow users to search and browse the list in the browser.
- Open modal views with additional details such as type, abilities and stats.
- Keep the layout responsive across multiple screen sizes.
Technologies & Frontend Basics
- Built with JavaScript, HTML and CSS as a core frontend fundamentals project.
- Used Bootstrap and jQuery to support layout, responsiveness and UI interactions.
- Used ESLint to keep the codebase cleaner and reinforce JavaScript best practices.
- Included Google Fonts and social footer icons as part of the visual presentation.
Why The Project Matters
- Demonstrates API integration and dynamic UI updates without relying on a frontend framework.
- Shows practical work with modals, search behaviour and responsive interface design.
- Represents an early but important learning stage in my frontend development process.
Tools & Libraries
BootstrapjQueryGoogle FontsESLintGitHub Pages