batracos/svelte-playground
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Inactive button logic and style

Browse Source
This commit is contained in:
Giulio Alessandrini 2021-08-02 07:59:31 +02:00
parent 9ded69a288
commit 4fc8ca4e25
1 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/apps/todoApp.svelte
View File

@ -1,7 +1,7 @@
<script> <script>
import {todos} from "$lib/stores/todos.js"; import {todos} from "$lib/stores/todos.js";
let todo_text = ""; let todo_text = "";
let todo_type = "all"; let todo_type = "active";
let filteredTodo = []; let filteredTodo = [];
let addTodo = () => { let addTodo = () => {
if (todo_text.length > 0) { if (todo_text.length > 0) {
@ -46,12 +46,12 @@
<div class = "panel"> <div class = "panel">
<h2 class= "title">TODO</h2> <h2 class= "title">TODO</h2>
<hr/> <hr/>
<input bind:value="{todo_text}"/> <input bind:value="{todo_text}" placeholder="title"/>
<button on:click="{addTodo}">Add</button> <button on:click="{addTodo}" disabled = {todo_text.length == 0} class = {todo_text.length == 0 ? 'disabled' : ''}>add</button>
<div class="todo-filter"> <div class="todo-filter">
<button on:click="{() => filterTodo('active')}">active</button> <button on:click="{() => filterTodo('active')}" class = {todo_type == 'active' ? 'disabled' : ''}>active</button>
<button on:click="{() => filterTodo('done')}">done</button> <button on:click="{() => filterTodo('done')}" class = {todo_type == 'done' ? 'disabled' : ''}>done</button>
<button on:click="{() => filterTodo('all')}">all</button> <button on:click="{() => filterTodo('all')}" class = {todo_type == 'all' ? 'disabled' : ''}>all</button>
</div> </div>
<ul class = "todo-list"> <ul class = "todo-list">
{#each filteredTodo as todo} {#each filteredTodo as todo}
@ -80,6 +80,14 @@ button {
border-radius: 5px; border-radius: 5px;
} }
.disabled {
background-color: var(--gray);
}
button:active {
background-color: var(--gray);
}
hr { hr {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;