Interactive Kanban Board

Kanban board with draggable tasks

This tailwind example is contributed by Quentin Rivers, on 05-Oct-2024. Component is made with Tailwind v3.4. It is responsive.

Widget

Author Quentin Rivers

Tailwind v3.4 3.1k 4

Fork Fullscreen

<div class="bg-gray-100 min-h-screen p-8">
  <div class="container mx-auto">
    <h1 class="text-3xl font-bold text-center mb-8">Kanban Board</h1>

<div class="flex-1 bg-gray-200 p-4 rounded-lg shadow">
        <h2 class="text-xl font-semibold mb-4">In Progress</h2>
        <ul id="progress-list" class="min-h-[200px] space-y-2">
        </ul>
      </div>

<div id="task-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
      <h3 class="text-lg font-semibold mb-4">Add New Task</h3>
      <input id="task-title" type="text" placeholder="Task Title" class="w-full p-2 mb-4 border rounded">
      <textarea id="task-description" placeholder="Task Description" class="w-full p-2 mb-4 border rounded h-24"></textarea>
      <div class="flex justify-end">
        <button onclick="closeTaskModal()" class="bg-gray-300 hover:bg-gray-400 text-black font-bold py-2 px-4 rounded mr-2">
                    Cancel
                </button>
        <button onclick="addTask()" class="bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded">
                    Add Task
                </button>
      </div>
    </div>
  </div>

let currentList = '';

function openTaskModal(listId) {
            currentList = listId;
            document.getElementById('task-modal').classList.remove('hidden');
        }

function closeTaskModal() {
            document.getElementById('task-modal').classList.add('hidden');
            document.getElementById('task-title').value = '';
            document.getElementById('task-description').value = '';
        }

function addTask() {
            const title = document.getElementById('task-title').value;
            const description = document.getElementById('task-description').value;
            if (title) {
                const taskId = 'task-' + Date.now();
                const taskElement = createTaskElement(taskId, title, description);
                document.getElementById(currentList + '-list').appendChild(taskElement);
                closeTaskModal();
            }
        }

function updateTaskStatus(taskId, newListId) {
            console.log(`Task ${taskId} moved to ${newListId}`);
            // Here you would typically update the task status in your backend
        }

function editTask(taskId) {
            const taskElement = document.getElementById(taskId);
            const title = taskElement.querySelector('h3').textContent;
            const description = taskElement.querySelector('p').textContent;
            
            document.getElementById('task-title').value = title;
            document.getElementById('task-description').value = description;
            
            currentList = taskElement.parentElement.id.replace('-list', '');
            openTaskModal(currentList);
            
            taskElement.remove();
        }

function deleteTask(taskId) {
            if (confirm('Are you sure you want to delete this task?')) {
                document.getElementById(taskId).remove();
            }
        }
  </script>
</div>

</html>

Related Examples

3D Count downer

Hasan AlDoy (McDoy)

5 months ago

321
Simple count down timer

Alfredo Pineda Hernández

3 years ago

10.5k
Dialpad with display text
A simple dialpad fork from @brandon and added display text and changed color

Jerome Soriano

2 years ago

2.6k
Number counter input

Prem..

3 years ago

16.8k
Play Music - Reproductor
Multimedia music player, with its respective dark mode

Ameth Galarcio

2 years ago

3.1k
Detect Screen Breakpoints with Tailwind CSS

Prajwal Hallale

4 years ago

8.6k
Working back to top button
The "Scroll to top" button becomes visible when the user starts to scroll the page Clicking on that button takes you back to the top of the page. This is a great feature to have on any website especially if your content is long.

Prashant

4 years ago

15.6k
Card-Product
Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

Ameth Galarcio

2 years ago

3.3k
Strong password generator
With following options Password length: Include Uppercase Letters: Include Numbers: Include Symbols:

S. Patel

3 years ago

10.4k
Working reading progress bar
show how much of the page has been scrolled

Freja Jensen

3 years ago

13.4k
WYSIWYG Editor Form
Form with CKEditor

I.P. Leroy

3 years ago

16.3k
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS
LEADING PAGEarkitect® Building the future, today. CODE BY OMERLINKS

Omer fils ELENGA

1 week ago

22