LEt’s build simple TODO app with Tailwind CSS and Alpine JS.
A TODO is a list of things that need to be done. It’s a great way to keep track of tasks and prioritize them. It can be used for anything from personal projects to work tasks.
Understanding the code:
x-data="{ todos: [], newTodo: '', addTodo() { ... }, removeTodo(index) { ... }, initializeTodos() { ... } }"
: This is the data that will be used to store the todos.@click="addTodo"
: This is the event listener that will add a new todo when the button is clicked.x-model="newTodo"
: This is the input that will be used to store the new todo.@keydown.enter="addTodo"
: This is the event listener that will add a new todo when the enter key is pressed.x-for="(todo, index) in todos"
: This is the loop that will be used to iterate over the todos.:key="index"
: This is the key that will be used to uniquely identify each todo.<input type="checkbox" x-model="todo.completed">
: This is the checkbox that will be used to mark each todo as completed or not.<span x-text="todo.text" :class="{ 'line-through': todo.completed }">
: This is the text that will be used to display the text of each todo.<button @click="removeTodo(index)">
: This is the button that will be used to remove each todo.Classes are removed for brevity, but I’ll keep those classes relevant to the tutorial.
<div
x-data="{
todos: [],
newTodo: '',
addTodo() {
if (this.newTodo.trim() !== '') {
this.todos.push({ text: this.newTodo, completed: false });
this.newTodo = '';
localStorage.setItem('todos', JSON.stringify(this.todos));
}
},
removeTodo(index) {
this.todos.splice(index, 1);
localStorage.setItem('todos', JSON.stringify(this.todos));
},
initializeTodos() {
const storedTodos = localStorage.getItem('todos');
if (storedTodos) {
this.todos = JSON.parse(storedTodos);
}
}
}"
x-init="initializeTodos">
<!-- Input to add new todo -->
<div>
<button
@click="addTodo"
>Add</button
>
<input
type="text"
x-model="newTodo"
@keydown.enter="addTodo"
/>
</div>
<!-- List of todos -->
<ul>
<template
x-for="(todo, index) in todos"
:key="index">
<li >
<div >
<div>
<input
type="checkbox"
x-model="todo.completed"
/>
<span
x-text="todo.text"
:class="{ 'line-through': todo.completed }"
></span>
</div>
<button
@click="removeTodo(index)"
><svg>
<!-- SVG Path -->
</svg>
</button>
</div>
</li>
</template>
</ul>
</div>
This is a simple TODO app that can be used to keep track of tasks and prioritize them. It can be used for anything from personal projects to work tasks. Remember that before using this code you will have to make it accessible to your users by adding the necessary HTML and CSS.
Hope you enjoyed this tutorial and have a great day!
/Michael Andreuzza
Get lifetime access to every theme available today for $199 $139 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
— No subscription required!