TaskManager/script.js at main · Quanta1910/TaskManager · GitHub

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
//DOM-Elements...
const taskInput = document.getElementById("task-input");
const prioritySelection = document.getElementById("priority");
const addTaskBtn = document.getElementById("add-task");
const filterTask = document.getElementById("filter-task");
const sortTaskBtn = document.getElementById("sort-task");
const taskList = document.getElementById("task-list");

let taskArr = [];

function addTask() {
    if (taskInput.value === "") {
        return;
    };
    let task = {
        text: taskInput.value.trim(),
        priority: prioritySelection.value,
        status: "Pending"
    };
    taskArr.push(task);
    taskInput.value = "";
    prioritySelection.value = "low";
    showTaskList();
};

function deleteTask(task) {
    taskArr = taskArr.filter(t => {
        return (task.text !== t.text);
    });
    showTaskList();
};

function toggleStatus(task) {
    taskArr.forEach(t => {
        if (task.text === t.text) {
            t.status = t.status === "Pending" ? "Completed" : "Pending";
        };
    });
    showTaskList();
};

function showTaskList() {
    taskList.innerHTML = "";
    taskArr.forEach(task => {
        if (filterTask.value !== "All" && filterTask.value !== task.status) {
            return;
        };

        let li = document.createElement("li");
        li.classList.add(task.priority);

        let span1 = document.createElement("span");
        span1.innerHTML = `<span>${task.text}</span>`;
        let span2 = document.createElement("span");

        let toggleBtn = document.createElement("button");
        toggleBtn.innerText = task.status;
        toggleBtn.addEventListener("click", function () {
            toggleStatus(task);
        });

        let deleteBtn = document.createElement("button");
        deleteBtn.innerText = "Delete";
        deleteBtn.addEventListener("click", function () {
            deleteTask(task);
        });

        li.appendChild(span1);
        li.appendChild(span2);
        span2.appendChild(toggleBtn);
        span2.appendChild(deleteBtn);
        taskList.appendChild(li);

    });
};

function sort() {
    let high = [];
    let medium = [];
    let low = [];
    taskArr.forEach(task => {
        if (task.priority === "high") {
            high.push(task);
        } else if (task.priority === "medium") {
            medium.push(task);
        } else {
            low.push(task);
        };
    });
    taskArr = [];
    if (sortTaskBtn.innerText === "Sort by Ascending") {
        taskArr = [...low, ...medium, ...high];
        sortTaskBtn.innerText = "Sort by Descending";
    } else {
        taskArr = [...high, ...medium, ...low];
        sortTaskBtn.innerText = "Sort by Ascending";
    };

    showTaskList();
};

sortTaskBtn.addEventListener("click", function () {
    sort();
});

addTaskBtn.addEventListener("click", function () {
    addTask();
});

filterTask.addEventListener("change", function () {
    showTaskList();
});