Add capstone example: Kasvutaulukko with recursion, lists, and click events

README.md

@@ -31,6 +31,7 @@ Open `http://localhost:9994/basics/index.html` for the full example index, or go
 | `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 |
 
 ## What is Tampio?
 
@@ -55,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/` | A small complete program (coming soon) |
+| `examples/program/` | Capstone combining recursion, lists, and click events |
 
 ## Local Setup (without Docker)
 

examples/basics/index.itp

@@ -71,5 +71,9 @@ Kun nykyinen sivu avautuu,
 	nykyinen sivu näyttää tekstin "<p><em>Open the page — see string ops applied to 'Hei, Tampio!'.</em></p>",
 	nykyinen sivu näyttää tekstin "<h2>Async / Events</h2>",
 	nykyinen sivu näyttää tekstin "<h3><a href='../async/nappi.html'>Nappi →</a></h3>",
-	nykyinen sivu näyttää tekstin "<p>DOM click handlers. Mutable counter state persists across button clicks.</p>"
-ja	nykyinen sivu näyttää tekstin "<p><em>Open the page — click +1 or +10 and watch the counter update.</em></p>".
+	nykyinen sivu näyttää tekstin "<p>DOM click handlers. Mutable counter state persists across button clicks.</p>",
+	nykyinen sivu näyttää tekstin "<p><em>Open the page — click +1 or +10 and watch the counter update.</em></p>",
+	nykyinen sivu näyttää tekstin "<h2>Program</h2>",
+	nykyinen sivu näyttää tekstin "<h3><a href='../program/kasvutaulukko.html'>Kasvutaulukko →</a></h3>",
+	nykyinen sivu näyttää tekstin "<p>Capstone: recursive functions, list iteration, and a click handler together.</p>"
+ja	nykyinen sivu näyttää tekstin "<p><em>Open the page — see factorial and Fibonacci for n=1..7, then enter any n for both values.</em></p>".

examples/program/kasvutaulukko.itp

@@ -0,0 +1,55 @@
+# Kasvutaulukko — Growth Comparison
+#
+# Combines recursive methods, list iteration, and a click handler
+# in a single program.
+#
+# Page load: computes factorial and Fibonacci for n = 1..7 by
+# iterating the same lista twice — once with kertoma, once with kani.
+#
+# Button: prompts for any n, then shows its factorial and Fibonacci
+# as two sequential alerts.
+#
+# Concepts in use:
+#   kertoma        — recursive factorial  (from basics/factorial.itp)
+#   kani           — recursive Fibonacci  (from basics/fibonacci.itp)
+#   lista          — built-in list type   (from data-structures/lista.itp)
+#   jokainen alkio — forEach iterator     (from data-structures/lista.itp)
+#   käyköön niin, että — click handler   (from async/nappi.itp)
+
+# --- Recursive definitions ---
+
+Pienen luvun kertoma on
+	riippuen siitä, onko se pienempi tai yhtä suuri kuin yksi,
+	joko yksi
+	tai pieni luku kerrottuna pienen luvun edeltäjän kertomalla.
+
+Luvun edeltäjä on se vähennettynä yhdellä.
+
+Pienen luvun kani on
+	riippuen siitä, onko se pienempi tai yhtä suuri kuin yksi,
+	joko pieni luku
+	tai pienen luvun edeltäjän kani lisättynä pienen luvun edeltäjän edeltäjän kaniin.
+
+# --- Data ---
+
+# 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.