Simple to-do list made with sveltekit and tailwind !

{#each tasks as task}                <div                    on:click={activeTask}                    class="w-full h-10  border-[#a181be]  justify-between  rounded-sm px-2 bg-[#F0D9FF] flex items-center cursor-pointer"                >                    <p class="text-black " id="out">{task.text}</p>                    <img                        on:click={deleteTask(task.id)}                        class="w-6 cursor-pointer transition-transform ease-out duration-150 hover:-translate-y-1"                        src={Trashimg}                        alt=""                    />                </div>            {/each}

let tasks = [];    let msg = '';    function addTask() {        if (msg === '') return;        let _id = Date.now() * Math.random();        tasks = tasks.concat({ id: _id, check: false, text: msg});        msg = '';    }    function deleteTask(id) {        tasks = tasks.filter((element) => element.id !== id);    }