-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
100 lines (63 loc) · 2.02 KB
/
script.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
// select element and assign then to variable
let new_task = document.querySelector('#new-task');
let form = document.querySelector('form');
let todoUl = document.querySelector('.items');
// todoUl.className = 'list-group';
let completeUl = document.querySelector('.complete-list ul');
// create function
let createtask = function(task)
{
let listitem = document.createElement('li');
let checkbox = document.createElement('input');
let label = document.createElement('label');
listitem.className = 'list-group-item';
checkbox.type ='checkbox';
checkbox.className = 'checkbox'
label.innerText = task;
listitem.appendChild(checkbox);
listitem.appendChild(label);
return listitem;
}
let addTask = function(event)
{
event.preventDefault();
if(new_task.value != "")
{
let listitem = createtask(new_task.value);
todoUl.appendChild(listitem);
new_task.value = "";
// binding the new task and incomplete task
Bindincompletetask(listitem, completeTask);
}
}
let Bindincompletetask = function(listitem, checkboxclick)
{
let checkbox = listitem.querySelector('input[type = "checkbox"]');
checkbox.onchange = checkboxclick;
}
let completeTask = function()
{
let listitem = this.parentNode;
let button = document.createElement('button');
button.className = 'btn';
button.innerText = 'Delete';
listitem.appendChild(button);
let checkbox = listitem.querySelector('input[type = "checkbox"]');
checkbox.remove();
listitem.appendChild(button);
completeUl.appendChild(listitem);
// binding the complete task and delete task
Bindcompletetask(listitem, deletetask);
}
let deletetask = function()
{
let listitem = this.parentNode;
let Ul = listitem.parentNode;
Ul.removeChild(listitem);
}
let Bindcompletetask = function(listitem, deleteonclick)
{
let deletebutton = listitem.querySelector('.btn');
deletebutton.onclick = deleteonclick;
}
form.addEventListener('submit', addTask);