DEV Community 👩‍💻👨‍💻

Cover image for Simple to-do list made with sveltekit and tailwind !
Kodah_
Kodah_

Posted on

Simple to-do list made with sveltekit and tailwind !

HTML

{#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}
Enter fullscreen mode Exit fullscreen mode

Javascript / Svelte

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);
    }

Enter fullscreen mode Exit fullscreen mode

Link to repository :
GitHub

Top comments (2)

Collapse
samjohnsondev profile image
Sam Johnson

Hey, this looks great! A couple of pointers. You don't need to import the each function from the svelte internals you can just use it straight away in your template. I think this would be even better split across into a few components? Have a look at how props and state is handled in svelte so you can share data across the components. Svelte stores are really good.

Collapse
kodah profile image
Kodah_ Author • Edited on

Thanks bro, I'm starting at svelte now, I'm going to look for the stores, and keep studying this js framework .

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.