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/)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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