script.js

const addTaskBtn = document.getElementById("add-task");
const taskInput = document.getElementById("task-input");
const taskCategoryEle = document.querySelectorAll(".task-category");
const todoListEle = document.getElementById("todo-list");
const itemsLeftELe = document.getElementById("items-left");
const clearCompletedBtn = document.getElementById("clear-completed");
const emptyStateEle = document.querySelector(".empty-state");
const emptyIcon = document.getElementById("empty-icon");
const emptyText = document.getElementById("empty-text");
const dateEle = document.getElementById("date");

let todos = [];
let currentCategory = "all";

addTaskBtn.addEventListener("click", () => {
  addTodo(taskInput.value);
});

taskInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    addTodo(taskInput.value);
  }
});

clearCompletedBtn.addEventListener("click", () => {
  todos = todos.filter((todo) => !todo.completed);
  saveTodo();
  renderTodo();
});

function addTodo(text) {
  if (text.trim() === "") return;

  const todo = {
    id: Date.now(),
    text: text,
    completed: false,
  };

  todos.push(todo);

  saveTodo();
  renderTodo();
  taskInput.value = "";
}

function saveTodo() {
  localStorage.setItem("todos", JSON.stringify(todos));

  updateItemCount();
  checkEmptyState();
}

function updateItemCount() {
  const uncompletedTodos = todos.filter((todo) => !todo.completed);

  itemsLeftELe.textContent = `${uncompletedTodos.length} item${uncompletedTodos.length !== 1 ? "s" : ""} left`;
}

function checkEmptyState() {
  const categorizedTodo = categorizeTodo(currentCategory);

  if (categorizedTodo.length === 0) {
    emptyStateEle.classList.remove("hidden");

    if (currentCategory === "active") {
      emptyIcon.className = "fas fa-glass-cheers";
      emptyText.textContent = "All caught up! No active tasks.";
    } else if (currentCategory === "completed") {
      emptyIcon.className = "fas fa-book";
      emptyText.textContent = "No completed tasks! Let's get to work!";
    } else {
      emptyIcon.className = "fas fa-clipboard-list";
      emptyText.textContent = "No tasks here yet! Add one above.";
    }
  } else {
    emptyStateEle.classList.add("hidden");
  }
}

function categorizeTodo(category) {
  switch (category) {
    case "active":
      return todos.filter((todo) => !todo.completed);
    case "completed":
      return todos.filter((todo) => todo.completed);
    default:
      return todos;
  }
}

function renderTodo() {
  todoListEle.innerHTML = "";

  const categorizedTodo = categorizeTodo(currentCategory);

  categorizedTodo.forEach((todo) => {
    const todoItem = document.createElement("li");
    todoItem.classList.add("todo-item");
    if (todo.completed) {
      todoItem.classList.add("completed");
    }

    const checkboxContainer = document.createElement("label");
    checkboxContainer.classList.add("checkbox-container");

    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.classList.add("todo-checkbox");
    checkbox.checked = todo.completed;
    checkbox.addEventListener("change", () => toggleTodo(todo.id));

    const checkmark = document.createElement("span");
    checkmark.classList.add("checkmark");

    checkboxContainer.appendChild(checkbox);
    checkboxContainer.appendChild(checkmark);

    const todoText = document.createElement("span");
    todoText.classList.add("todo-item-text");
    todoText.textContent = todo.text;

    const deleteBtn = document.createElement("button");
    deleteBtn.classList.add("delete-btn");
    deleteBtn.innerHTML = "<i class='fas fa-times'></i>";
    deleteBtn.addEventListener("click", () => deleteTodo(todo.id));

    todoItem.appendChild(checkboxContainer);
    todoItem.appendChild(todoText);
    todoItem.appendChild(deleteBtn);

    todoListEle.appendChild(todoItem);
  });

  checkEmptyState();
}

function toggleTodo(id) {
  todos = todos.map((todo) => {
    if (todo.id === id) {
      return { ...todo, completed: !todo.completed };
    }
    return todo;
  });
  saveTodo();
  renderTodo();
}

function deleteTodo(id) {
  todos = todos.filter((todo) => todo.id !== id);
  saveTodo();
  renderTodo();
}

function clearCompleted() {
  todos = todos.filter((todo) => !todo.completed);
  saveTodo();
  renderTodo();
}

function loadTodo() {
  const storedTodo = localStorage.getItem("todos");
  if (storedTodo) {
    todos = JSON.parse(storedTodo);
  }
  renderTodo();
}

taskCategoryEle.forEach((category) => {
  category.addEventListener("click", () => {
    setActiveCategory(category.getAttribute("data-filter"));
  });
});

function setActiveCategory(category) {
  currentCategory = category;

  taskCategoryEle.forEach((thing) => {
    if (thing.getAttribute("data-filter") === category) {
      thing.classList.add("active-category");
    } else {
      thing.classList.remove("active-category");
    }
  });

  renderTodo();
}

function setDate() {
  const formatOfDate = {
    weekday: "long",
    month: "short",
    day: "numeric",
  };
  const today = new Date();

  dateEle.textContent = today.toLocaleDateString("en-US", formatOfDate);
}

window.addEventListener("DOMContentLoaded", () => {
  loadTodo();
  updateItemCount();
  setDate();
});