Card.svelte

<script>
    import { onDestroy } from 'svelte';
    import Task from "./Task.svelte";
    import TaskItem from "./task-store";
    import Button from '../UIComponent/Button.svelte';

    //list title variable
    export let title;

    let tasks;

    const unsubscribe = TaskItem.subscribe((tsks) => {
        tasks = tsks;
    });

    onDestroy(() => {
        if (unsubscribe) {
            unsubscribe();
        }
    });

    //textarea value
    let textarea_value = "";

    let task_visible = false;

    function newTaskHandler() {
        task_visible = true;
    }

    function cancelHandler() {
        task_visible = false;
    }

    async function saveHandler() {
        if (textarea_value === '') {
            return;
        }
        const task = {
            id: tasks.length + 1,
            title: textarea_value,
            checkLists: [],
            done: false,
        };

        TaskItem.update((items) => {
            return [...items, task];
        });

        console.log(tasks);

        textarea_value = "";

        task_visible = false;
    }
</script>

<article>
    <div class="header">
        <p class="title">{title}</p>
    </div>
    <div>
        {#if title === "Tasks"}
            {#each tasks.filter((t) => !t.done) as task (task.id)}
                <Task
                    task={task}
                />
            {/each}
            {#if task_visible}
                <div class="newTask">
                    <div class="new_task_detail">
                        <textarea
                            class="task_title"
                            placeholder="Enter a title"
                            bind:value={textarea_value}
                        />
                    </div>
                </div>
            {/if}
        {:else}
            {#each tasks.filter((t) => t.done) as d (d.id)}
                <Task
                    task={d}
                />
            {/each}
        {/if}
    </div>
    <footer>
        {#if title === "Tasks"}
            {#if task_visible}
                <div class="right_side_button">
                    <Button on:click={saveHandler}>Save</Button>
                    <Button on:click={cancelHandler}>Cancel</Button>
                </div>
            {:else}
                <a href="#" on:click={newTaskHandler}>Add a task</a>
            {/if}
        {/if}
    </footer>
</article>