Refine README descriptions and improve example visuals

This commit is contained in:
2026-04-05 09:17:37 +03:00
parent cbe8369c40
commit a1618f39bb
3 changed files with 10 additions and 20 deletions
+3 -3
View File
@@ -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/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/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/strings/merkkijono.html` | String length, concat, trim, split |
| `http://localhost:9994/async/nappi.html` | Click handlers, mutable counter | | `http://localhost:9994/async/nappi.html` | Click handlers, mutable counter (visual tally) |
| `http://localhost:9994/program/kasvutaulukko.html` | Factorial + Fibonacci table, interactive prompt | | `http://localhost:9994/program/kasvutaulukko.html` | Factorial and Fibonacci sequences for n=1..7 |
## What is Tampio? ## 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/data-structures/` | Built-in list operations, custom class |
| `examples/strings/` | String length, concat, trim, split | | `examples/strings/` | String length, concat, trim, split |
| `examples/async/` | DOM click handlers, mutable state | | `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) ## Local Setup (without Docker)
+5 -5
View File
@@ -6,11 +6,10 @@
# #
# State is stored in a "muuttuja" (variable object with an "arvo" field). # State is stored in a "muuttuja" (variable object with an "arvo" field).
# "kasvatetaan yhdellä" increments the stored value in place. # "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: # DOM utilities:
# etsii elementin nimellä "id" tuloksenaan X = document.getElementById # etsii elementin nimellä "id" tuloksenaan X = document.getElementById
# kirjoitetaan koodi "html" = element.innerHTML = # kirjoitetaan koodi "html" = element.innerHTML += (append)
# pyyhitään = element.innerHTML = "" # pyyhitään = element.innerHTML = ""
# Global counter — persists across button clicks # Global counter — persists across button clicks
@@ -18,12 +17,13 @@ Olkoon kiva laskuri uusi muuttuja, jonka arvo on nolla.
Kun nykyinen sivu avautuu, Kun nykyinen sivu avautuu,
nykyinen sivu etsii elementin nimellä "output" tuloksenaan kiva alue, 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ä "natti" tuloksenaan nätti nappi,
nykyinen sivu etsii elementin nimellä "hieno" tuloksenaan hieno 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ä nättiä nappia painettaessa käyköön niin, että
kivan laskurin arvoa kasvatetaan yhdellä 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ä ja hienoa nappia painettaessa käyköön niin, että
kivan laskurin arvoa kasvatetaan kymmenellä kivan laskurin arvoa kasvatetaan kymmenellä
ja kivan laskurin arvo näytetään käyttäjälle. ja kauniille alueelle kirjoitetaan koodi "▪▪▪▪▪▪▪▪▪▪ ".
+2 -12
View File
@@ -35,21 +35,11 @@ Pienen luvun kani on
# n = 1 .. 7 # n = 1 .. 7
Olkoon kiva lista uusi lista, jonka alkioita ovat yksi, kaksi, kolme, neljä, viisi, kuusi ja seitsemän eikä muuta. 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 --- # --- Page ---
Kun nykyinen sivu avautuu, Kun nykyinen sivu avautuu,
nykyinen sivu näyttää tekstin "<h2>Kertoma (n!)</h2><p>", nykyinen sivu näyttää tekstin "<h2>Kertoma (n!)</h2><p>",
nykyinen sivu näyttää kivan listan jokaisen alkion kertoman, 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ää tekstin "</p><h2>Fibonacci-kani (fib(n))</h2><p>",
nykyinen sivu näyttää kivan listan jokaisen alkion kanin, nykyinen sivu näyttää kivan listan jokaisen alkion kanin
nykyinen sivu näyttää tekstin "</p>", ja 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.