added todo filtering

src/lib/apps/todoApp.svelte

@@ -1,6 +1,6 @@
 <script>
-    import {todos} from "$lib/stores/todos.js"
+    import {todos} from "$lib/stores/todos.js";
-    let todo_text = ""
+    let todo_text = "";
     let addTodo = () => {
         if (todo_text.length > 0) {
             const todo = {
@@ -18,22 +18,40 @@
             todo.done = true;
             $todos = $todos;
     }
+    let filterTodo = (type) => {
+        switch (type) {
+            case 'active':
+                filteredTodo = $todos.filter(todo => !todo.done);
+                break;
+            case 'done':
+                filteredTodo = $todos.filter(todo => todo.done);
+                break;
+            case 'all':
+                filteredTodo = $todos;
+                break;
+        }
+    }
+    $: filteredTodo = $todos
 </script>
 
 <div class = "panel">
-    <h2 class= "title">
+    <h2 class= "title">TODO</h2>
-    TODO
+    <hr/>
-    </h2>
     <input bind:value="{todo_text}"/>
     <button on:click="{addTodo}">Add</button>
-    <div class = "todo-list">
+    <div class="todo-filter">
-        {#each $todos as todo}
+        <button on:click="{() => filterTodo('active')}">active</button>
-            <div class = "todo {todo.done ? 'done' : ''}">
+        <button on:click="{() => filterTodo('done')}">done</button>
-                <p>{todo.text}</p>
+        <button on:click="{() => filterTodo('all')}">all</button>
-                <button on:click="{() => clearTodo(todo)}">{todo.done ? '✗' : '✓'}</button>
-            </div>
-        {/each}
     </div>
+    <ul class = "todo-list">
+        {#each filteredTodo as todo}
+        <li class = "todo {todo.done ? 'done' : ''}">
+            <p>{todo.text}</p>
+            <button on:click="{() => clearTodo(todo)}">{todo.done ? '✗' : '✓'}</button>
+        </li>
+        {/each}
+    </ul>
 </div>
 
 <style>
@@ -41,7 +59,7 @@
 input {
     padding: 5px;
     margin: 0px;
-    border: solid rgb(182, 182, 182) 1px;
+    border: solid rgb(161, 161, 161) 1px;
     border-radius: 5px;
 }
 
@@ -52,6 +70,10 @@ button {
     border-radius: 5px;
 }
 
+hr {
+    border: 1px solid rgb(182, 182, 182);
+}
+
 .panel {
     background-color: rgb(245, 253, 255);
     padding: 10px;
@@ -60,7 +82,7 @@ button {
 }
 
 .title {
-    padding: 5px;
+    padding: 0px;
     margin: 0px;
     margin-left: 5px;
     font-family: Georgia, 'Times New Roman', Times, serif;
@@ -68,6 +90,18 @@ button {
     font-size: 1.5rem;
 }
 
+.todo-filter {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.todo-filter button {
+    margin-right: 5px;
+}
+
 /* .todo-list {
     padding: 5px;
     background-color: azure;

src/routes/__layout.svelte

@@ -10,7 +10,9 @@
 </div>
 
 <style>
-:global(a) {
+
+:global(*) {
+    padding: 0;
     text-decoration: none;
     color : black
 }