https://github.com/devtakkekar/pokemon-tcg-explorer

A Pokémon TCG Card Explorer
https://github.com/devtakkekar/pokemon-tcg-explorer

api css html javascript pokemon poketcg tcg

Last synced: about 2 months ago
JSON representation

A Pokémon TCG Card Explorer

• Host: GitHub
• URL: https://github.com/devtakkekar/pokemon-tcg-explorer
• Owner: devtakkekar
• Created: 2025-05-25T08:55:56.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-05-25T11:10:21.000Z (about 1 year ago)
• Last Synced: 2025-06-28T18:44:08.313Z (12 months ago)
• Topics: api, css, html, javascript, pokemon, poketcg, tcg
• Language: JavaScript
• Homepage: https://devtakkekar.github.io/pokemon-tcg-explorer/
• Size: 14.6 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Pokémon TCG Explorer

A simple web application built with HTML, CSS, and JavaScript that allows users to explore Pokémon Trading Card Game cards using the PokéTCG API.

## Preview

![image](https://github.com/user-attachments/assets/57510071-b2b4-4441-80e2-af60c8cc7ccc)

![image](https://github.com/user-attachments/assets/497ec73b-63b4-4284-b490-a3b2b5f0f2cc)

## Features:

- **Search:** Find cards by name.

- **Filtering**: Filter cards by set and type.

- **Sorting:** Sort cards by rarity and price using server-side sorting via the API. Includes interactive sort direction arrows.

- **Price Display with Currency Conversion:** View card prices and convert them between USD and INR. Your currency preference is saved.

- **Card Details Modal**: Click on a card to view a larger image.

- **Infinite Scroll:** Automatically loads more cards as you scroll down the page.

- **Responsive Design**: Layout adjusts for different screen sizes.

- **Interactive Search Button:** Includes a star animation effect on hover.

- Displays card rarity with custom colored icons based on rarity level.

## Technologies Used:

- HTML

- CSS (including custom styles for animations and layout)

- JavaScript (fetching data, DOM manipulation, event handling, state management)

- [PokéTCG API](https://pokemontcg.io/ "PokéTCG API") for card data.

- [ExchangeRate-API](https://www.exchangerate-api.com/ "ExchangeRate-API") for currency exchange rates.