script.js

//ELEMENT SELECTORS
const btnAddTask = document.getElementById("btnAddTask");
const addTaskForm = document.getElementById("addTaskForm");
const btnDeleteAll = document.getElementById("btnDeleteAll");
const tasksListContent = document.getElementById("tasksListContent");

const task = document.getElementById("task");
const deadline = document.getElementById("deadline");
const priority = document.getElementById("priority");

const myTaskTab = document.getElementById("myTaskTab");
const doneTaskTab = document.getElementById("doneTaskTab");
const overdueTaskTab = document.getElementById("overdueTaskTab");

const btnMyTask = document.getElementById("btnMyTask");
const btnDoneTask = document.getElementById("btnDoneTask");
const btnOverdueTask = document.getElementById("btnOverdueTask");

const emptyMyTaskTab = document.getElementById("emptyMyTaskTab");
const emptyDoneTaskTab = document.getElementById("emptyDoneTaskTab");
const emptyOverdueTaskTab = document.getElementById("emptyOverdueTaskTab");

//STATE AND GLOBAL VARIABEL
let tasks = [];
let currentTab = "my";

//UTILITY FUNCTION
const checkOverdue = () => {
  const today = new Date();

  //cek overdue
  tasks.forEach((item) => {
    if (item.deadline) {
      const deadlineDate = new Date(item.deadline);
      item.isOverdue = !item.done && deadlineDate < today;
    } else {
      item.isOverdue = false;
    }
  });
};

const saveTasks = () => {
  localStorage.setItem("tasks", JSON.stringify(tasks));
};

const loadTasks = () => {
  const saved = localStorage.getItem("tasks");
  if (saved) tasks = JSON.parse(saved);
  checkOverdue();
};

//UI CONTROL
const showAddTaskForm = () => {
  btnAddTask.style.display = "none";
  addTaskForm.style.display = "flex";
};

const closeTaskForm = () => {
  btnAddTask.style.display = "flex";
  addTaskForm.style.display = "none";
  task.value = "";
  deadline.value = "";
  priority.value = "";
};

//tab control
const showMyTasks = () => {
  currentTab = "my";
  renderTasksList();
  myTaskTab.style.display = "flex";
  doneTaskTab.style.display = "none";
  overdueTaskTab.style.display = "none";
};

const showDoneTasks = () => {
  currentTab = "done";
  renderTasksList();
  myTaskTab.style.display = "none";
  doneTaskTab.style.display = "flex";
  overdueTaskTab.style.display = "none";
};

const showOverdueTasks = () => {
  currentTab = "overdue";
  renderTasksList();
  myTaskTab.style.display = "none";
  doneTaskTab.style.display = "none";
  overdueTaskTab.style.display = "flex";
};

//DATA MANAGEMENT
const createTask = () => {
  let taskValue = task.value; //ambil value dalam fungsi
  let deadlineValue = deadline.value;
  let priorityValue = priority.value;

  const date = new Date();
  const dateFormated = date.toLocaleDateString("en-GB", {
    day: "2-digit",
    month: "short",
    year: "numeric",
  });

  let deadlineValueDateFormated = "";
  if (deadlineValue) {
    const deadlineValueDate = new Date(deadlineValue);
    deadlineValueDateFormated = deadlineValueDate.toLocaleDateString("en-GB", {
      day: "2-digit",
      month: "short",
      year: "numeric",
    });
  }

  tasks = [
    ...tasks,
    {
      task: taskValue,
      createdOn: dateFormated,
      deadline: deadlineValueDateFormated,
      priority: priorityValue,
      done: false,
      isOverdue: false,
    },
  ];
  checkOverdue();
  renderTasksList();
  closeTaskForm();
  saveTasks();
};

//tombol save
const addTask = () => {
  if (!task.value) {
    alert("Give your task a name!");
    task.focus();
    return;
  }
  if (!priority.value) {
    alert("Pick a priority, please!");
    priority.focus();
    return;
  }
  createTask();
};

//tombol del all
const deleteAllTasks = () => {
  tasks.length = 0;
  renderTasksList();
  saveTasks();
};

//tombol delete per card
const deleteTask = (taskIndex) => {
  tasks.splice(taskIndex, 1);
  renderTasksList();
  saveTasks();
};

//tombol ceklis
const toggleTaskDone = (taskIndex) => {
  tasks[taskIndex].done = !tasks[taskIndex].done;
  checkOverdue();
  renderTasksList();
  saveTasks();
};

//RENDER FUNCTION
const renderTasksList = () => {
  //ini adalah fungsi utama untuk penampilan datanya
  checkOverdue();
  tasksListContent.innerHTML = "";

  // iterasi warna saat ada di tab tertentu
  btnMyTask.classList.remove("mytask-tab--active");
  btnDoneTask.classList.remove("done-tab--active");
  btnOverdueTask.classList.remove("overdue-tab--active");

  //tampilkan saat di task tertentu, yaitu classList dan pesan default saat empty
  let tasksToShow = [];
  if (currentTab === "my") {
    tasksToShow = tasks
      .map((item, index) => ({ ...item, originalIndex: index }))
      .filter((item) => !item.done && !item.isOverdue);
    emptyMyTaskTab.style.display = tasksToShow.length === 0 ? "flex" : "none";
    btnMyTask.classList.add("mytask-tab--active");
  } else if (currentTab === "done") {
    tasksToShow = tasks
      .map((item, index) => ({ ...item, originalIndex: index }))
      .filter((item) => item.done);
    emptyDoneTaskTab.style.display = tasksToShow.length === 0 ? "flex" : "none";
    btnDoneTask.classList.add("done-tab--active");
  } else if (currentTab === "overdue") {
    tasksToShow = tasks
      .map((item, index) => ({ ...item, originalIndex: index }))
      .filter((item) => !item.done && item.isOverdue);
    emptyOverdueTaskTab.style.display =
      tasksToShow.length === 0 ? "flex" : "none";
    btnOverdueTask.classList.add("overdue-tab--active");
  }

  const fragment = document.createDocumentFragment();

  //loop task
  for (const item of tasksToShow) {
    const taskIndex = item.originalIndex;
    const doneStyle = item.done ? "line-through" : "none";
    const checkIconClass = item.done ? "check-icon--active" : "check-icon";

    let priorityClass = "";
    if (item.priority === "high") priorityClass = "high";
    else if (item.priority === "medium") priorityClass = "med";
    else priorityClass = "low";

    // start make card
    const taskCard = document.createElement("div");
    taskCard.className = "task-card";

    const cardItem = document.createElement("div");
    cardItem.className = "task-card-item";

    const taskText = document.createElement("p");
    taskText.className = "text-base";
    taskText.id = `taskText-${taskIndex}`;
    taskText.style.textDecoration = doneStyle;
    taskText.textContent = item.task;

    const createdOn = document.createElement("p");
    createdOn.className = "text-medium";
    createdOn.textContent = `Created on ${item.createdOn}`;

    cardItem.append(taskText, createdOn)

    if (item.deadline) {
      const deadline = document.createElement("p");
      deadline.className = "text-medium";
      deadline.textContent = `Due on ${item.deadline}`;
      cardItem.appendChild(deadline);
    }

    const priority = document.createElement("p");
    priority.className = `text-medium level-priority ${priorityClass}`;
    priority.textContent = item.priority;
    cardItem.appendChild(priority);

    //button
    const cardAction = document.createElement("div");
    cardAction.className = "task-card-action";

    const btnCheck = document.createElement("button");
    btnCheck.className = "btn-check";
    btnCheck.addEventListener("click", () => toggleTaskDone(taskIndex));

    const checkIcon = document.createElement("i");
    checkIcon.className = `fa-solid fa-check ${checkIconClass}`;
    btnCheck.appendChild(checkIcon);

    const btnDelete = document.createElement("button");
    btnDelete.className = "btn-delete-task";
    btnDelete.addEventListener("click", () => deleteTask(taskIndex));

    const deleteIcon = document.createElement("i");
    deleteIcon.className = "fa-solid fa-trash";
    btnDelete.appendChild(deleteIcon);

    cardAction.append(btnCheck, btnDelete);

    taskCard.append(cardItem, cardAction);
    fragment.appendChild(taskCard);
  }

  tasksListContent.innerHTML = "";
  tasksListContent.appendChild(fragment);

  btnDeleteAll.disabled = tasks.length === 0;
  btnDeleteAll.classList.toggle("btn-delete-all--active", tasks.length > 0);
};

// INIT
document.addEventListener("DOMContentLoaded", () => {
  loadTasks();
  showMyTasks();
});

//DONE!!!!