Canban

HTML

type ColumnID = "backlog" | "doing" | "qa" | "production";

interface Card {
  id: string;
  title: string;
  description: string;
}

function addCard(columnId: ColumnID): void {
  const column = document.getElementById(columnId) as HTMLElement;
  const titleInput = column.querySelector(
    ".add-card input",
  ) as HTMLInputElement;
  const descriptionInput = column.querySelector(
    ".add-card textarea",
  ) as HTMLTextAreaElement;
  const title = titleInput.value.trim();
  const description = descriptionInput.value.trim();

  if (title !== "" && description !== "") {
    const card: Card = {
      id: Date.now().toString(),
      title,
      description,
    };

    const cardElement = createCardElement(card);
    column.querySelector(".cards")?.appendChild(cardElement);

    titleInput.value = "";
    descriptionInput.value = "";
  } else {
    alert("Please enter both a title and a description for the card.");
  }
}

function createCardElement(card: Card): HTMLElement {
  const cardElement = document.createElement("div");
  cardElement.className = "card";
  cardElement.draggable = true;

  const cardTitle = document.createElement("h3");
  cardTitle.textContent = card.title;

  const cardDescription = document.createElement("p");
  cardDescription.textContent = card.description;

  const deleteBtn = document.createElement("button");
  deleteBtn.className = "delete-btn";
  deleteBtn.innerHTML = "×";
  deleteBtn.onclick = () => cardElement.remove();

  cardElement.appendChild(cardTitle);
  cardElement.appendChild(cardDescription);
  cardElement.appendChild(deleteBtn);

  cardElement.addEventListener("dragstart", dragStart);
  cardElement.addEventListener("dragend", dragEnd);

  return cardElement;
}

function dragStart(e: DragEvent): void {
  const target = e.target as HTMLElement;
  e.dataTransfer?.setData("text/plain", target.id);
  target.classList.add("dragging");
}

function dragEnd(e: DragEvent): void {
  const target = e.target as HTMLElement;
  target.classList.remove("dragging");
}

function allowDrop(e: DragEvent): void {
  e.preventDefault();
}

function drop(e: DragEvent): void {
  e.preventDefault();
  const draggedCard = document.querySelector(".dragging") as HTMLElement;
  const targetColumn = (e.target as HTMLElement).closest(
    ".column",
  ) as HTMLElement;
  if (targetColumn) {
    targetColumn.querySelector(".cards")?.appendChild(draggedCard);
  }
}

document.querySelectorAll(".column").forEach((column) => {
  column.addEventListener("dragover", allowDrop);
  column.addEventListener("drop", drop);
});

HTML CanbanCSS CanbanJS Canban