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

1.3k

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

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

Author:
S. Patel

2 years ago

9.1k
Number counter input

Author:
Prem..

2 years ago

15.7k
Code card with copy Button
this example uses clipboard.js to copy the code

Author:
Akmaljon Muhammadjonov

6 months ago

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

Author:
Ameth Galarcio

1 year ago

2k
Simple count down timer

Author:
Alfredo Pineda Hernández

2 years ago

9.5k
Detect Screen Breakpoints with Tailwind CSS

Author:
Prajwal Hallale

3 years ago

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

1.8k
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.

Author:
Prashant

2 years ago

14.3k
Read more / Show more button with hide button
"hide" button that appears when the additional content is displayed:

Author:
Prajwal Hallale

2 years ago

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

Author:
Freja Jensen

2 years ago

12.6k
Sticky fullpage pages / slides

Author:
Laurits

2 years ago

14.9k
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Author:
Ameth Galarcio

1 year ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components