Ennustussivusto JavaScriptillä

Nyt teemme sivuston, joka antaa ennustuksia. Olkoon tällä sivustolla painike, jota painamalla käynnistetään ajastin, joka tulostaa joka 0.1 sekunti johonkin div-elementiin satunnaisluvun 1:stä tiettyyn maksimiin.

Div-elementin alla olkoon toinen painike, jota painamalla sivustomme käyttäjä voi pysäyttää ajastimen ja kiinnittää tietyn luvun div-elementissä. Tämä luku on ennustuksen numero. Tämän jälkeen näytä käyttäjälle ennustus tällä numerolla, ja poista kaikki tarpeettomat painiket ruudulta, jotta käyttäjä ei voi saada toista ennustusta. Eli yhdellä sivustolle tulolla - yksi ennustus.

Tässä on malli siitä, minkä pitäisi saada:

Tässä on merkintäkieli, jota voit käyttää tehtävän ratkaisemisessa:

<div id="parent">
	<div id="timer">?</div>
	<div id="text"></div>
	<button id="start" class="active">selaa kohtaloasi</button>
	<button id="stop">saat ennustuksen</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;
}

Suunnittele, kuinka ennustuksia on kätevä tallentaa.

Toteuta kuvattu sivusto.

Tee niin, että ennustuksia on kahta tyyppiä: hyviä ja huonoja. Tee niin, että huonet väritetään punaiseksi, ja hyvät - vihreäksi.