# Nappi — DOM Events and State in Tampio
#
# Tampio handles async interactions through DOM event handlers.
# The key pattern is "X:tä painettaessa käyköön niin, että ..."
# which attaches a click handler to a button element.
#
# State is stored in a "muuttuja" (variable object with an "arvo" field).
# "kasvatetaan yhdellä" increments the stored value in place.
#
# DOM utilities:
#   etsii elementin nimellä "id" tuloksenaan X  = document.getElementById
#   kirjoitetaan koodi "html"                    = element.innerHTML += (append)
#   pyyhitään                                    = element.innerHTML = ""

# Global counter — persists across button clicks
Olkoon kiva laskuri uusi muuttuja, jonka arvo on nolla.

Kun nykyinen sivu avautuu,
	nykyinen sivu etsii elementin nimellä "output" tuloksenaan kiva alue,
	kivalle alueelle kirjoitetaan koodi "<p><button id='natti'>+1</button> <button id='hieno'>+10</button></p><p id='tally'></p>",
	nykyinen sivu etsii elementin nimellä "natti" tuloksenaan nätti nappi,
	nykyinen sivu etsii elementin nimellä "hieno" tuloksenaan hieno nappi,
	nykyinen sivu etsii elementin nimellä "tally" tuloksenaan kaunis alue,
	nättiä nappia painettaessa käyköön niin, että
			kivan laskurin arvoa kasvatetaan yhdellä
		ja	kauniille alueelle kirjoitetaan koodi "▪ "
ja	hienoa nappia painettaessa käyköön niin, että
			kivan laskurin arvoa kasvatetaan kymmenellä
		ja	kauniille alueelle kirjoitetaan koodi "▪▪▪▪▪▪▪▪▪▪ ".