ToDoList/script.js at main · ibrasalah321/ToDoList · 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
// Varibales
let input = document.querySelector(".add-task input");
let addBtn = document.querySelector(".add-task .plus");
let taskContent = document.querySelector(".task-content");
let noTaskMsg = document.querySelector(".no-task-message");
let tasksCount = document.querySelector(".task-count span");
let tasksCompleted = document.querySelector(".task-completed span");


// popup variables
let popup = document.querySelector(".popup");
let closePopup = document.querySelector(".close-popup");
let ok = document.querySelector(".ok");
let overlay = document.querySelector(".overlay");
let popupText = document.querySelector(".popup .popup-message");


// popup function
function popupFunction() {
    popup.style.display = "block";
    overlay.style.display = "block";
    closePopup.onclick = () => {
        popup.style.display = "none";
        overlay.style.display = "none";
    }
    ok.onclick = () => {
        popup.style.display = "none";
        overlay.style.display = "none";
    }
    overlay.onclick = () => {
        popup.style.display = "none";
        overlay.style.display = "none";
    }
}
// function to do alert if add the same task
function addSameTask() {
    popupText.innerHTML = "This task is already added!";
    popupFunction();
    input.value = "";
}

// Focus on input field
window.onload = () => {
    input.focus();
};

// Add new task
addBtn.onclick = () => {
    let allTasks = document.querySelectorAll(".task-box");
    let isSameTask = false;
    if (input.value === "") {
        popupFunction(); // popup function
        return;
    } else {
        allTasks.forEach((task) => {
            if (task.firstChild.textContent === input.value) {
                isSameTask = true;
            }
        })
        }
        if (isSameTask) {
            addSameTask();
        } else {
        // delete no task message before adding new task
        removeNoTaskMessage();
        // create span element
        let mainSpan = document.createElement("span");
        // create delete Element
        let deleteElement = document.createElement("span");
        // create text
        let spanText = document.createTextNode(input.value);
        // create delete text
        let deleteText = document.createTextNode("Delete");
        // append text to span
        mainSpan.appendChild(spanText);
        // add class
        mainSpan.className = "task-box";
        // append text to delete
        deleteElement.appendChild(deleteText);
        // add class
        deleteElement.className = "delete";
        // append delete to span
        mainSpan.appendChild(deleteElement);
        // append span to task content
        taskContent.appendChild(mainSpan);
        // empty input field
        input.value = "";
        // focus on input field
        input.focus();
        countTasks();
        checkNoTasks();
    }

}
// finish task
document.addEventListener("click", (e) => {
    if(e.target.className == "delete") {
        e.target.parentNode.remove();
        checkNoTasks();
    }
    if(e.target.classList.contains("task-box") ) {{
        e.target.classList.toggle("finished");
    }
    }
})
// finish all tasks and delete all tasks
document.addEventListener("click", (e) => {
    if(e.target.classList.contains("finish-all")) {
        let allTasks = document.querySelectorAll(".task-box");
        allTasks.forEach((task) => {
            task.classList.toggle("finished");
        })
    }
    if(e.target.classList.contains("delete-all")) {
        let allTasks = document.querySelectorAll(".task-box");
        allTasks.forEach((task) => {
            task.remove();
            checkNoTasks();
        })
    }
    countTasks();
})

// function to create no task message
function createNoTaskMessage() {
    let mainSpan = document.createElement("span");
    let spanText = document.createTextNode("No task to show");
    mainSpan.appendChild(spanText);
    mainSpan.className = "no-task-message";
    taskContent.appendChild(mainSpan);
}
// function to remove no task message
function removeNoTaskMessage() {
    let noTaskMessage = document.querySelector(".no-task-message");
    if (noTaskMessage) {
        noTaskMessage.remove();
    }
}

function checkNoTasks() {
    if (taskContent.childElementCount === 0) {
        createNoTaskMessage();  //
    } else {
        removeNoTaskMessage();  //
    }
}

function countTasks() {
    tasksCount.innerHTML = document.querySelectorAll('.task-content .task-box').length;
    tasksCompleted.innerHTML = document.querySelectorAll(".task-box.finished").length;
}