Latihan 1: List Rendering Svelte — Svelte

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

Kode awal sudah punya let buah = ["Apel", "Mangga", "Jeruk"] dan <ul> kosong. Biarkan keduanya.

Di dalam <ul>, buka blok {#each buah as item}.
Di dalamnya, tulis satu baris contoh <li>{item}</li>, lalu tutup dengan {/each}.

Jangan mengetik nama buah sendiri di dalam <li>: isi tiap <li> langsung diawali {item}.

Yang dicek:

Halaman punya <ul> dengan paling sedikit 3 <li>.
Kodemu memakai #each.
<li> pertama berisi persis Apel, dan <li> terakhir berisi persis Jeruk.
Gak ada <li> di kodemu yang langsung diikuti huruf, seperti <li>Apel</li> atau <li>Buah: {item}</li>.

Hint

Barisnya lahir dari perulangan atas array buah, bukan diketik satu per satu. Satu baris contoh diulang sebanyak isi array.
Buka {#each buah as item} di dalam <ul>, tulis satu <li> yang cuma berisi item dalam kurung kurawal, lalu tutup dengan {/each}.
<ul> {#each buah as item} <li>{item}</li> {/each} </ul>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: List Rendering Svelte — Svelte

Hint

Memperbarui Aplikasi