-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscript.js
More file actions
95 lines (75 loc) · 2.58 KB
/
Copy pathscript.js
File metadata and controls
95 lines (75 loc) · 2.58 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
const taskList = [];
const taskInput = document.getElementById("taskInput");
const addTaskBtn = document.getElementById("addTaskBtn");
const taskContainer = document.getElementById("taskContainer");
let draggedTaskId = null;
function renderTask(task) {
const taskElement = document.createElement("div");
taskElement.innerHTML = `
<span>${task.title}</span>
<small class="status ${task.completed ? 'completed' : 'pending'}">
${task.completed ? "Completed" : "Pending"}
</small>
`;
taskElement.addEventListener("click", () => {
task.completed = !task.completed;
taskElement.innerHTML = `<span>${task.title}</span><small class="status ${task.completed ? 'completed' : 'pending'}">${task.completed ? "Completed" : "Pending"} </small>`;
taskElement.classList.toggle("completed", task.completed);
taskElement.appendChild(deleteBtn);
});
const deleteBtn = document.createElement("button");
deleteBtn.textContent = "🗑️";
deleteBtn.style.marginLeft = "10px";
deleteBtn.addEventListener("click", (e) => {
e.stopPropagation();
const index = taskList.findIndex(t => t.id === task.id);
if (index !== -1) {
taskList.splice(index, 1);
}
taskElement.remove();
});
taskElement.addEventListener("dragstart", () => {
draggedTaskId = task.id;
});
taskElement.addEventListener("drop", () => {
if (draggedTaskId === null || draggedTaskId === task.id) return;
const draggedIndex = taskList.findIndex(t => t.id === draggedTaskId);
const targetIndex = taskList.findIndex(t => t.id === task.id);
const [draggedTask] = taskList.splice(draggedIndex, 1);
taskList.splice(targetIndex, 0, draggedTask);
renderAllTasks();
});
taskElement.addEventListener("dragover", (e) => {
e.preventDefault();
});
taskElement.classList.add("task");
if (task.completed) {
taskElement.classList.add("completed");
}
taskElement.appendChild(deleteBtn);
taskContainer.appendChild(taskElement);
taskElement.setAttribute("draggable", true);
}
function renderAllTasks() {
taskContainer.innerHTML = "";
taskList.forEach(renderTask);
}
function addNewTask() {
const title = taskInput.value.trim();
if (title === "") return;
const task = {
id: Date.now(),
title,
completed: false,
timestamp: Date.now()
};
taskList.push(task);
renderAllTasks();
taskInput.value = "";
}
addTaskBtn.addEventListener("click", addNewTask);
taskInput.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
addNewTask();
}
});