Drag & Drop Kanban Board in Vanilla JavaScript

				
					const columns = document.querySelectorAll(".column");
let boardData = JSON.parse(localStorage.getItem("kanban-data")) || {
  todo: [],
  inprogress: [],
  done: [],
};

function saveBoard() {
  localStorage.setItem("kanban-data", JSON.stringify(boardData));
}

function renderBoard() {
  columns.forEach(col => {
    const status = col.dataset.status;
    const taskContainer = col.querySelector(".tasks");
    taskContainer.innerHTML = "";
    boardData[status].forEach((task, index) => {
      const el = document.createElement("div");
      el.className = "task";
      el.textContent = task;
      el.draggable = true;
      el.dataset.index = index;
      el.addEventListener("dragstart", dragStart);
      taskContainer.appendChild(el);
    });
  });
}

function dragStart(e) {
  const col = e.target.closest(".column").dataset.status;
  e.dataTransfer.setData("text/plain", JSON.stringify({
    status: col,
    index: e.target.dataset.index
  }));
}

columns.forEach(col => {
  col.addEventListener("dragover", e => e.preventDefault());
  col.addEventListener("drop", e => {
    e.preventDefault();
    const {status, index} = JSON.parse(e.dataTransfer.getData("text/plain"));
    const newStatus = col.dataset.status;
    const [task] = boardData[status].splice(index, 1);
    boardData[newStatus].push(task);
    saveBoard();
    renderBoard();
  });

  col.querySelector(".add-task").addEventListener("click", () => {
    const text = prompt("Enter task:");
    if (text) {
      boardData[col.dataset.status].push(text);
      saveBoard();
      renderBoard();
    }
  });
});

renderBoard();