Latihan 1 dari materi Proyek Svelte di Svelte — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal sudah punya todos, input, $: remaining, addTodo(), removeTodo(), <h1>Todo App</h1>, dan <p>{remaining} tersisa</p>. Biarkan semuanya.
<p>, tulis <form on:submit|preventDefault={addTodo}>.<input bind:value={input} /> dan <button type="submit">Tambah</button>, lalu tutup </form>.<ul> berisi {#each todos as todo (todo.id)}, satu <li> yang menampilkan {todo.text}, lalu {/each}.<li>, tambahkan <input type="checkbox" bind:checked={todo.done} />, tulis teksnya sebagai <span class:done={todo.done}>{todo.text}</span>, dan tombol <button on:click={() => removeTodo(todo.id)}>Hapus</button>.<style>, tulis .done { text-decoration: line-through; opacity: 0.5; }.Yang dicek:
<h1>, <form>, dan <ul> (boleh kosong di awal).#each dan bind:.Belajar Svelte di kolom isian, menekan tombol bertuliskan persis Tambah, lalu <ul> harus memuat Belajar Svelte dan kolom isiannya kosong lagi.Tambah dengan kolom kosong gak membuat <li> apa pun.<p> berisi persis 0 tersisa. Sesudah Belajar Svelte ditambahkan, 1 tersisa. Sesudah checkbox-nya dicentang, 0 tersisa lagi. Lalu sesudah Hapus diklik, gak ada <li> yang tersisa.class:done dan punya gaya .done dengan line-through.
