diff --git a/README.md b/README.md index 93a078d..5ce6166 100644 --- a/README.md +++ b/README.md @@ -1 +1,26 @@ -# hello-world \ No newline at end of file +# Random Pokémon Generator + +A simple web app that displays a random Pokémon from the original 151 Pokémon (Generation 1). + +## Features + +- Displays a random Pokémon with its Pokédex number +- Beautiful gradient design with smooth animations +- Responsive layout that works on mobile and desktop +- Click the button to generate a new random Pokémon + +## How to Use + +1. Open `index.html` in your web browser +2. Click the "Generate Random Pokémon" button to see a random Pokémon +3. A random Pokémon will also be displayed when the page first loads + +## Files + +- `index.html` - Main HTML structure +- `style.css` - Styling and animations +- `script.js` - JavaScript logic with all 151 Pokémon + +## Pokémon Included + +All original 151 Pokémon from Generation 1 (Bulbasaur to Mew) \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..d05d08f --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + + + + Random Pokémon Generator + + + +
+

Random Pokémon Generator

+

Original 151 Pokémon

+ +
+
+
+
+
+
+
+ +
+
???
+
Spin the wheel!
+
+ + + +
+

Total Pokémon: 151

+
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..0a3983c --- /dev/null +++ b/script.js @@ -0,0 +1,201 @@ +// Array of all original 151 Pokémon +const pokemon = [ + "Bulbasaur", + "Ivysaur", + "Venusaur", + "Charmander", + "Charmeleon", + "Charizard", + "Squirtle", + "Wartortle", + "Blastoise", + "Caterpie", + "Metapod", + "Butterfree", + "Weedle", + "Kakuna", + "Beedrill", + "Pidgey", + "Pidgeotto", + "Pidgeot", + "Rattata", + "Raticate", + "Spearow", + "Fearow", + "Ekans", + "Arbok", + "Pikachu", + "Raichu", + "Sandshrew", + "Sandslash", + "Nidoran♀", + "Nidorina", + "Nidoqueen", + "Nidoran♂", + "Nidorino", + "Nidoking", + "Clefairy", + "Clefable", + "Vulpix", + "Ninetales", + "Jigglypuff", + "Wigglytuff", + "Zubat", + "Golbat", + "Oddish", + "Gloom", + "Vileplume", + "Paras", + "Parasect", + "Venonat", + "Venomoth", + "Diglett", + "Dugtrio", + "Meowth", + "Persian", + "Psyduck", + "Golduck", + "Mankey", + "Primeape", + "Growlithe", + "Arcanine", + "Poliwag", + "Poliwhirl", + "Poliwrath", + "Abra", + "Kadabra", + "Alakazam", + "Machop", + "Machoke", + "Machamp", + "Bellsprout", + "Weepinbell", + "Victreebel", + "Tentacool", + "Tentacruel", + "Geodude", + "Graveler", + "Golem", + "Ponyta", + "Rapidash", + "Slowpoke", + "Slowbro", + "Magnemite", + "Magneton", + "Farfetch'd", + "Doduo", + "Dodrio", + "Seel", + "Dewgong", + "Grimer", + "Muk", + "Shellder", + "Cloyster", + "Gastly", + "Haunter", + "Gengar", + "Onix", + "Drowzee", + "Hypno", + "Krabby", + "Kingler", + "Voltorb", + "Electrode", + "Exeggcute", + "Exeggutor", + "Cubone", + "Marowak", + "Hitmonlee", + "Hitmonchan", + "Lickitung", + "Koffing", + "Weezing", + "Rhyhorn", + "Rhydon", + "Chansey", + "Tangela", + "Kangaskhan", + "Horsea", + "Seadra", + "Goldeen", + "Seaking", + "Staryu", + "Starmie", + "Mr. Mime", + "Scyther", + "Jynx", + "Electabuzz", + "Magmar", + "Pinsir", + "Tauros", + "Magikarp", + "Gyarados", + "Lapras", + "Ditto", + "Eevee", + "Vaporeon", + "Jolteon", + "Flareon", + "Porygon", + "Omanyte", + "Omastar", + "Kabuto", + "Kabutops", + "Aerodactyl", + "Snorlax", + "Articuno", + "Zapdos", + "Moltres", + "Dratini", + "Dragonair", + "Dragonite", + "Mewtwo", + "Mew" +]; + +// Get DOM elements +const generateBtn = document.getElementById('generate-btn'); +const pokemonNameEl = document.getElementById('pokemon-name'); +const pokemonNumberEl = document.getElementById('pokemon-number'); +const pokemonWheel = document.getElementById('pokemon-wheel'); + +let isSpinning = false; + +// Function to spin the wheel and generate random Pokémon +function spinWheel() { + if (isSpinning) return; + + isSpinning = true; + generateBtn.disabled = true; + + // Add spinning class to wheel + pokemonWheel.classList.add('spinning'); + + // Generate random Pokémon + const randomIndex = Math.floor(Math.random() * pokemon.length); + const randomPokemon = pokemon[randomIndex]; + const pokemonNumber = randomIndex + 1; // Pokédex number (1-indexed) + + // Wait for spin animation to complete (2 seconds) + setTimeout(() => { + // Remove spinning class + pokemonWheel.classList.remove('spinning'); + + // Show the result with animation + const card = document.getElementById('pokemon-display'); + card.style.transform = 'scale(0.95)'; + + setTimeout(() => { + pokemonNameEl.textContent = randomPokemon; + pokemonNumberEl.textContent = `#${pokemonNumber.toString().padStart(3, '0')}`; + card.style.transform = 'scale(1)'; + + // Re-enable button + isSpinning = false; + generateBtn.disabled = false; + }, 200); + }, 2000); +} + +// Event listener for button click +generateBtn.addEventListener('click', spinWheel); diff --git a/style.css b/style.css new file mode 100644 index 0000000..6c4a200 --- /dev/null +++ b/style.css @@ -0,0 +1,231 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; +} + +.container { + background: white; + border-radius: 20px; + padding: 40px; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); + max-width: 500px; + width: 100%; + text-align: center; +} + +h1 { + color: #333; + margin-bottom: 10px; + font-size: 2.5em; +} + +.subtitle { + color: #666; + margin-bottom: 30px; + font-size: 1.1em; +} + +.wheel-container { + margin: 30px 0; + display: flex; + justify-content: center; + align-items: center; +} + +.pokemon-wheel { + width: 200px; + height: 200px; + position: relative; + transition: transform 0.1s ease-out; +} + +.wheel-inner { + width: 100%; + height: 100%; + border-radius: 50%; + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); + display: flex; + justify-content: center; + align-items: center; + position: relative; + overflow: hidden; +} + +.wheel-inner::before { + content: ''; + position: absolute; + width: 80%; + height: 80%; + border-radius: 50%; + background: linear-gradient(135deg, #764ba2 0%, #667eea 50%, #f5576c 100%); + animation: pulse 2s ease-in-out infinite; +} + +.pokeball { + width: 60px; + height: 60px; + background: white; + border-radius: 50%; + position: relative; + z-index: 2; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); +} + +.pokeball::before { + content: ''; + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 4px; + background: #333; + transform: translateY(-50%); +} + +.pokeball::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 16px; + height: 16px; + background: white; + border: 4px solid #333; + border-radius: 50%; +} + +.pokemon-wheel.spinning { + animation: spin 2s cubic-bezier(0.17, 0.67, 0.35, 0.96); +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(1440deg); + } +} + +@keyframes pulse { + 0%, 100% { + transform: scale(1); + opacity: 0.8; + } + 50% { + transform: scale(1.05); + opacity: 1; + } +} + +.pokemon-card { + background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); + border-radius: 15px; + padding: 40px 30px; + margin: 30px 0; + min-height: 180px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + transition: transform 0.3s ease; +} + +.pokemon-card:hover { + transform: translateY(-5px); +} + +.pokemon-number { + color: rgba(255, 255, 255, 0.8); + font-size: 1.2em; + font-weight: bold; + margin-bottom: 10px; +} + +.pokemon-name { + color: white; + font-size: 2.5em; + font-weight: bold; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); +} + +.generate-btn { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + border: none; + border-radius: 50px; + padding: 15px 40px; + font-size: 1.2em; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); +} + +.generate-btn:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); +} + +.generate-btn:active { + transform: translateY(0); +} + +.generate-btn:disabled { + opacity: 0.6; + cursor: not-allowed; + transform: none; +} + +.stats { + margin-top: 30px; + color: #666; + font-size: 1em; +} + +.stats span { + font-weight: bold; + color: #667eea; +} + +@media (max-width: 600px) { + .container { + padding: 30px 20px; + } + + h1 { + font-size: 2em; + } + + .pokemon-wheel { + width: 150px; + height: 150px; + } + + .pokeball { + width: 45px; + height: 45px; + } + + .pokemon-name { + font-size: 2em; + } + + .generate-btn { + padding: 12px 30px; + font-size: 1em; + } +}