Home
Quentin Rivers
Interactive Kanban Board

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 CSS v3. It is responsive.

Widget

Author Quentin Rivers

2.5k

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

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

Author:
Freja Jensen

3 years ago

13k
Simple count down timer

Author:
Alfredo Pineda Hernández

2 years ago

10k
Speedometer Example
Internet speed meter, gauge meter

Author:
Brandon D

3 years ago

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

Author:
Komal Jain

1 year ago

2.7k
Detect Screen Breakpoints with Tailwind CSS

Author:
Prajwal Hallale

3 years ago

8.5k
Dash.OS: Drag & Drop Dashboard Widget System
A fully interactive, freeform dashboard builder for the browser. Drop in widgets, drag them anywhere, resize to fit, and your layout is automatically remembered. Ships with a live Chart.js revenue chart, KPI stats, a task tracker, and a notifications feed, all in a single zero-dependency HTML file with dark/light mode built in.

Author:
Ijila Itunu

5 days ago

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

Author:
S. Patel

2 years ago

9.7k
Progress bar with Tailwind CSS and Javascript
How to a create a scroll progress bar with Tailwind CSS and Javascript

Author:
Michael Andreuzza

1 year ago

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

Author:
Komal Jain

1 year ago

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

Author:
Alok

2 years ago

18.9k
Number counter input

Author:
Prem..

3 years ago

16.5k
Multi-Step Form Wizard
Working Multi-Step Form more complex forms. made with tailwind CSS v3 and javascript

Author:
Quentin Rivers

1 year ago

7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components