英語学習アプリ

<!DOCTYPE html>
<html>
<head>
	<title>英語学習アプリ</title>
	<script>
		let words = {
			"apple": {
				"meaning": "りんご",
				"example": "I ate an apple for breakfast."
			},
			"cat": {
				"meaning": "猫",
				"example": "My sister has a cute cat."
			},
			"book": {
				"meaning": "本",
				"example": "I always carry a book in my bag."
			},
			"hello": {
				"meaning": "こんにちは",
				"example": "I greeted her with a big hello."
			},
			"dog": {
				"meaning": "犬",
				"example": "My dog loves to play fetch."
			}
		};

		function showWord() {
			let randomWord = Object.keys(words)[Math.floor(Math.random()*Object.keys(words).length)];
			document.getElementById("word").innerHTML = randomWord;
			document.getElementById("meaning").innerHTML = words[randomWord].meaning;
			document.getElementById("example").innerHTML = words[randomWord].example;
		}
	</script>
</head>
<body>
	<h1>英語学習アプリ</h1>
	<p id="word">ここに英単語が表示されます。</p>
	<p>意味： <span id="meaning">ここに意味が表示されます。</span></p>
	<p>例文： <span id="example">ここに例文が表示されます。</span></p>
	<button onclick="showWord()">次の単語を表示する</button>
</body>
</html>

（ジョーク）Why do programmers prefer dark mode? Because light attracts bugs.（「なぜプログラマーはダークモードが好きなのか？　光は虫を引き付けるので。」）