Latihan 2: Stores Svelte — Svelte

Latihan 2 dari materi Stores Svelte di Svelte — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awalnya cuma <script> kosong dan komentar. Buat sapaan yang namanya disimpan di store.

Di <script>, impor writable dari "svelte/store", lalu buat const name = writable("Dunia").
Di bawah </script>, tambahkan <input bind:value={$name} />.
Di bawahnya, tambahkan <h1>Halo, {$name}!</h1>.

Penguji mengetik Sinta di <input> pertama dan membaca <h1> pertama.

Yang dicek:

Halaman punya <h1> dan <input>.
Kodemu memanggil writable(. Tulisan di dalam komentar gak dihitung.
Sebelum mengetik apa pun, <h1> berisi persis Halo, Dunia!.
Setelah Sinta diketik, <h1> berisi persis Halo, Sinta!.

Hint

Store dengan nilai awal Dunia dibaca di template dengan $name, dan bind:value bisa diikat langsung ke $name supaya mengetik mengisi store-nya.
Buat const name = writable("Dunia"), ikat input dengan bind:value={$name}, lalu tampilkan Halo, koma, {$name}, dan tanda seru di <h1>.
const name = writable("Dunia") lalu <input bind:value={$name} /> <h1>Halo, {$name}!</h1>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Stores Svelte — Svelte

Hint

Memperbarui Aplikasi