2021-08-01 21:33:31 +02:00
|
|
|
<script>
|
2021-08-01 22:22:34 +02:00
|
|
|
import {todos} from "$lib/stores/todos.js";
|
|
|
|
let todo_text = "";
|
2021-08-02 07:59:31 +02:00
|
|
|
let todo_type = "active";
|
2021-08-01 23:04:31 +02:00
|
|
|
let filteredTodo = [];
|
2021-08-01 21:33:31 +02:00
|
|
|
let addTodo = () => {
|
|
|
|
if (todo_text.length > 0) {
|
|
|
|
const todo = {
|
|
|
|
text: todo_text,
|
|
|
|
date: Date.now,
|
|
|
|
done: false
|
|
|
|
}
|
2021-08-03 09:43:26 +02:00
|
|
|
todo_text = "";
|
2021-08-01 23:04:31 +02:00
|
|
|
if (todo_type == "done") todo_type = "all";
|
2021-08-01 21:33:31 +02:00
|
|
|
$todos = [todo, ...$todos];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
let clearTodo = (todo) => {
|
2021-08-01 23:04:31 +02:00
|
|
|
if(todo.done) {
|
2021-08-01 21:33:31 +02:00
|
|
|
$todos = $todos.filter(x => x != todo)
|
2021-08-01 23:04:31 +02:00
|
|
|
}
|
|
|
|
else {
|
2021-08-01 21:33:31 +02:00
|
|
|
todo.done = true;
|
2021-08-01 23:04:31 +02:00
|
|
|
$todos = $todos
|
|
|
|
}
|
2021-08-01 21:33:31 +02:00
|
|
|
}
|
2021-08-01 22:22:34 +02:00
|
|
|
let filterTodo = (type) => {
|
2021-08-01 23:04:31 +02:00
|
|
|
todo_type = type;
|
2021-08-01 22:22:34 +02:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
}
|
2021-08-01 23:04:31 +02:00
|
|
|
$: {
|
|
|
|
filteredTodo = $todos;
|
|
|
|
filterTodo(todo_type)
|
|
|
|
}
|
2021-08-01 21:33:31 +02:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<div class = "panel">
|
2021-08-01 22:22:34 +02:00
|
|
|
<h2 class= "title">TODO</h2>
|
|
|
|
<hr/>
|
2021-08-03 09:43:26 +02:00
|
|
|
<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>
|
2021-08-01 22:22:34 +02:00
|
|
|
<div class="todo-filter">
|
2021-08-02 07:59:31 +02:00
|
|
|
<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>
|
2021-08-01 21:33:31 +02:00
|
|
|
</div>
|
2021-08-01 22:22:34 +02:00
|
|
|
<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>
|
2021-08-01 21:33:31 +02:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
2021-08-03 09:43:26 +02:00
|
|
|
* {
|
|
|
|
--cream: #FEF9EF;
|
|
|
|
--blue: #227c9d;
|
|
|
|
--green: #17C3B2;
|
|
|
|
--yellow: #FFCB77;
|
|
|
|
--red: #FE6D73;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.panel {
|
|
|
|
padding: 10px;
|
|
|
|
background-color: var(--cream);
|
|
|
|
}
|
|
|
|
@media only screen and (min-width: 500px) {
|
|
|
|
.panel {
|
|
|
|
margin-left: auto;
|
|
|
|
margin-right: auto;
|
|
|
|
width: 500px;
|
|
|
|
border: solid var(--cream) 1px;
|
|
|
|
border-radius: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
hr {
|
|
|
|
margin-top: 10px;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
border: 1px solid var(--yellow);
|
2021-08-01 21:33:31 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
button {
|
|
|
|
padding: 5px;
|
|
|
|
margin: 0px;
|
2021-08-03 09:43:26 +02:00
|
|
|
background-color: var(--blue);
|
|
|
|
border: solid var(--blue) 1px;
|
2021-08-01 21:33:31 +02:00
|
|
|
border-radius: 5px;
|
2021-08-03 09:43:26 +02:00
|
|
|
color: var(--cream);
|
2021-08-01 21:33:31 +02:00
|
|
|
}
|
|
|
|
|
2021-08-03 09:43:26 +02:00
|
|
|
.todo-input {
|
|
|
|
font-size: 0px;
|
|
|
|
}
|
|
|
|
.todo-text {
|
2021-08-03 10:55:38 +02:00
|
|
|
padding: 7px;
|
2021-08-03 09:43:26 +02:00
|
|
|
margin: 0px;
|
2021-08-03 10:55:38 +02:00
|
|
|
border: solid white 2px;
|
2021-08-03 09:43:26 +02:00
|
|
|
border-right: 0px;
|
|
|
|
border-radius: 0px;
|
|
|
|
border-bottom-left-radius: 5px;
|
|
|
|
border-top-left-radius: 5px;
|
2021-08-02 07:59:31 +02:00
|
|
|
}
|
|
|
|
|
2021-08-03 09:43:26 +02:00
|
|
|
.todo-text:focus {
|
|
|
|
outline: none;
|
2021-08-03 10:55:38 +02:00
|
|
|
border-bottom-color: var(--blue);
|
|
|
|
/* border-left-color: var(--blue);
|
|
|
|
border-top-color: var(--blue); */
|
2021-08-02 07:59:31 +02:00
|
|
|
}
|
|
|
|
|
2021-08-03 09:43:26 +02:00
|
|
|
.todo-add {
|
|
|
|
padding: 8px;
|
|
|
|
border-radius: 0px;
|
|
|
|
border-bottom-right-radius: 5px;
|
|
|
|
border-top-right-radius: 5px;
|
2021-08-01 22:22:34 +02:00
|
|
|
}
|
|
|
|
|
2021-08-03 09:43:26 +02:00
|
|
|
.disabled {
|
|
|
|
background-color: var(--yellow);
|
|
|
|
border-color: var(--yellow);
|
|
|
|
color: black;
|
|
|
|
}
|
|
|
|
|
|
|
|
button:active {
|
|
|
|
background-color: var(--yellow);
|
|
|
|
color: black;
|
2021-08-01 21:33:31 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.title {
|
2021-08-01 22:22:34 +02:00
|
|
|
padding: 0px;
|
2021-08-01 21:33:31 +02:00
|
|
|
margin: 0px;
|
|
|
|
margin-left: 5px;
|
|
|
|
font-weight: 400;
|
|
|
|
font-size: 1.5rem;
|
2021-08-03 09:43:26 +02:00
|
|
|
color: var(--yellow);
|
2021-08-01 21:33:31 +02:00
|
|
|
}
|
|
|
|
|
2021-08-01 22:22:34 +02:00
|
|
|
.todo-filter {
|
|
|
|
padding-top: 10px;
|
|
|
|
padding-bottom: 10px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.todo-filter button {
|
|
|
|
margin-right: 5px;
|
|
|
|
}
|
|
|
|
|
2021-08-02 07:59:44 +02:00
|
|
|
.todo-list {
|
2021-08-01 21:33:31 +02:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2021-08-02 07:59:44 +02:00
|
|
|
min-height: 10em;
|
|
|
|
}
|
2021-08-01 21:33:31 +02:00
|
|
|
|
|
|
|
.todo {
|
|
|
|
padding: 10px;
|
|
|
|
margin: 5px 0px 5px 0px;
|
2021-08-03 09:43:26 +02:00
|
|
|
background-color: var(--yellow);
|
2021-08-01 21:33:31 +02:00
|
|
|
border-radius: 5px;
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
align-items: center;
|
2021-08-03 09:43:26 +02:00
|
|
|
font-size: 1.2rem;
|
2021-08-01 21:33:31 +02:00
|
|
|
}
|
|
|
|
|
2021-08-03 09:43:26 +02:00
|
|
|
.todo.done {
|
|
|
|
/* background-color: #FEF9EF; */
|
2021-08-01 21:33:31 +02:00
|
|
|
}
|
|
|
|
|
2021-08-03 09:43:26 +02:00
|
|
|
.done p {
|
|
|
|
/* text-decoration: line-through; */
|
|
|
|
color: var(--cream);
|
2021-08-01 21:33:31 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.todo button {
|
|
|
|
margin-left: auto;
|
2021-08-03 09:43:26 +02:00
|
|
|
background-color: var(--green);
|
|
|
|
border-color: var(--green);
|
|
|
|
font-size: 1rem;
|
|
|
|
color: var(--cream)
|
|
|
|
}
|
|
|
|
|
|
|
|
.todo.done button {
|
|
|
|
background-color: var(--red);
|
|
|
|
border-color: var(--red);
|
|
|
|
color:var(--cream);
|
2021-08-01 21:33:31 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|