<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<style>
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
margin: 0;
padding: 20px;
background: #f4f4f4;
}
.kanban-board {
display: flex;
gap: 20px;
overflow-x: auto;
}
.column {
background: white;
border-radius: 8px;
width: 300px;
padding: 10px;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.column h2 {
font-size: 18px;
margin-bottom: 10px;
}
.task {
background: #e0e0e0;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
cursor: grab;
}
.task:active {
cursor: grabbing;
}
.add-task {
margin-top: 10px;
}
.add-task input {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
margin-bottom: 5px;
border-radius: 4px;
}
.add-task button {
width: 100%;
padding: 6px;
background: #0073aa;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.add-task button:hover {
background: #005177;
}
</style>
</head>
<body>
<div class=”kanban-board”>
<div class=”column” ondrop=”drop(event)” ondragover=”allowDrop(event)”>
<h2>To Do</h2>
<div class=”task-list” id=”todo” data-column=”todo”>
<div class=”task” draggable=”true” ondragstart=”drag(event)”>Sample Task 1</div>
</div>
<div class=”add-task”>
<input type=”text” placeholder=”New task” id=”todo-input”>
<button onclick=”addTask(‘todo’)”>Add Task</button>
</div>
</div>
<div class=”column” ondrop=”drop(event)” ondragover=”allowDrop(event)”>
<h2>In Progress</h2>
<div class=”task-list” id=”inprogress” data-column=”inprogress”></div>
<div class=”add-task”>
<input type=”text” placeholder=”New task” id=”inprogress-input”>
<button onclick=”addTask(‘inprogress’)”>Add Task</button>
</div>
</div>
<div class=”column” ondrop=”drop(event)” ondragover=”allowDrop(event)”>
<h2>Done</h2>
<div class=”task-list” id=”done” data-column=”done”></div>
<div class=”add-task”>
<input type=”text” placeholder=”New task” id=”done-input”>
<button onclick=”addTask(‘done’)”>Add Task</button>
</div>
</div>
</div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData(“text”, ev.target.outerHTML);
ev.target.remove();
}
function drop(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData(“text”);
ev.target.closest(‘.column’).querySelector(‘.task-list’).insertAdjacentHTML(‘beforeend’, data);
}
function addTask(columnId) {
const input = document.getElementById(`${columnId}-input`);
const taskText = input.value.trim();
if (!taskText) return;
const taskList = document.getElementById(columnId);
const task = document.createElement(“div”);
task.className = “task”;
task.draggable = true;
task.ondragstart = drag;
task.textContent = taskText;
taskList.appendChild(task);
input.value = “”;
}
</script>
</body>
</html>
