script.js

const addTaskbtn = document.querySelector("#addTaskbtn");
const taskPopUp = document.querySelector("#taskPopup");
const createTaskbtn = document.querySelector("#createTaskbtn");
const taskInput = document.querySelector("#taskInput");
const pinkBtn = document.querySelector(".pinkColour");
const blueBtn = document.querySelector(".blueColour");
const greenBtn = document.querySelector(".greenColour");

let editSticky = null;
let editStatus = null;

const editPopup = document.querySelector("#editPopup");
const editInput = document.querySelector("#editInput");
const saveEditBtn = document.querySelector("#saveEditBtn");

const editPink = document.querySelector(".editPink");
const editBlue = document.querySelector(".editBlue");
const editGreen = document.querySelector(".editGreen");

// audio for DONE ding
// put a small ding sound at this path, for example "ding.mp3"
const doneSound = new Audio("ding.mp3");

addTaskbtn.addEventListener("click", function () {
  taskPopUp.classList.remove("hidden");
});

function clearSelections() {
  document.querySelectorAll(".color-btn div").forEach((div) => {
    div.classList.remove("selected-colour");
  });
}

let selectedColour = null;

pinkBtn.addEventListener("click", function () {
  selectedColour = "todo";
  clearSelections();
  pinkBtn.classList.add("selected-colour");
});

blueBtn.addEventListener("click", function () {
  selectedColour = "doing";
  clearSelections();
  blueBtn.classList.add("selected-colour");
});

greenBtn.addEventListener("click", function () {
  selectedColour = "done";
  clearSelections();
  greenBtn.classList.add("selected-colour");
});

createTaskbtn.addEventListener("click", function () {
  let text = taskInput.value.trim();

  if (text === "") {
    alert("Please enter a task");
    return;
  }

  if (!selectedColour) {
    alert("Please pick a task status!");
    return;
  }

  createSticky(text, selectedColour);

  taskPopUp.classList.add("hidden");

  selectedColour = null;
  taskInput.value = "";
});

function makeStickyDraggable(sticky) {
  sticky.setAttribute("draggable", "true");

  sticky.addEventListener("dragstart", (e) => {
    e.dataTransfer.setData("text/plain", sticky.id);
    sticky.classList.add("dragging");
  });

  sticky.addEventListener("dragend", () => {
    sticky.classList.remove("dragging");
  });
}

let stickyIdCounter = 0;

function createSticky(text, status) {
  let sticky = document.createElement("div");
  sticky.classList.add("sticky-note");

  // unique id for drag-and-drop
  stickyIdCounter += 1;
  sticky.id = "sticky-" + stickyIdCounter;

  let taskText = document.createElement("p");
  taskText.innerText = text;
  sticky.appendChild(taskText);

  let deleteBtn = document.createElement("button");
  deleteBtn.innerText = "✖";
  deleteBtn.classList.add("delete-btn");

  let editBtn = document.createElement("button");
  editBtn.innerText = "✎";
  editBtn.classList.add("edit-btn");
  editBtn.addEventListener("click", function () {
    editSticky = sticky; // store this sticky
    editInput.value = taskText.innerText; // load existing text

    // pre-select correct colour
    clearEditColours();
    if (status === "todo") editPink.classList.add("selected-edit");
    if (status === "doing") editBlue.classList.add("selected-edit");
    if (status === "done") editGreen.classList.add("selected-edit");

    editStatus = status; // store current status

    editPopup.classList.remove("hidden");
  });

  sticky.appendChild(editBtn);

  deleteBtn.addEventListener("click", function () {
    sticky.remove(); // deletes the sticky
  });

  sticky.appendChild(deleteBtn);

  // initial placement
  placeStickyInColumn(sticky, status, true);

  // make draggable
  makeStickyDraggable(sticky);
}

function placeStickyInColumn(sticky, status, fromCreate = false) {
  if (status === "todo") {
    document.querySelector(".todo").appendChild(sticky);
    sticky.style.backgroundColor = "rgb(255, 177, 230)";
  } else if (status === "doing") {
    document.querySelector(".doing").appendChild(sticky);
    sticky.style.backgroundColor = "rgb(241, 224, 123)";
  } else if (status === "done") {
    document.querySelector(".done").appendChild(sticky);
    sticky.style.backgroundColor = "rgb(230, 255, 172)";
    // play ding when moved/created in DONE
    // user interaction (drag/click) has already happened so this is allowed in browsers [web:6][web:12][web:17]
    if (!fromCreate || fromCreate) {
      doneSound.currentTime = 0;
      doneSound.play().catch(() => {});
    }
  }
}

// drag-and-drop for columns
document.querySelectorAll("#task-status > div").forEach((column) => {
  column.addEventListener("dragover", (e) => {
    e.preventDefault();
  });

  column.addEventListener("drop", (e) => {
    e.preventDefault();
    const id = e.dataTransfer.getData("text/plain");
    const sticky = document.getElementById(id);
    if (!sticky) return;

    column.appendChild(sticky);

    // update status + border based on column class, and play sound if DONE
    if (column.classList.contains("todo")) {
      sticky.style.backgroundColor = "hsl(318, 100.00%, 83.90%)";
    } else if (column.classList.contains("doing")) {
      sticky.style.backgroundColor = "rgb(241, 224, 123)";
    } else if (column.classList.contains("done")) {
      sticky.style.backgroundColor = "rgb(230, 255, 172)";
      doneSound.currentTime = 0;
      doneSound.play().catch(() => {});
    }
  });
});

function clearEditColours() {
  document.querySelectorAll("#edit-color-section div").forEach((div) => {
    div.classList.remove("selected-edit");
  });
}

editPink.addEventListener("click", () => {
  clearEditColours();
  editPink.classList.add("selected-edit");
  editStatus = "todo";
});
editBlue.addEventListener("click", () => {
  clearEditColours();
  editBlue.classList.add("selected-edit");
  editStatus = "doing";
});
editGreen.addEventListener("click", () => {
  clearEditColours();
  editGreen.classList.add("selected-edit");
  editStatus = "done";
});

saveEditBtn.addEventListener("click", function () {
  let newText = editInput.value.trim();
  if (newText === "") {
    alert("Task cannot be empty");
    return;
  }

  // Update task text
  editSticky.querySelector("p").innerText = newText;

  // Move sticky to new status column
  placeStickyInColumn(editSticky, editStatus);

  editPopup.classList.add("hidden");
});