From 747bab2cce194c0a7156588fbe15d7fb0334dcd9 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 10 Jan 2026 17:03:24 +0000 Subject: [PATCH 1/2] =?UTF-8?q?Add=20random=20Pok=C3=A9mon=20generator=20w?= =?UTF-8?q?eb=20app?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Created a simple web application that displays a random Pokémon from the original 151 Generation 1 Pokémon. The app includes: - HTML page with clean, modern UI - CSS styling with gradient design and animations - JavaScript logic with complete list of all 151 Pokémon - Random generation with Pokédex numbers - Responsive design for mobile and desktop - Updated README with project documentation --- README.md | 27 +++++++- index.html | 28 ++++++++ script.js | 184 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 120 ++++++++++++++++++++++++++++++++++ 4 files changed, 358 insertions(+), 1 deletion(-) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css 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..dd5c415 --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ + + + + + + Random Pokémon Generator + + + +
+

Random Pokémon Generator

+

Original 151 Pokémon

+ +
+
???
+
Click the button to generate!
+
+ + + +
+

Total Pokémon: 151

+
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..f3869d5 --- /dev/null +++ b/script.js @@ -0,0 +1,184 @@ +// 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'); + +// Function to generate random Pokémon +function generateRandomPokemon() { + const randomIndex = Math.floor(Math.random() * pokemon.length); + const randomPokemon = pokemon[randomIndex]; + const pokemonNumber = randomIndex + 1; // Pokédex number (1-indexed) + + // Add animation effect + 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)'; + }, 100); +} + +// Event listener for button click +generateBtn.addEventListener('click', generateRandomPokemon); + +// Optional: Generate a Pokémon on page load +window.addEventListener('load', () => { + generateRandomPokemon(); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..41ea289 --- /dev/null +++ b/style.css @@ -0,0 +1,120 @@ +* { + 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; +} + +.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); +} + +.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-name { + font-size: 2em; + } + + .generate-btn { + padding: 12px 30px; + font-size: 1em; + } +} From 7ebe8ea91ec9fea24b62335a1b078758e2a12f8e Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 10 Jan 2026 20:02:56 +0000 Subject: [PATCH 2/2] =?UTF-8?q?Add=20spinning=20wheel=20animation=20to=20P?= =?UTF-8?q?ok=C3=A9mon=20generator?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Updated the app with a spinning wheel interface: - Added visual spinning wheel with Pokéball design - Wheel spins 4 full rotations (1440 degrees) over 2 seconds - Button is disabled during spin to prevent multiple clicks - Removed auto-generation on page load - now shows default state - Changed button text to "Spin the Wheel!" - Added pulsing animation to wheel background - Responsive design for mobile devices with smaller wheel - Result displays after spin animation completes --- index.html | 12 +++++- script.js | 49 +++++++++++++++-------- style.css | 111 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 154 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index dd5c415..d05d08f 100644 --- a/index.html +++ b/index.html @@ -11,12 +11,20 @@

Random Pokémon Generator

Original 151 Pokémon

+
+
+
+
+
+
+
+
???
-
Click the button to generate!
+
Spin the wheel!
- +

Total Pokémon: 151

diff --git a/script.js b/script.js index f3869d5..0a3983c 100644 --- a/script.js +++ b/script.js @@ -157,28 +157,45 @@ const pokemon = [ const generateBtn = document.getElementById('generate-btn'); const pokemonNameEl = document.getElementById('pokemon-name'); const pokemonNumberEl = document.getElementById('pokemon-number'); +const pokemonWheel = document.getElementById('pokemon-wheel'); -// Function to generate random Pokémon -function generateRandomPokemon() { +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) - // Add animation effect - const card = document.getElementById('pokemon-display'); - card.style.transform = 'scale(0.95)'; - + // Wait for spin animation to complete (2 seconds) setTimeout(() => { - pokemonNameEl.textContent = randomPokemon; - pokemonNumberEl.textContent = `#${pokemonNumber.toString().padStart(3, '0')}`; - card.style.transform = 'scale(1)'; - }, 100); + // 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', generateRandomPokemon); - -// Optional: Generate a Pokémon on page load -window.addEventListener('load', () => { - generateRandomPokemon(); -}); +generateBtn.addEventListener('click', spinWheel); diff --git a/style.css b/style.css index 41ea289..6c4a200 100644 --- a/style.css +++ b/style.css @@ -36,6 +36,101 @@ h1 { 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; @@ -89,6 +184,12 @@ h1 { transform: translateY(0); } +.generate-btn:disabled { + opacity: 0.6; + cursor: not-allowed; + transform: none; +} + .stats { margin-top: 30px; color: #666; @@ -109,6 +210,16 @@ h1 { font-size: 2em; } + .pokemon-wheel { + width: 150px; + height: 150px; + } + + .pokeball { + width: 45px; + height: 45px; + } + .pokemon-name { font-size: 2em; }