Latihan 1 dari materi Reaktivitas Svelte di Svelte — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Buat counter sederhana. Kode awal sudah punya let count = 0 di <script>, biarkan.
Tambahkan tombol <button on:click={() => count += 1}>+1</button>. Di Svelte, assignment count += 1 sudah cukup untuk memperbarui tampilan.
Di bawahnya, tambahkan <p>Count: {count}</p>.
Penguji mengklik <button> pertama dan membaca <p> pertama di halaman, jadi jangan taruh tombol atau paragraf lain di atasnya.
Yang dicek:
Halaman punya <button> dan <p>.
Sebelum diklik, <p> berisi persis Count: 0 (satu spasi setelah titik dua).
Sesudah tombolnya diklik sekali, <p> berisi Count: 1.
Dari awal lagi, sesudah diklik dua kali, <p> berisi Count: 2.
Hint
Di Svelte, memberi nilai baru ke variabel state sudah cukup untuk memperbarui tampilan. Gak perlu fungsi khusus seperti setCount.
Pasang on:click di tombol yang menjalankan assignment ke count, dan tampilkan count di paragraf dengan kurung kurawal setelah tulisan Count dan titik dua.