mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
713 B
45 lines
713 B
6 years ago
|
<script>
|
||
|
let todos = [
|
||
|
{ done: false, text: 'finish Svelte tutorial' },
|
||
|
{ done: false, text: 'build an app' },
|
||
|
{ done: false, text: 'world domination' }
|
||
|
];
|
||
|
|
||
|
function add() {
|
||
|
todos = todos.concat({ done: false, text: '' });
|
||
|
}
|
||
|
|
||
|
function clear() {
|
||
|
todos = todos.filter(t => !t.done);
|
||
|
}
|
||
6 years ago
|
|
||
|
$: remaining = todos.filter(t => !t.done).length;
|
||
6 years ago
|
</script>
|
||
|
|
||
|
<h1>Todos</h1>
|
||
|
|
||
|
{#each todos as todo}
|
||
4 years ago
|
<div>
|
||
6 years ago
|
<input
|
||
|
type=checkbox
|
||
|
bind:checked={todo.done}
|
||
|
>
|
||
|
|
||
|
<input
|
||
|
placeholder="What needs to be done?"
|
||
|
bind:value={todo.text}
|
||
4 years ago
|
disabled={todo.done}
|
||
6 years ago
|
>
|
||
|
</div>
|
||
|
{/each}
|
||
|
|
||
6 years ago
|
<p>{remaining} remaining</p>
|
||
|
|
||
6 years ago
|
<button on:click={add}>
|
||
|
Add new
|
||
|
</button>
|
||
|
|
||
|
<button on:click={clear}>
|
||
|
Clear completed
|
||
|
</button>
|