148 lines
3.1 KiB
Svelte
148 lines
3.1 KiB
Svelte
<script>
|
|
import {todos} from "$lib/stores/todos.js";
|
|
let todo_text = "";
|
|
let todo_type = "all";
|
|
let filteredTodo = [];
|
|
let addTodo = () => {
|
|
if (todo_text.length > 0) {
|
|
const todo = {
|
|
text: todo_text,
|
|
date: Date.now,
|
|
done: false
|
|
}
|
|
if (todo_type == "done") todo_type = "all";
|
|
$todos = [todo, ...$todos];
|
|
}
|
|
}
|
|
let clearTodo = (todo) => {
|
|
if(todo.done) {
|
|
$todos = $todos.filter(x => x != todo)
|
|
}
|
|
else {
|
|
todo.done = true;
|
|
$todos = $todos
|
|
}
|
|
}
|
|
let filterTodo = (type) => {
|
|
todo_type = 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;
|
|
filterTodo(todo_type)
|
|
}
|
|
</script>
|
|
|
|
<div class = "panel">
|
|
<h2 class= "title">TODO</h2>
|
|
<hr/>
|
|
<input bind:value="{todo_text}"/>
|
|
<button on:click="{addTodo}">Add</button>
|
|
<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>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
|
|
<style>
|
|
|
|
input {
|
|
padding: 5px;
|
|
margin: 0px;
|
|
border: solid var(--gray) 1px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
button {
|
|
padding: 5px;
|
|
margin: 0px;
|
|
background-color: var(--lightgray);
|
|
border: solid var(--gray) 1px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
hr {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
border: 1px solid var(--gray);
|
|
}
|
|
|
|
.panel {
|
|
background-color: rgb(245, 253, 255);
|
|
padding: 10px;
|
|
border: solid var(--gray) 1px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.title {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
margin-left: 5px;
|
|
font-family: Georgia, 'Times New Roman', Times, serif;
|
|
font-weight: 400;
|
|
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;
|
|
display: flex;
|
|
flex-direction: column;
|
|
} */
|
|
|
|
.todo {
|
|
padding: 10px;
|
|
margin: 5px 0px 5px 0px;
|
|
background-color: rgb(255, 255, 255);
|
|
border: solid var(--gray) 1px;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.done p {
|
|
text-decoration: line-through
|
|
}
|
|
|
|
.todo p {
|
|
padding: 0px;
|
|
margin: 0px 10px 0px 0px;
|
|
}
|
|
|
|
.todo button {
|
|
margin-left: auto;
|
|
}
|
|
|
|
</style> |