Todo App With Svelte

 In this tutorial, you will learn How To Create a Todo App using Svelte.

1. Creating Svelte Project

To create Svelte Project you can use npx degit sveltejs/template my-svelte-project command and paste it into your terminal. After pasting it will create a new Svelte Project.

2. Creating Todo App

The above code is the logic of our Todo App. We write our JavaScript logic inside the <script> tag in Svelte.

Above you have an empty list named todos and a variable with an empty string to bind it with the <input> tag so that we can get the value of todo.

After that, we have a function that handles the todos and concat them and then we have a delete function to delete a todo, the delete function takes a parameter and we filter the todos array with the parameter and it will remove the particular todo item.

3. Binding Input Tag

Now below we have the HTML part of our Todo App and we bind the input tag with the above empty string and assign the function with the form and delete button in order for it to function.

We also have looped the array with svelte's {#each} to show it in the frontend. The array has objects and we only show the title of the todo.

Thank you for reading the article and if you like to watch a tutorial on this you can watch it here.

LIVE DEMO