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