Latihan 1: Binding Data Svelte — Svelte

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

Kode awal sudah punya let nama = "" dan <input placeholder="Ketik nama..." />. Biarkan keduanya.

Tambahkan bind:value={nama} ke <input> itu: <input bind:value={nama} placeholder="Ketik nama..." />.
Di bawahnya, tambahkan <p>Halo, {nama}!</p>.

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

Yang dicek:

Halaman punya <input> dan <p>.
Kodemu memakai bind:value. Tulisan di dalam komentar gak dihitung.
Setelah Sinta diketik, <p> berisi persis Halo, Sinta! (koma setelah Halo, satu spasi, tanda seru di akhir).

Hint

Ikatan dua arah membuat isi kolom dan variabelnya selalu sama, tanpa menulis penangan event sendiri.
Pasang bind:value={nama} di input yang sudah ada, lalu buat paragraf yang menyisipkan nama dengan kurung kurawal di antara Halo dan koma, dan tanda seru.
<input bind:value={nama} placeholder="Ketik nama..." /> <p>Halo, {nama}!</p>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Binding Data Svelte — Svelte

Hint

Memperbarui Aplikasi