-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
114 lines (91 loc) · 3.48 KB
/
index.js
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
document.addEventListener("DOMContentLoaded", function() {
// Load tasks from localStorage
loadTasks();
document.querySelector("#push").addEventListener("click", function() {
var toDoList = document.querySelector("#myInput").value;
if (toDoList) {
addTask(toDoList);
saveTasks(); // Save to localStorage
document.querySelector("#myInput").value = "";
}
});
});
function addTask(toDoList, isCompleted = false) {
var taskItem = document.createElement("div");
var taskText = document.createElement("span");
taskText.textContent = toDoList;
if (isCompleted) {
taskText.classList.add("completed");
}
var completeButton = document.createElement("button");
completeButton.textContent = "Complete";
completeButton.addEventListener("click", function() {
taskText.classList.toggle("completed");
saveTasks();
});
var deleteButton = document.createElement("button");
deleteButton.textContent = "Delete";
deleteButton.addEventListener("click", function() {
taskItem.remove();
saveTasks();
});
var editButton = document.createElement("button");
editButton.textContent = "Edit";
editButton.addEventListener("click", function() {
var editInput = document.createElement("input");
editInput.type = "text";
editInput.value = taskText.textContent;
var saveButton = document.createElement("button");
saveButton.textContent = "Save";
saveButton.addEventListener("click", function() {
taskText.textContent = editInput.value;
taskItem.replaceChild(taskText, editInput);
taskItem.replaceChild(editButton, saveButton);
saveTasks();
});
taskItem.replaceChild(editInput, taskText);
taskItem.replaceChild(saveButton, editButton);
});
taskItem.appendChild(taskText);
taskItem.appendChild(completeButton);
taskItem.appendChild(deleteButton);
taskItem.appendChild(editButton);
document.querySelector("#outPut").appendChild(taskItem);
}
function saveTasks() {
var tasks = [];
document.querySelectorAll("#outPut div").forEach(function(taskItem) {
tasks.push({
text: taskItem.firstChild.textContent,
completed: taskItem.querySelector("span").classList.contains("completed")
});
});
localStorage.setItem("tasks", JSON.stringify(tasks));
}
function loadTasks() {
var tasks = JSON.parse(localStorage.getItem("tasks"));
if (tasks) {
tasks.forEach(function(task) {
addTask(task.text, task.completed);
});
}
}
document.querySelector(".dropDown").addEventListener("change", function() {
var option = this.value;
filterTasks(option);
});
function filterTasks(option) {
var tasks = document.querySelectorAll("#outPut div");
tasks.forEach(function(task) {
var isCompleted = task.querySelector("span").classList.contains("completed");
if (option === "all") {
task.style.display = "flex";
} else if (option === "complete" && isCompleted) {
task.style.display = "flex";
} else if (option === "incomplete" && !isCompleted) {
task.style.display = "flex";
} else {
task.style.display = "none";
}
});
}