Calculator Tools Calculator Tools
Create

Pokémon Guessing Game

Jan 7, 2024

About this app

Guess the Pokémon based on the National Dex number.

Pokémon Guessing Game Guess the Pokémon! Guess

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Pokémon Guessing Game</title>
<meta name="description" content="Guess the Pokémon based on the National Dex number.">
<meta name="keywords" content="Pokémon, National Dex, Guessing Game">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.

// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
// Function to handle the guessing game
function guessPokemon() {
var pokemonNumber = document.getElementById("pokemonNumber").value;

// Array of Pokémon names
var pokemonNames = [
"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"
];

// Check if the input is valid
if (pokemonNumber >= 1 && pokemonNumber <= pokemonNames.length) {
var pokemonName = pokemonNames[pokemonNumber - 1];
document.getElementById("result").innerHTML = "You are thinking of " + pokemonName + "!";
} else {
document.getElementById("result").innerHTML = "Please enter a valid Pokémon number.";
}
}

// Add event listener to the guess button
document.getElementById("guessButton").addEventListener("click", guessPokemon);
});

} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>

<style>
/* App CSS Goes Here */
body {
background-color: #f8f9fa;
font-family: 'Open Sans', sans-serif;
}

.container {
max-width: 500px;
margin: 100px auto;
text-align: center;
}

h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 30px;
}

.input-group {
margin-bottom: 20px;
}

.form-control {
border-radius: 50px;
}

.btn {
border-radius: 50px;
}

#result {
font-size: 20px;
font-weight: bold;
margin-top: 30px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Guess the Pokémon!</h1>
<div class="input-group">
<input type="number" id="pokemonNumber" class="form-control" placeholder="Enter National Dex Number">
<button id="guessButton" class="btn btn-primary">Guess</button>
</div>
<div id="result"></div>
</div>
</body>
</html>