ポケモン図鑑

ポケモンの図鑑番号を入力してください（1~893）:
以下が実際のプログラムです。ポケモンの画像は、公式のポケモンサイトから引用しています。

```html
<!DOCTYPE html>
<html>
<head>
	<title>ポケモン図鑑</title>

	<style type="text/css">
		img {
			max-width: 100%;
			height: auto;
		}
	</style>

	<script type="text/javascript">
		function searchPokemon() {
			var pokedexNumber = document.getElementById('pokedexNumber').value;

			if (pokedexNumber < 1 || pokedexNumber > 893) {
				alert("ポケモン図鑑には1から893までのポケモンが登録されています。正しい番号を入力してください。");
				return;
			}

			var xhr = new XMLHttpRequest();
			var url = "https://pokeapi.co/api/v2/pokemon/" + pokedexNumber;

			xhr.open('GET', url, true);

			xhr.onload = function() {
				var pokemonData = JSON.parse(xhr.responseText);

				document.getElementById('pokemonName').innerHTML = pokemonData.name.charAt(0).toUpperCase() + pokemonData.name.slice(1);
				document.getElementById('pokemonImage').src = pokemonData.sprites.front_default;
			}

			xhr.send();
		}
	</script>

</head>
<body>
	<h1>ポケモン図鑑</h1>

	<p>
		<label for="pokedexNumber">ポケモンの図鑑番号を入力してください（1~893）: </label>
		<input type="number" id="pokedexNumber" min="1" max="893" value="1">
		<button onclick="searchPokemon()">検索</button>
	</p>

	<div>
		<h2 id="pokemonName"></h2>
		<img id="pokemonImage" src="">
	</div>
</body>
</html>
```

ここで、「ポケモン図鑑には1から893までのポケモンが登録されています」というエラーメッセージが出るようにしています。また、APIから取得したポケモン名を先頭を大文字にして表示するようにしています。

このアプリを使って面白いジョークとして、「見せていただいたそのポケモンの図鑑番号は…うん、そうですね。え、ポケモンはわからないんですか？図鑑番号だけしか持っていないってことでしょうか。」という台詞を出すことができます。