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

<script>
    import {todos} from "$lib/stores/todos.js";
    let todo_text = "";
    let todo_type = "active";
    let filteredTodo = [];
    let addTodo = () => {
        if (todo_text.length > 0) {
            const todo = {
                text: todo_text,
                date: Date.now,
                done: false
            }
            todo_text = "";
            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/>
    <div class="todo-input">
        <input class="todo-text" bind:value="{todo_text}" placeholder="title"/>
        <button on:click="{addTodo}" disabled = {todo_text.length == 0} class = "todo-add {todo_text.length == 0 ? 'disabled' : ''}">add</button>    
    </div>
    <div class="todo-filter">
        <button on:click="{() => filterTodo('active')}" class = {todo_type == 'active' ? 'disabled' : ''}>active</button>
        <button on:click="{() => filterTodo('done')}" class = {todo_type == 'done' ? 'disabled' : ''}>done</button>
        <button on:click="{() => filterTodo('all')}" class = {todo_type == 'all' ? 'disabled' : ''}>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>

* {
    --cream: #FEF9EF;
    --blue: #227c9d;
    --blue-disabled: #aabac0;
    --green: #17C3B2;
    --yellow: #FFCB77;
    --red: #FE6D73;
}


.panel {
        padding-top: 1rem;
        padding-bottom: 1rem;
        background-color: var(--cream);
        font-size: 1rem;
        font-family: 'Atkinson Hyperlegible', sans-serif;
}
@media only screen and (min-width: 500px) {
    .panel {
        margin-left: auto;
        margin-right: auto;
        width: 500px;
        border: solid var(--cream) 0px;
        border-radius: 10px;
    }
}

.title {
    margin-left: 2rem;
    font-weight: 400;
    font-size: 3rem;
    color: var(--yellow);
}

hr {
    margin-left: 1rem;
    margin-bottom: 1rem;
    border: 2px solid var(--yellow);
}

button {
    padding: 5px;
    margin: 0px;
    background-color: var(--blue);
    border: solid var(--blue) 1px;
    border-radius: 5px;
    color: white;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 1rem;
}

.todo-input {
    font-size: 0px;
    margin: 1rem;
}
.todo-text {
    padding: 4px;
    margin: 0px;
    border: solid white 2px;
    border-right: 0px;
    border-radius: 0px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 1rem;
}

.todo-text:focus {
    outline: none;
    border-bottom-color: var(--blue);
}

.todo-add {
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}

.disabled {
    background-color: var(--blue-disabled);
    border-color: var(--blue-disabled);
}

button:active {
    background-color: var(--yellow);
    border-color: var(--yellow);
    color: black;
}

button:active.disabled {
    background-color: var(--blue-disabled);
    border-color: var(--blue-disabled);
    color: white;
}

.todo-filter {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.todo-filter button {
    margin-right: 0.5rem;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.todo-list {
    padding: 1rem;
    padding-bottom: 0.5rem;
    background-color: var(--blue-disabled);
    /* list
        * padding 1.5rem
       todo
        * content 1.0rem
        * padding 1.0rem
        * marging 0.5rem
       button
        * padding 6px
        * border  6px
       total
        (1.5 + 2.5*3)rem (9rem)
        + (12*3)px       (36px)
    */
    min-height: calc(11.5rem + 48px);

}

.todo {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: var(--yellow);
    border-radius: 5px;
    display: flex;
    align-items: center;
}

.todo.done {
    background-color: var(--cream);
}

.todo button {
    padding: 3px;
    margin-left: auto;
    background-color: var(--green);
    border: solid 3px var(--green);
    color: var(--cream)
}

.todo.done button {
    background-color: var(--red);
    border-color: var(--red);
    color: var(--cream);
}

.todo button:active {
    background-color: var(--yellow);
    color: black;
}

</style>