Refine README descriptions and improve example visuals
This commit is contained in:
@@ -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)
|
||||||
|
|
||||||
|
|||||||
@@ -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 "▪▪▪▪▪▪▪▪▪▪ ".
|
||||||
|
|||||||
@@ -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.
|
|
||||||
|
|||||||
Reference in New Issue
Block a user