278 lines
5.4 KiB
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>
|