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 3k 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

Exapnd and collapse button for large content without javascript
Truncate and expand on click large content without using JavaScript.

Komal Jain

2 years ago

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

Ameth Galarcio

2 years ago

3k
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
Sticky fullpage pages / slides
Sticky full page

harinandana

10 months ago

972
Floating Call Widget
Floating Call Widget - Pure CSS + HTML + JS

Sayista Yazdani

1 month ago

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

Jerome Soriano

1 year ago

2.5k
Exapnd and collapse button for large content
Truncate and expand on click large content with javascript. uses line clamp.

Komal Jain

2 years ago

3k
Simple count down timer

Gopi Yadav

3 years ago

15.5k
Music Player

Abhijit Sen

3 years ago

18.4k
Windows

Maxim

8 months ago

509
pages / slides

MD Fardous Alom

1 year ago

2.1k
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.2k