DEV Community 👩‍💻👨‍💻

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

Posted on

Simple to-do list made with sveltekit and tailwind !


{#each tasks as task}
                    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>

                        class="w-6 cursor-pointer transition-transform ease-out duration-150 hover:-translate-y-1"
Enter fullscreen mode Exit fullscreen mode

Javascript / Svelte

let tasks = [];
    let msg = '';

    function addTask() {
        if (msg === '') return;

        let _id = * Math.random();

        tasks = tasks.concat({ id: _id, check: false, text: msg});
        msg = '';

    function deleteTask(id) {
        tasks = tasks.filter((element) => !== id);

Enter fullscreen mode Exit fullscreen mode

Link to repository :

Top comments (2)

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.

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.