Latihan 1 dari materi Conditional Rendering Svelte di Svelte — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal sudah punya let loggedIn = false dan tombol yang membalik loggedIn setiap diklik. Biarkan keduanya.
Di atas tombol, buka blok {#if loggedIn} yang berisi <p>Selamat datang!</p>.
Tambahkan cabang {:else} yang berisi <p>Silakan login</p>, lalu tutup dengan {/if}.
Penguji membaca <p> pertama dan mengklik <button> pertama.
Yang dicek:
Sebelum diklik, <p> berisi persis Silakan login.
Halaman punya <button>.
Kodemu memakai #if. Tulisan di dalam komentar gak dihitung.
Blok if di Svelte memilih markup yang tampil: isi cabangnya cuma ada di halaman kalau kondisinya benar, dan cabang else untuk sebaliknya.
Buka dengan {#if loggedIn}, isi paragraf sapaannya, lanjutkan dengan {:else} dan paragraf ajakan login, lalu tutup dengan {/if}. Tombol dari kode awal tetap di tempatnya.