Latihan 2 dari materi Proyek Svelte di Svelte — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal punya let items = [], let input = "", <h1>Shopping List</h1>, dan <p>Total: {items.length} item</p>. Biarkan semuanya.
<script>, tulis addItem(): kalau input.trim() kosong, langsung return; kalau gak, items = [...items, { id: Date.now(), name: input }] lalu input = "".removeItem(id): items = items.filter((i) => i.id !== id).<p>, tulis <form on:submit|preventDefault={addItem}> berisi <input bind:value={input} /> dan <button type="submit">Tambah</button>.<ul> dengan {#each items as item (item.id)}: satu <li> berisi {item.name} dan <button on:click={() => removeItem(item.id)}>Hapus</button>.Yang dicek:
<h1> dan <form>.#each, on:submit (atau on:click), bind:value, dan filter( (atau splice().Kopi di kolom isian, menekan tombol bertuliskan persis Tambah, lalu <ul> harus memuat Kopi dan kolom isiannya kosong lagi.Tambah dengan kolom kosong gak membuat <li> apa pun.<p> berisi persis Total: 0 item. Sesudah Kopi ditambahkan, Total: 1 item. Lalu sesudah Hapus diklik, gak ada <li> yang tersisa.
