JavaScript로 만드는 예언 사이트

지금부터 예언을 해주는 사이트를 만들어 보겠습니다. 이 사이트에는 버튼이 있고, 이 버튼을 누르면 타이머가 시작됩니다. 이 타이머는 0.1초마다 어떤 div에 1부터 특정 최대값까지의 난수를 출력합니다.

div 아래에는 다른 버튼을 배치하여, 사이트 사용자가 타이머를 멈추고 div에 나타난 특정 숫자를 고정할 수 있게 합니다. 이 숫자는 예언의 번호가 됩니다. 그 후, 사용자에게 해당 번호의 예언을 보여주고, 사용자가 또 다른 예언을 얻지 못하도록 불필요한 버튼은 모두 화면에서 제거합니다. 즉, 사이트 방문 한 번에 예언 하나만 가능합니다.

다음은 완성된 결과물의 예시입니다:

다음은 문제 해결에 사용할 수 있는 마크업입니다:

<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;
}

예언들을 어떻게 저장하는 것이 편리한지 고민해 보세요.

설명된 사이트를 구현하세요.

예언을 좋은 예언과 나쁜 예언 두 종류로 만들어 보세요. 나쁜 예언은 빨간색으로, 좋은 예언은 초록색으로 표시되도록 하세요.