Refine README descriptions and improve example visuals

README.md

@@ -30,8 +30,8 @@ Open `http://localhost:9994/basics/index.html` for the full example index, or go
 | `http://localhost:9994/data-structures/lista.html` | List sorted ascending and descending |
 | `http://localhost:9994/data-structures/vektori.html` | Custom class, Euclidean length of [3,4] = 5 |
 | `http://localhost:9994/strings/merkkijono.html` | String length, concat, trim, split |
-| `http://localhost:9994/async/nappi.html` | Click handlers, mutable counter |
-| `http://localhost:9994/program/kasvutaulukko.html` | Factorial + Fibonacci table, interactive prompt |
+| `http://localhost:9994/async/nappi.html` | Click handlers, mutable counter (visual tally) |
+| `http://localhost:9994/program/kasvutaulukko.html` | Factorial and Fibonacci sequences for n=1..7 |
 
 ## What is Tampio?
 
@@ -56,7 +56,7 @@ See [`docs/cheatsheet.md`](docs/cheatsheet.md) for a map of Finnish grammatical
 | `examples/data-structures/` | Built-in list operations, custom class |
 | `examples/strings/` | String length, concat, trim, split |
 | `examples/async/` | DOM click handlers, mutable state |
-| `examples/program/` | Capstone combining recursion, lists, and click events |
+| `examples/program/` | Capstone combining recursion and list iteration |
 
 ## Local Setup (without Docker)
 

examples/async/nappi.itp

@@ -6,11 +6,10 @@
 #
 # State is stored in a "muuttuja" (variable object with an "arvo" field).
 # "kasvatetaan yhdellä" increments the stored value in place.
-# "näytetään käyttäjälle" writes the current value to the page output.
 #
 # DOM utilities:
 #   etsii elementin nimellä "id" tuloksenaan X  = document.getElementById
-#   kirjoitetaan koodi "html"                    = element.innerHTML =
+#   kirjoitetaan koodi "html"                    = element.innerHTML += (append)
 #   pyyhitään                                    = element.innerHTML = ""
 
 # Global counter — persists across button clicks
@@ -18,12 +17,13 @@ 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>",
+	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	kivan laskurin arvo näytetään käyttäjälle
+		ja	kauniille alueelle kirjoitetaan koodi "▪ "
 ja	hienoa nappia painettaessa käyköön niin, että
 			kivan laskurin arvoa kasvatetaan kymmenellä
-		ja	kivan laskurin arvo näytetään käyttäjälle.
+		ja	kauniille alueelle kirjoitetaan koodi "▪▪▪▪▪▪▪▪▪▪ ".

examples/program/kasvutaulukko.itp

@@ -35,21 +35,11 @@ Pienen luvun kani on
 # n = 1 .. 7
 Olkoon kiva lista uusi lista, jonka alkioita ovat yksi, kaksi, kolme, neljä, viisi, kuusi ja seitsemän eikä muuta.
 
-# Mutable variable for the interactive prompt
-Olkoon pieni muuttuja uusi muuttuja, jonka arvo on nolla.
-
 # --- Page ---
 
 Kun nykyinen sivu avautuu,
 	nykyinen sivu näyttää tekstin "<h2>Kertoma (n!)</h2><p>",
 	nykyinen sivu näyttää kivan listan jokaisen alkion kertoman,
 	nykyinen sivu näyttää tekstin "</p><h2>Fibonacci-kani (fib(n))</h2><p>",
-	nykyinen sivu näyttää kivan listan jokaisen alkion kanin,
-	nykyinen sivu näyttää tekstin "</p>",
-	nykyinen sivu etsii elementin nimellä "output" tuloksenaan kiva alue,
-	kivalle alueelle kirjoitetaan koodi "<h2>Kokeile itse</h2><p><button id='laske'>Syötä luku →</button></p>",
-	nykyinen sivu etsii elementin nimellä "laske" tuloksenaan nätti nappi
-ja	nättiä nappia painettaessa käyköön niin, että
-			pieneen muuttujaan luetaan luku,
-			pienen muuttujan arvon kertoma näytetään käyttäjälle
-		ja	pienen muuttujan arvon kani näytetään käyttäjälle.
+	nykyinen sivu näyttää kivan listan jokaisen alkion kanin
+ja	nykyinen sivu näyttää tekstin "</p>".