document.addEventListener("DOMContentLoaded", () => {
const taskForm = document.getElementById("todo-form");
const newTaskInput = document.getElementById("new-task");
const tasksList = document.getElementById("tasks-list");
const completedList = document.getElementById("completed-list");
const searchInput = document.getElementById("search");
const sortButton = document.getElementById("sort-tasks");
let tasks = [];
let completedTasks = [];
taskForm.addEventListener("submit", (e) => {
e.preventDefault();
const taskName = newTaskInput.value.trim();
if (taskName) {
const task = {
id: Date.now(),
name: taskName,
isEditing: false,
};
tasks.push(task);
renderTasks(tasks, tasksList);
newTaskInput.value = "";
}
});
tasksList.addEventListener("click", handleTaskActions);
completedList.addEventListener("click", handleTaskActions);
function handleTaskActions(e) {
const taskId = e.target.parentElement.dataset.id;
if (e.target.classList.contains("delete")) {
tasks = tasks.filter((task) => task.id !== parseInt(taskId));
completedTasks = completedTasks.filter(
(task) => task.id !== parseInt(taskId),
);
renderTasks(tasks, tasksList);
renderTasks(completedTasks, completedList);
} else if (e.target.classList.contains("edit")) {
tasks = tasks.map((task) => {
if (task.id === parseInt(taskId)) {
task.isEditing = true;
}
return task;
});
renderTasks(tasks, tasksList);
} else if (e.target.classList.contains("done")) {
const newName = e.target
.closest("li")
.querySelector(".edit-task")
.value.trim();
if (newName) {
tasks = tasks.map((task) => {
if (task.id === parseInt(taskId)) {
task.name = newName;
task.isEditing = false;
}
return task;
});
renderTasks(tasks, tasksList);
}
} else if (e.target.classList.contains("complete")) {
const completedTask = tasks.find((task) => task.id === parseInt(taskId));
completedTasks.push(completedTask);
tasks = tasks.filter((task) => task.id !== parseInt(taskId));
renderTasks(tasks, tasksList);
renderTasks(completedTasks, completedList);
}
}
searchInput.addEventListener("input", () => {
const searchTerm = searchInput.value.toLowerCase();
const filteredTasks = tasks.filter((task) =>
task.name.toLowerCase().includes(searchTerm),
);
const filteredCompletedTasks = completedTasks.filter((task) =>
task.name.toLowerCase().includes(searchTerm),
);
renderTasks(filteredTasks, tasksList);
renderTasks(filteredCompletedTasks, completedList);
});
sortButton.addEventListener("click", () => {
tasks.sort((a, b) => a.name.localeCompare(b.name));
renderTasks(tasks, tasksList);
});
function renderTasks(tasksToRender, listElement) {
listElement.innerHTML = "";
tasksToRender.forEach((task) => {
const li = document.createElement("li");
li.dataset.id = task.id;
if (task.isEditing) {
li.innerHTML = `
<input type="text" class="edit-task" value="${task.name}">
<div class="task-actions" data-id="${task.id}">
<button class="done">Done</button>
</div>
`;
} else {
li.innerHTML = `
${task.name}
<div class="task-actions" data-id="${task.id}">
<button class="edit">Edit</button>
<button class="complete">Complete</button>
<button class="delete">Delete</button>
</div>
`;
if (listElement === completedList) {
li.classList.add("completed-task");
li.querySelector(".complete").remove();
}
}
listElement.appendChild(li);
});
}
});
