It's a todo list.
✨ implement addTask, deleteTask
+30
-4
+30
-4
src/routes/[id]/+page.svelte
+30
-4
src/routes/[id]/+page.svelte
···
1
1
<script lang="ts">
2
2
import { onMount } from "svelte";
3
3
import { page } from "$app/stores";
4
-
import { local_lists, pinned_list, type List } from "$lib/stores.svelte";
4
+
import { local_lists, pinned_list, generateId, type List } from "$lib/stores.svelte";
5
5
6
6
let list : List | undefined = $state();
7
+
let task_input = $state("");
7
8
8
9
onMount(() => {
9
10
list = local_lists.value!.find((l) => l.id === $page.params.id);
10
11
});
11
12
12
13
$effect(() => local_lists.update());
14
+
15
+
function addTask() {
16
+
list?.tasks.push({
17
+
id: generateId(),
18
+
description: task_input,
19
+
is_completed: false
20
+
});
21
+
22
+
task_input = "";
23
+
}
24
+
25
+
function deleteTask(id: string) {
26
+
if (list) {
27
+
list.tasks = list.tasks.filter((t) => t.id !== id);
28
+
}
29
+
}
13
30
</script>
14
31
15
-
<main class="flex flex-col w-full p-2 lg:p-4 gap-8 text-xl lg:text-3xl">
32
+
<main class="flex flex-col w-full p-2 pb-12 lg:p-4 lg:pb-24 gap-8 text-xl lg:text-3xl">
16
33
{#if list}
17
34
<input
18
35
type="text"
···
36
53
</div>
37
54
38
55
<div class="flex lg:hidden group-hover:flex gap-4 w-fit">
39
-
<button class="hidden lg:flex px-4 py-2 text-xl bg-red-500 rounded-xl text-white">
40
-
Delete
56
+
<button
57
+
onclick={() => deleteTask(task.id)}
58
+
class="px-4 py-2 bg-red-500 rounded-xl text-white"
59
+
>
60
+
-
41
61
</button>
42
62
</div>
43
63
</li>
44
64
{/each}
65
+
<li class="flex gap-4 w-full">
66
+
<button onclick={addTask} class="px-5 rounded-full bg-white text-black">
67
+
+
68
+
</button>
69
+
<input type="text" bind:value={task_input} class="bg-transparent pr-4 py-2 border-b w-full"/>
70
+
</li>
45
71
</ul>
46
72
47
73
{:else}