svelte-playground/src/lib/apps/todoApp.svelte

<script>
    import {todos} from "$lib/stores/todos.js";
    let todo_text = "";
    let addTodo = () => {
        if (todo_text.length > 0) {
            const todo = {
                text: todo_text,
                date: Date.now,
                done: false
            }
            $todos = [todo, ...$todos];
        }
    }
    let clearTodo = (todo) => {
        if(todo.done)
            $todos = $todos.filter(x => x != todo)
        else
            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>
    <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 rgb(161, 161, 161) 1px;
    border-radius: 5px;
}

button {
    padding: 5px;
    margin: 0px;
    border: solid rgb(182, 182, 182) 1px;
    border-radius: 5px;
}

hr {
    border: 1px solid rgb(182, 182, 182);
}

.panel {
    background-color: rgb(245, 253, 255);
    padding: 10px;
    border: solid rgb(182, 182, 182) 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 rgb(182, 182, 182) 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>