added todo filtering

This commit is contained in:
Giulio Alessandrini 2021-08-01 22:22:34 +02:00
parent 82dc3948a5
commit 94ed9867ce
2 changed files with 51 additions and 15 deletions

View File

@ -1,6 +1,6 @@
<script>
import {todos} from "$lib/stores/todos.js"
let todo_text = ""
import {todos} from "$lib/stores/todos.js";
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">
TODO
</h2>
<h2 class= "title">TODO</h2>
<hr/>
<input bind:value="{todo_text}"/>
<button on:click="{addTodo}">Add</button>
<div class = "todo-list">
{#each $todos as todo}
<div class = "todo {todo.done ? 'done' : ''}">
<div class="todo-filter">
<button on:click="{() => filterTodo('active')}">active</button>
<button on:click="{() => filterTodo('done')}">done</button>
<button on:click="{() => filterTodo('all')}">all</button>
</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>
</div>
</li>
{/each}
</div>
</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;

View File

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