🎴Pokémon Card Pack Opener

📝 Description

This project is a simple interactive Pokémon card pack opener built using HTML, CSS, and JavaScript. It simulates the experience of opening a Pokémon booster pack by randomly generating and displaying a set of cards when the user clicks on the pack image.

The application dynamically creates card elements in the browser and assigns random images to simulate common and rare cards, similar to a real trading card pack.

🚀 Features

Click on a Pokémon pack to open it Automatically generates 11 random cards The last card in the pack is always a rare card Cards are dynamically created using JavaScript (DOM manipulation) Previous cards are cleared before opening a new pack Simple and responsive layout

🛠️ Technologies Used

HTML5 – Structure of the web page CSS3 – Styling and layout JavaScript (Vanilla JS) – Logic, random generation, and DOM manipulation

📊 How It Works

The user clicks on the Pokémon pack image. A JavaScript function (openPack) is triggered. The program removes any previously displayed cards. It generates 11 new cards: Cards 1–10 are selected randomly from common cards. Card 11 is selected randomly from rare cards.

🎯 Objectives

This project demonstrates:

DOM manipulation Event handling in JavaScript Random number generation Dynamic element creation Basic front-end project structure

📈 Improvements

Possible enhancements include:

Add card rarity system (Common, Uncommon, Rare, Ultra Rare) Add animations when opening the pack Add sound effects Display card names and stats Track collection history Add multiple pack types Use an API (e.g., Pokémon TCG API)