Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Alpine.js Todo App Demo (with Tailwind). Please feel free to fork and refactor with improvements! Motivation/details here https://www.kdobson.net/2020/alpine-js-todo-demo/)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Alpine.js Todo Demo</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css">
<meta charset="utf-8">
</head>
<body class="bg-gray-300 text-gray-800">
<div class='container mt-16 mx-auto lg:w-2/5 md:w-1/2 sm:w-7/8 bg-white shadow-lg rounded-lg'>
<div class='p-6'>
<h1 class='text-2xl'>Alpine Todo</h1>
<div class="border-t border-gray-100 my-2"></div>
<div x-data="state">
<div class='mb-4'>
<div class="hidden sm:block">
<div class="border-b border-gray-200">
<nav class="-mb-px flex">
<a href="#"
:class=" show_todo ? 'w-1/2 py-4 px-1 text-center border-b-2 border-indigo-500 font-medium text-sm leading-5 text-indigo-600 focus:outline-none focus:text-indigo-800 focus:border-indigo-700' : 'w-1/2 py-4 px-1 text-center border-b-2 border-transparent font-medium text-sm leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300'"
@click.prevent="show_todo = true">
Todo
</a>
<a href="#"
:class=" !show_todo ? 'w-1/2 py-4 px-1 text-center border-b-2 border-indigo-500 font-medium text-sm leading-5 text-indigo-600 focus:outline-none focus:text-indigo-800 focus:border-indigo-700' : 'w-1/2 py-4 px-1 text-center border-b-2 border-transparent font-medium text-sm leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300'"
@click.prevent="show_todo = false">
Done
</a>
</nav>
</div>
</div>
</div>
<template x-for="todo in todos" :key="todo.id">
<div x-show="todo.todo === show_todo" class='transform transition origin-top'>
<div class=" flex items-center">
<input :id=" todo.id" type="checkbox"
class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out"
:checked="!todo.todo" @click="setTimeout(function() {todo.todo = !todo.todo}, 1000)" />
<label :for="todo.id" class="ml-2 block text-md leading-6 text-gray-900">
<span x-text="todo.text"></span>
</label>
</div>
</div>
</template>
<div x-show="show_todo" class='mt-4'>
<label for="add_todo" class="ml-2 block text-sm leading-5 text-gray-900">Add a todo:</label>
<input type="text" id="add_todo" class='form-input'
@keyup.enter="todos.push({id: (+ new Date()), text: $event.target.value, todo: true});">
</div>
</div>
</div>
</div>
<script>
let state = {
todos: [
{ id: 1, text: 'First thing', todo: true },
{ id: 2, text: 'Second thing', todo: true },
{ id: 3, text: 'Done thing', todo: true },
],
show_todo: true
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.