script.js

"use strict";
const button = document.getElementById("createbtn");
const cards = document.querySelector(".cards");
const top1 = document.querySelector(".top");
const editPage = document.querySelector(".page");
const pageTitle = document.querySelector(".page-title");
const pageText = document.querySelector(".page-text");
const searchInput = document.querySelector(".input");
const filterAll = document.querySelector(".feature");

let tasks = [];
let currentFilter = "all";
let searchTerm = "";
let draggedTaskId = null;
let curr = null;



const data = localStorage.getItem("tasks");
if (data) {
  tasks = JSON.parse(data);
  console.log(tasks);
  renderTasks();
}

button.addEventListener("click", addTask);
document.addEventListener("click", deleteTask);

cards.addEventListener("dragstart", handleDragStart);
cards.addEventListener("dragover", handleDragOver);
cards.addEventListener("dragenter", handleDragOver);
cards.addEventListener("dragleave", handleDragLeave);
cards.addEventListener("drop", handleDrop);
cards.addEventListener("dragend", handleDragEnd);

document.addEventListener("click", function (e) {
  if (e.target.classList.contains("edit-btn")) {
    handleEdit(e);
  }
  if (e.target.classList.contains("save-btn")) {
    handleSave(e);
  }
});

// ================== Display Tasks ==================================
function getVisibleTasks() {
  let visibleTasks = [...tasks];

  if (currentFilter === "pending") {
    visibleTasks = visibleTasks.filter((task) => !task.complete);
  } else if (currentFilter === "complete") {
    visibleTasks = visibleTasks.filter((task) => task.complete);
  }

  if (searchTerm) {
    const lowerSearch = searchTerm.toLowerCase();
    visibleTasks = visibleTasks.filter(
      (task) =>
        task.title.toLowerCase().includes(lowerSearch) ||
        task.description.toLowerCase().includes(lowerSearch),
    );
  }

  return visibleTasks;
}

function renderTasks(filteredTasks = null) {
  cards.innerHTML = "";
  const tasksToRender = filteredTasks !== null ? filteredTasks : getVisibleTasks();

  if (tasksToRender.length === 0) {
    cards.innerHTML = "<p>No tasks found.</p>";
    return;
  }

  for (let i = 0; i < tasksToRender.length; i++) {
    const task = tasksToRender[i];
    const card = document.createElement("div");
    card.classList.add("card");
    card.dataset.id = task.id;
    card.draggable = true;
    card.innerHTML = `
      <input type="checkbox" class="check" ${task.complete ? "checked" : ""}/>
      <h2 class="title ${task.complete ? "strikethrough" : ""}">
        ${task.title}
      </h2>
      <p class="description ${task.complete ? "strikethrough" : ""}">
        ${task.description}
      </p>
      <div class="buttons">
        <button class="edit-btn">Edit</button>
        <button class="delete-btn">Delete</button>
      </div>
    `;

    cards.appendChild(card);
  }
}

// ===================== Add task ===========================
function addTask(e) {
  e.preventDefault();
  const title = document.querySelector("#title").value;
  const text = document.querySelector("#text-area").value;

  if (title === "") {
    alert("Title is required!");
    return;
  }
  if (text === "") {
    alert("Description is required!");
    return;
  }

  tasks.push({
    id: Date.now(),
    title: title,
    description: text,
    complete: false,
  });

  console.log(tasks);

  localStorage.setItem("tasks", JSON.stringify(tasks));

  renderTasks();
  document.querySelector("#title").value = "";
  document.querySelector("#text-area").value = "";
}

// =================== Delete Button ==================================
function deleteTask(e) {
  if (e.target.classList.contains("delete-btn")) {
    const id = Number(e.target.closest(".card").dataset.id);
    console.log(id);

    tasks = tasks.filter((task) => task.id !== id);

    localStorage.setItem("tasks", JSON.stringify(tasks));

    renderTasks();
  }
}

// ======================= Check Box ================================
document.addEventListener("change", function (e) {
  if (!e.target.classList.contains("check")) {
    return;
  }
  const id = Number(e.target.closest(".card").dataset.id);

  const task = tasks.find((task) => task.id === id);
  task.complete = e.target.checked;
  localStorage.setItem("tasks", JSON.stringify(tasks));
  renderTasks();
});

function handleEdit(e) {
  curr = e.target.closest(".card");
  if (!curr) {
    return;
  }

  const id = Number(curr.dataset.id);
  const task = tasks.find((task) => task.id === id);
  if (!task) {
    return;
  }
  pageTitle.value = task.title;
  pageText.value = task.description;

  cards.classList.add("hide");
  top1.classList.add("hide");
  editPage.classList.remove("hide");
}

// ===================== Save Button =======================================
function handleSave() {
  if (!curr) {
    return;
  }
  const id = Number(curr.dataset.id);
  const task = tasks.find((task) => task.id === id);
  if (!task) {
    return;
  }
  task.title = pageTitle.value.trim();
  task.description = pageText.value.trim();

  localStorage.setItem("tasks", JSON.stringify(tasks));

  cards.classList.remove("hide");
  top1.classList.remove("hide");
  editPage.classList.add("hide");
  renderTasks();
  curr = null;
}

// =========================== Cancel Button ===========================
document.addEventListener("click", function (e) {
  if (e.target.classList.contains("cancel-btn")) {
    cards.classList.remove("hide");
    top1.classList.remove("hide");
    editPage.classList.add("hide");
    curr = null;
  }
});

// ============ Search Functionality =============================================
searchInput.addEventListener("input", function (e) {
  searchTerm = e.target.value.toLowerCase();
  renderTasks();
});

// ========================= Filter Functionality ====================================
filterAll.addEventListener("click", function (e) {
  if (e.target.classList.contains("all")) {
    currentFilter = "all";
  }
  if (e.target.classList.contains("pending")) {
    currentFilter = "pending";
  }
  if (e.target.classList.contains("complete")) {
    currentFilter = "complete";
  }

  renderTasks();
});

// ========================= Drag and Drop ========================================
function handleDragStart(e) {
  const card = e.target.closest(".card");
  if (!card) {
    return;
  }

  draggedTaskId = Number(card.dataset.id);
  card.classList.add("dragging");

  if (e.dataTransfer) {
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/plain", String(draggedTaskId));
  }
}

function handleDragOver(e) {
  const card = e.target.closest(".card");
  if (!card || !draggedTaskId) {
    return;
  }

  const targetId = Number(card.dataset.id);
  if (targetId === draggedTaskId) {
    return;
  }

  e.preventDefault();
  clearDropTargets();
  card.classList.add("drop-target");
}

function handleDragLeave(e) {
  const card = e.target.closest(".card");
  if (!card) {
    return;
  }

  card.classList.remove("drop-target");
}

function handleDrop(e) {
  e.preventDefault();
  const card = e.target.closest(".card");
  if (!card) {
    resetDragState();
    return;
  }

  const targetId = Number(card.dataset.id);
  if (!draggedTaskId || !targetId || draggedTaskId === targetId) {
    resetDragState();
    return;
  }

  reorderTasks(draggedTaskId, targetId);
  localStorage.setItem("tasks", JSON.stringify(tasks));
  renderTasks();
  resetDragState();
}

function handleDragEnd() {
  resetDragState();
}

function reorderTasks(sourceId, targetId) {
  const sourceIndex = tasks.findIndex((task) => task.id === sourceId);
  const targetIndex = tasks.findIndex((task) => task.id === targetId);

  if (sourceIndex === -1 || targetIndex === -1) {
    return;
  }

  const [movedTask] = tasks.splice(sourceIndex, 1);
  tasks.splice(targetIndex, 0, movedTask);
}

function clearDropTargets() {
  document.querySelectorAll(".card.drop-target").forEach((card) => {
    card.classList.remove("drop-target");
  });
}

function resetDragState() {
  clearDropTargets();
  document.querySelectorAll(".card.dragging").forEach((card) => {
    card.classList.remove("dragging");
  });
  draggedTaskId = null;
}

// sort accending order
//tasks.sort((a, b)=>a.title.localeCompare(b.title));