Latihan 1: Stores Svelte — Svelte

Latihan 1 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 penghitung yang angkanya disimpan di store.

Di <script>, impor writable: import { writable } from "svelte/store".
Buat store-nya: const count = writable(0).
Di bawah </script>, tulis <p>Count: {$count}</p>.
Tambahkan tombol yang menaikkan store-nya: <button on:click={() => $count += 1}>+1</button>.

Penguji mengklik <button> pertama dan membaca <p> pertama.

Yang dicek:

Halaman punya <p> dan <button>.
Kodemu memanggil writable( dan memakai on:click. Tulisan di dalam komentar gak dihitung.
Setelah satu klik, <p> berisi persis Count: 1.
Dari awal lagi, setelah dua klik, <p> berisi persis Count: 2.

Hint

Store menyimpan angka di luar komponen. Di template, nilainya dibaca dengan tanda $ di depan nama store-nya, dan $ yang sama bisa dipakai untuk menulisnya.
Impor writable dari svelte/store, buat const count = writable(0), tampilkan {$count} di paragraf berlabel Count: dan beri tombol on:click yang menambah $count satu.
const count = writable(0) lalu <p>Count: {$count}</p> <button on:click={() => $count += 1}>+1</button>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Stores Svelte — Svelte

Hint

Memperbarui Aplikasi