Pokédex -- JavaScript, HTML, CSS & Tailwind

A modern, fully self-built Pokédex, created with:

• JavaScript (no frameworks)
• HTML
• TailwindCSS as the complete styling framework
• Structured components (Modal, Navbar, Loader, Cards)

---

Features

Search

Live search filters Pokémon as you type.

Type Filter

Select one Pokémon type (Fire, Water, Electric ...).

↕ Sorting

Sort the Pokémon list by: - Name\

• Weight\
• Height

Pagination

Navigate through the list using Next / Previous buttons.

Modal View

Clicking a Pokémon opens a detailed modal showing: - Official artwork\

• Height & weight\
• Abilities\
• Base stats (bar display)\
• Dynamic evolution chain (loaded via API)

Page Loader

Smooth loading animation when switching pages.

TailwindCSS Styling

The entire UI is styled using TailwindCSS utility classes ---
no custom CSS required.

---

Data Source

This project uses real Pokémon data from the PokéAPI:
https://pokeapi.co/

---

Project Structure

/js
  script.js
  modal.js
  loader.js
  navbar.js
  seaching.js
  tailwind.js
  template.js

/public
  input.css
  output.css  (generated)
  style.css
  style2.css

index.html
type-site.html
about.html
package.json
package-lock.json
script.js
README.md

---

Installation

1. Clone the repository

git clone https://github.com/yourname/pokedex

2. Open the project

Open index.html directly in your browser.

3. (Optional) Build TailwindCSS

npm install
npx tailwindcss -i ./tailwind/input.css -o ./tailwind/output.css --watch

---

Technologies Used

Technology Purpose

---

HTML Page structure TailwindCSS Complete UI styling JavaScript API logic, modal, pagination, filters PokéAPI Pokémon data source

---

Project Goals

• Practice working with APIs and real database data\
• Created for learning and training purposes\
• Clean separation of logic and layout\
• Uses real API data\
• Fully styled with TailwindCSS

---

License

MIT --- usage allowed with permission.