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.
Use cases:
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 relveant 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!
"I bought a beautiful theme from Lexington a couple weeks ago. I didn't know Astro at the time, but Michael helped me get set up and really went above and beyond with his support. Now I'm happily redoing my site to look gorgeous with his template."
Stuart
Creator of saasydb.com
"Michael is one of the best designers on Twitter, would highly recommend his Lexington Themes if you want something in tailwind that doesn’t look the same as everyone else!"
Alex Hughes
letsloopin.com
Get lifetime access to every theme available today for $199 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
No subscription required!
Lexington
Beautifully designed HTML, Astro.js and Tailwind themes! Save months of time and build your startup landing page in minutes.