|
|
@ -1,204 +1,211 @@ |
|
|
|
<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) |
|
|
|
} |
|
|
|
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 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; |
|
|
|
} |
|
|
|
|
|
|
|
* { |
|
|
|
--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); |
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
|
} |
|
|
|
} |
|
|
|
hr { |
|
|
|
margin-left: 1rem; |
|
|
|
margin-bottom: 1rem; |
|
|
|
border: 2px solid var(--yellow); |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
margin-left: 2rem; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 3rem; |
|
|
|
color: 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; |
|
|
|
} |
|
|
|
|
|
|
|
hr { |
|
|
|
margin-left: 1rem; |
|
|
|
margin-bottom: 1rem; |
|
|
|
border: 2px solid var(--yellow); |
|
|
|
} |
|
|
|
.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%; |
|
|
|
} |
|
|
|
|
|
|
|
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-text:focus { |
|
|
|
outline: none; |
|
|
|
border-bottom-color: var(--blue); |
|
|
|
} |
|
|
|
|
|
|
|
.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-add { |
|
|
|
padding: 1rem; |
|
|
|
border-bottom-left-radius: 0px; |
|
|
|
border-top-left-radius: 0px; |
|
|
|
} |
|
|
|
|
|
|
|
.todo-text:focus { |
|
|
|
outline: none; |
|
|
|
border-bottom-color: var(--blue); |
|
|
|
} |
|
|
|
.disabled { |
|
|
|
background-color: var(--blue-disabled); |
|
|
|
border-color: var(--blue-disabled); |
|
|
|
} |
|
|
|
|
|
|
|
.todo-add { |
|
|
|
padding: 1rem; |
|
|
|
border-bottom-left-radius: 0px; |
|
|
|
border-top-left-radius: 0px; |
|
|
|
} |
|
|
|
button:active { |
|
|
|
background-color: var(--yellow); |
|
|
|
border-color: var(--yellow); |
|
|
|
color: black; |
|
|
|
} |
|
|
|
|
|
|
|
.disabled { |
|
|
|
background-color: var(--blue-disabled); |
|
|
|
border-color: var(--blue-disabled); |
|
|
|
} |
|
|
|
button:active.disabled { |
|
|
|
background-color: var(--blue-disabled); |
|
|
|
border-color: var(--blue-disabled); |
|
|
|
color: white; |
|
|
|
} |
|
|
|
|
|
|
|
button:active { |
|
|
|
background-color: var(--yellow); |
|
|
|
border-color: var(--yellow); |
|
|
|
color: black; |
|
|
|
} |
|
|
|
.todo-filter { |
|
|
|
margin-top: 1rem; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding-left: 1rem; |
|
|
|
} |
|
|
|
|
|
|
|
button:active.disabled { |
|
|
|
background-color: var(--blue-disabled); |
|
|
|
border-color: var(--blue-disabled); |
|
|
|
color: white; |
|
|
|
} |
|
|
|
.todo-filter button { |
|
|
|
padding-left: 1rem; |
|
|
|
padding-right: 1rem; |
|
|
|
margin-right: 1px; |
|
|
|
border-bottom-left-radius: 0px; |
|
|
|
border-bottom-right-radius: 0px; |
|
|
|
} |
|
|
|
|
|
|
|
.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 |
|
|
|
.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 |
|
|
@ -211,63 +218,60 @@ button:active.disabled { |
|
|
|
(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; |
|
|
|
} |
|
|
|
min-height: calc(11.5rem + 48px); |
|
|
|
} |
|
|
|
|
|
|
|
.todo.done { |
|
|
|
background-color: var(--cream); |
|
|
|
} |
|
|
|
.todo { |
|
|
|
padding: 0.5rem; |
|
|
|
margin-bottom: 0.5rem; |
|
|
|
background-color: var(--cream); |
|
|
|
border-radius: 5px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
/* common properties */ |
|
|
|
.todo button { |
|
|
|
width: 2rem; |
|
|
|
height: 2rem; |
|
|
|
padding: 0rem; |
|
|
|
border: solid 0.2rem; |
|
|
|
border-radius: 1rem; |
|
|
|
} |
|
|
|
.todo-buttons { |
|
|
|
margin-left: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.todo.done { |
|
|
|
background-color: var(--cream); |
|
|
|
} |
|
|
|
|
|
|
|
/* 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) |
|
|
|
} |
|
|
|
/* common properties */ |
|
|
|
.todo button { |
|
|
|
width: 2rem; |
|
|
|
height: 2rem; |
|
|
|
padding: 0rem; |
|
|
|
border: solid 0.2rem; |
|
|
|
border-radius: 1rem; |
|
|
|
} |
|
|
|
|
|
|
|
/* clear button */ |
|
|
|
.todo button.clear { |
|
|
|
background-color: var(--red); |
|
|
|
border-color: var(--red); |
|
|
|
color: var(--cream); |
|
|
|
} |
|
|
|
/* 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); |
|
|
|
} |
|
|
|
|
|
|
|
/* 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) |
|
|
|
} |
|
|
|
/* clear button */ |
|
|
|
.todo button.clear { |
|
|
|
background-color: var(--red); |
|
|
|
border-color: var(--red); |
|
|
|
color: var(--cream); |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
/* 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> |
|
|
|