diff --git a/src/lib/apps/todoApp.svelte b/src/lib/apps/todoApp.svelte
index 66f2db0..9b30943 100644
--- a/src/lib/apps/todoApp.svelte
+++ b/src/lib/apps/todoApp.svelte
@@ -15,14 +15,17 @@
$todos = [todo, ...$todos];
}
}
- let clearTodo = (todo) => {
+ let solveTodo = (todo) => {
if(todo.done) {
- $todos = $todos.filter(x => x != todo)
+ todo.done = false;
}
else {
todo.done = true;
- $todos = $todos
}
+ $todos = $todos
+ }
+ let clearTodo = (todo) => {
+ $todos = $todos.filter(x => x != todo)
}
let filterTodo = (type) => {
todo_type = type;
@@ -60,7 +63,12 @@
{#each filteredTodo as todo}
{todo.text}
-
+
+ {#if todo.done}
+
+ {/if}
+
+
{/each}
@@ -122,9 +130,10 @@ button {
.todo-input {
font-size: 0px;
margin: 1rem;
+ display: flex;
}
.todo-text {
- padding: 4px;
+ padding: 1rem;
margin: 0px;
border: solid white 2px;
border-right: 0px;
@@ -133,6 +142,7 @@ button {
border-top-left-radius: 5px;
font-family: 'Atkinson Hyperlegible', sans-serif;
font-size: 1rem;
+ width: 100%;
}
.todo-text:focus {
@@ -141,6 +151,7 @@ button {
}
.todo-add {
+ padding: 1rem;
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
}
@@ -166,19 +177,27 @@ button:active.disabled {
margin-top: 1rem;
display: flex;
align-items: center;
- justify-content: center;
+ padding-left: 1rem;
}
.todo-filter button {
- margin-right: 0.5rem;
+ 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
@@ -199,33 +218,56 @@ button:active.disabled {
.todo {
padding: 0.5rem;
margin-bottom: 0.5rem;
- background-color: var(--yellow);
+ 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 {
- padding: 3px;
- margin-left: auto;
- background-color: var(--green);
- border: solid 3px var(--green);
- color: var(--cream)
+ width: 2rem;
+ height: 2rem;
+ padding: 0rem;
+ border: solid 0.2rem;
+ border-radius: 1rem;
}
-.todo.done button {
+
+/* 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);
- color: black;
+ border-color: var(--yellow)
+}
+.todo.done button:active {
+ background-color: var(--yellow);
+ border-color: var(--yellow)
}
\ No newline at end of file