102 lines
2.0 KiB
Svelte
102 lines
2.0 KiB
Svelte
<script>
|
|
import {todos} from "$lib/stores/todos.js"
|
|
let todo_text = ""
|
|
let addTodo = () => {
|
|
if (todo_text.length > 0) {
|
|
const todo = {
|
|
text: todo_text,
|
|
date: Date.now,
|
|
done: false
|
|
}
|
|
$todos = [todo, ...$todos];
|
|
}
|
|
}
|
|
let clearTodo = (todo) => {
|
|
if(todo.done)
|
|
$todos = $todos.filter(x => x != todo)
|
|
else
|
|
todo.done = true;
|
|
$todos = $todos;
|
|
}
|
|
</script>
|
|
|
|
<div class = "panel">
|
|
<h2 class= "title">
|
|
TODO
|
|
</h2>
|
|
<input bind:value="{todo_text}"/>
|
|
<button on:click="{addTodo}">Add</button>
|
|
<div class = "todo-list">
|
|
{#each $todos as todo}
|
|
<div class = "todo {todo.done ? 'done' : ''}">
|
|
<p>{todo.text}</p>
|
|
<button on:click="{() => clearTodo(todo)}">{todo.done ? '✗' : '✓'}</button>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
|
|
input {
|
|
padding: 5px;
|
|
margin: 0px;
|
|
border: solid rgb(182, 182, 182) 1px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
button {
|
|
padding: 5px;
|
|
margin: 0px;
|
|
border: solid rgb(182, 182, 182) 1px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.panel {
|
|
background-color: rgb(245, 253, 255);
|
|
padding: 10px;
|
|
border: solid rgb(182, 182, 182) 1px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.title {
|
|
padding: 5px;
|
|
margin: 0px;
|
|
margin-left: 5px;
|
|
font-family: Georgia, 'Times New Roman', Times, serif;
|
|
font-weight: 400;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
/* .todo-list {
|
|
padding: 5px;
|
|
background-color: azure;
|
|
display: flex;
|
|
flex-direction: column;
|
|
} */
|
|
|
|
.todo {
|
|
padding: 10px;
|
|
margin: 5px 0px 5px 0px;
|
|
background-color: rgb(255, 255, 255);
|
|
border: solid rgb(182, 182, 182) 1px;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.done p {
|
|
text-decoration: line-through
|
|
}
|
|
|
|
.todo p {
|
|
padding: 0px;
|
|
margin: 0px 10px 0px 0px;
|
|
}
|
|
|
|
.todo button {
|
|
margin-left: auto;
|
|
}
|
|
|
|
</style> |