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

Code Block with Copy Button
this example uses clipboard.js to copy the code

Alok

3 years ago

19.3k
Sticky fullpage pages / slides

Hasan AlDoy (McDoy)

1 year ago

2k
Speedometer Example
Internet speed meter, gauge meter

Brandon D

4 years ago

15.3k
Floating Call Widget
Floating Call Widget - Pure CSS + HTML + JS

Sayista Yazdani

15 hours ago

3
Sticky fullpage pages / slides

Laurits

3 years ago

16.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
Progress bar with Tailwind CSS and Javascript
How to a create a scroll progress bar with Tailwind CSS and Javascript

Michael Andreuzza

2 years ago

3.1k
3D Count downer

Hasan AlDoy (McDoy)

5 months ago

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

Jerome Soriano

2 years ago

2.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
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Ameth Galarcio

2 years ago

2.6k