Latihan 2: Conditional Rendering Svelte — Svelte

Latihan 2 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 nilai = 85, biarkan.

Tampilkan huruf nilainya dengan satu blok {#if} berisi empat cabang, mulai dari syarat tertinggi:

{#if nilai >= 90} berisi A.
{:else if nilai >= 80} berisi B.
{:else if nilai >= 70} berisi C.
{:else} berisi D, lalu tutup dengan {/if}.

Tulis tiap huruf langsung di antara tag -nya, misalnya A, bukan lewat variabel.

Yang dicek:

 yang tampil berisi persis B, karena 85 masuk syarat >= 80.
Cuma satu  yang tampil di halaman.
Kodemu memakai :else if dan {:else}.
Kodemu menulis A, C, dan D di antara tag, seperti A, C, dan D, walaupun ketiganya gak sedang tampil.

Hint

Kalau ada lebih dari dua kemungkinan, sambung cabangnya dengan {:else if}. Svelte memeriksa dari atas dan berhenti di syarat pertama yang benar.
Urutkan dari syarat tertinggi: >= 90, lalu >= 80, lalu >= 70, lalu {:else} untuk sisanya. Tiap cabang berisi satu dengan hurufnya.
{#if nilai >= 90} A {:else if nilai >= 80} B {:else if nilai >= 70} C {:else} D {/if}

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 2: Conditional Rendering Svelte — Svelte

Hint

Memperbarui Aplikasi