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

278 lines
5.4 KiB
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 solveTodo = (todo) => {
if (todo.done) {
todo.done = false;
} else {
todo.done = true;
}
$todos = $todos;
};
let clearTodo = (todo) => {
$todos = $todos.filter((x) => x != todo);
};
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>
<div class="todo-buttons">
{#if todo.done}
<button class="clear" on:click={() => clearTodo(todo)}>✗</button>
{/if}
<button class="solve" on:click={() => solveTodo(todo)}>✓</button>
</div>
</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;
display: flex;
}
.todo-text {
padding: 1rem;
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;
width: 100%;
}
.todo-text:focus {
outline: none;
border-bottom-color: var(--blue);
}
.todo-add {
padding: 1rem;
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;
padding-left: 1rem;
}
.todo-filter button {
padding-left: 1rem;
padding-right: 1rem;
margin-right: 1px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.todo-list {
margin-left: 1rem;
margin-right: 1rem;
padding: 1rem;
padding-bottom: 0.5rem;
background-color: var(--blue-disabled);
border-bottom-left-radius: 0px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
/* 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(--cream);
border-radius: 5px;
display: flex;
align-items: center;
}
.todo-buttons {
margin-left: auto;
}
.todo.done {
background-color: var(--cream);
}
/* common properties */
.todo button {
width: 2rem;
height: 2rem;
padding: 0rem;
border: solid 0.2rem;
border-radius: 1rem;
}
/* sovle button */
.todo button.solve {
background-color: var(--cream);
border-color: var(--green);
color: transparent;
}
.todo.done button.solve {
background-color: var(--cream);
color: var(--green);
}
/* clear button */
.todo button.clear {
background-color: var(--red);
border-color: var(--red);
color: var(--cream);
}
/* active buttons */
.todo button:active {
background-color: var(--yellow);
border-color: var(--yellow);
}
.todo.done button:active {
background-color: var(--yellow);
border-color: var(--yellow);
}
</style>