121 lines
4.0 KiB
JavaScript
121 lines
4.0 KiB
JavaScript
// Получение элементов из HTML
|
|
const taskForm = document.getElementById("task-form");
|
|
const taskInput = document.getElementById("task-input");
|
|
const taskList = document.getElementById("task-list");
|
|
const filterButtons = document.querySelectorAll(".filter");
|
|
|
|
// Загрузка задач из LocalStorage
|
|
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
|
|
|
|
// Переменная для отслеживания перетаскиваемой задачи
|
|
let draggedTaskIndex = null;
|
|
|
|
// Функция для отображения задач
|
|
function displayTasks(filter = "all") {
|
|
taskList.innerHTML = "";
|
|
const filteredTasks = tasks.filter(task =>
|
|
filter === "all" || (filter === "active" && !task.completed) || (filter === "completed" && task.completed)
|
|
);
|
|
|
|
filteredTasks.forEach((task, index) => {
|
|
const taskItem = document.createElement("li");
|
|
taskItem.classList.add("task-item");
|
|
taskItem.draggable = true; // Сделать элемент перетаскиваемым
|
|
|
|
if (task.completed) taskItem.classList.add("completed");
|
|
|
|
taskItem.innerHTML = `
|
|
<span>${task.text}</span>
|
|
<div class="task-actions">
|
|
<button class="complete-btn" onclick="toggleComplete('${task.id}')">✓</button>
|
|
<button class="delete-btn" onclick="deleteTask('${task.id}')">✗</button>
|
|
</div>
|
|
`;
|
|
|
|
// Добавление событий для drag-and-drop
|
|
taskItem.addEventListener("dragstart", () => handleDragStart(index));
|
|
taskItem.addEventListener("dragover", (e) => handleDragOver(e));
|
|
taskItem.addEventListener("drop", () => handleDrop(index));
|
|
taskItem.addEventListener("dragend", handleDragEnd);
|
|
|
|
taskList.appendChild(taskItem);
|
|
});
|
|
}
|
|
|
|
// Обработчик начала перетаскивания
|
|
function handleDragStart(index) {
|
|
draggedTaskIndex = index;
|
|
}
|
|
|
|
// Обработчик, предотвращающий действия по умолчанию (нужен для drop)
|
|
function handleDragOver(e) {
|
|
e.preventDefault();
|
|
}
|
|
|
|
// Обработчик окончания перетаскивания
|
|
function handleDrop(index) {
|
|
if (draggedTaskIndex !== null && draggedTaskIndex !== index) {
|
|
const draggedTask = tasks[draggedTaskIndex];
|
|
tasks.splice(draggedTaskIndex, 1);
|
|
tasks.splice(index, 0, draggedTask);
|
|
saveTasks();
|
|
displayTasks();
|
|
}
|
|
draggedTaskIndex = null;
|
|
}
|
|
|
|
// Обработчик окончания перетаскивания
|
|
function handleDragEnd() {
|
|
draggedTaskIndex = null;
|
|
}
|
|
|
|
// Добавление новой задачи
|
|
taskForm.addEventListener("submit", (e) => {
|
|
e.preventDefault();
|
|
const taskText = taskInput.value.trim();
|
|
if (!taskText) return;
|
|
|
|
const newTask = {
|
|
id: Date.now().toString(),
|
|
text: taskText,
|
|
completed: false
|
|
};
|
|
tasks.push(newTask);
|
|
saveTasks();
|
|
displayTasks();
|
|
taskInput.value = "";
|
|
});
|
|
|
|
// Переключение статуса задачи на выполнено
|
|
function toggleComplete(taskId) {
|
|
tasks = tasks.map(task =>
|
|
task.id === taskId ? { ...task, completed: !task.completed } : task
|
|
);
|
|
saveTasks();
|
|
displayTasks();
|
|
}
|
|
|
|
// Удаление задачи
|
|
function deleteTask(taskId) {
|
|
tasks = tasks.filter(task => task.id !== taskId);
|
|
saveTasks();
|
|
displayTasks();
|
|
}
|
|
|
|
// Сохранение задач в LocalStorage
|
|
function saveTasks() {
|
|
localStorage.setItem("tasks", JSON.stringify(tasks));
|
|
}
|
|
|
|
// Добавление события для фильтров
|
|
filterButtons.forEach(button => {
|
|
button.addEventListener("click", () => {
|
|
filterButtons.forEach(btn => btn.classList.remove("active"));
|
|
button.classList.add("active");
|
|
displayTasks(button.dataset.filter);
|
|
});
|
|
});
|
|
|
|
// Инициализация
|
|
displayTasks();
|