Todo

This is the last tutorial, where we proceed and go on to make a todo app with svelte native. I personally don't prefer it, that doesn't mean that you should not try it. I will continue on using java to make android apps in future. React Native and all is a dellusion, infact AI/ML, cryptocurrency everything is a dillusion there are many dumb people out there and too many smart people who are too dumb to realize that they are dumb

1. Lets start by initializing the script tag!

we will create an array of todos and a variable input to bind to create a new todo


<script>
	let todos = [];
	let newTodo = '';
</script>

2. Lets create a method addTodo to add some todo

It will seamlessly add todo to our array!


function addTodo() {
	if (newTodo.trim() !== '') {
		todos = [...todos, { id: Date.now(), text: newTodo, completed: false }];
		newTodo = '';
	}
}

3. Lets create a method to remove a todo and lets call it removeTodo

It will take the id and ensure that the right todo has been removed from the todo array!


function removeTodo(id) {
	todos = todos.filter(todo => todo.id !== id);
}

4. Lets make a toggle checkpoint to tell if that particular work or todo has been completed or not!

we will create a method called toggleCompleted with an id parameter to tell which todo has been completed by us!


function toggleComplete(id) {
	todos = todos.map(todo =>
		todo.id === id ? { ...todo, completed: !todo.completed } : todo
	);
}

5. This is our overall script!

Take a good look at it, I have left some bugs in it for you to work at it


<script>
	let todos = [];
	let newTodo = '';

	function addTodo() {
		if (newTodo.trim() !== '') {
			todos = [...todos, { id: Date.now(), text: newTodo, completed: false }];
			newTodo = '';
		}
	}

	function removeTodo(id) {
		todos = todos.filter(todo => todo.id !== id);
	}

	function toggleComplete(id) {
		todos = todos.map(todo =>
			todo.id === id ? { ...todo, completed: !todo.completed } : todo
		);
	}
</script>

6. Creating the frontend

Lets create a good layout for displaying and adding todos.


<frame>
<page>
	<actionBar title="Svelte Native Todo App" />

	<stackLayout>
		<textField bind:value={newTodo} hint="Add a new todo" />

		<button text="Add Todo" on:tap={addTodo} />

		<listView items={todos}>
			<ng-template let:todo="item">
				<gridLayout columns="auto, *, auto" padding="10" margin="5" borderWidth="1" borderColor="gray">
					<checkBox checked={todo.completed} on:tap={() => toggleComplete(todo.id)} />
					<label text={todo.text} textDecoration={todo.completed ? 'line-through' : 'none'} />
					<button text="Remove" on:tap={() => removeTodo(todo.id)} />
				</gridLayout>
			</ng-template>
		</listView>
	</stackLayout>
</page>
</frame>

Svelte JS

Svelte Native

Tanishq Dhote