JavaScriptでの占いサイト

これから、予言を出力するサイトを作ります。このサイトにはボタンを設置し、クリックするとタイマーが起動し、毎0.1秒ごとに、ある div要素に、1からある最大値までの乱数を表示するようにしましょう。

そのdiv要素の下に別のボタンを設置し、サイトのユーザーがクリックするとタイマーを停止し、div内の数字を確定できるようにします。この数字が予言の番号となります。その後、その番号に対応する予言をユーザーに表示し、不要なボタンは画面から削除し、ユーザーが複数の予言を得られないようにします。つまり、1回のサイト訪問で1つの予言のみとします。

完成形のイメージは以下の通りです：

課題を解く際に使用できるHTML/CSSのコードは以下の通りです：

<div id="parent">
	<div id="timer">?</div>
	<div id="text"></div>
	<button id="start" class="active">自分の運勢を知る</button>
	<button id="stop">予言を受け取る</button>
</div>

#parent {
	text-align: center;
}
#parent > * {
	margin-bottom: 10px;
}

#timer {
	font-size: 18px;
}
#text {
	font-size: 17px;
	font-style: italic;
}

button {
	padding: 5px 10px;
	font-size: 15px;
	cursor: pointer;
}
button:not(.active) {
	display: none;
}

予言をどのように保存すると便利か、考えてみてください。

説明されたサイトを実装してください。

予言を2種類（良い予言と悪い予言）にし、悪い予言は赤色、良い予言は緑色で表示されるようにしてください。