/
example.html
43 lines (36 loc) · 971 Bytes
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<script>
let todos = [];
let name = '';
let active = {};
function enter(e) {
if(e.keyCode !== 13) return;
e.preventDefault();
add();
};
function add() {
if(!name) return;
todos.push({
name: name,
done: false
});
name = '';
}
function remove(todo) {
todos.splice(todos.indexOf(todo), 1);
}
function select(todo) {
active = todo;
}
</script>
<input type="text" on:keydown={enter(e)} bind:value={name} />
<button on:click={add()}>Add</button>
<ul>
{#each todos as todo }
<li class:active={todo === active}>
<input type="checkbox" bind:checked={todo.done} />
<span on:click={select(todo)} class:inactive={todo.done} style="cursor: pointer;">{todo.name}</span>
<a href on:click|preventDefault={remove(todo)}>[x]</a>
</li>
{/each}
</ul>
Edit: <input type="text" bind:value={active.name} />