-
Notifications
You must be signed in to change notification settings - Fork 0
/
new.js
93 lines (69 loc) · 1.83 KB
/
new.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
let name=document.querySelector("input");
let crBtn=document.querySelector("#create");
let showAll=document.querySelector("#show-all")
let notDone=document.querySelector("#not-done")
let tasklist=document.querySelector("#tasklist")
let message=document.querySelector("p")
let delAll=document.querySelector("#one")
let tasks=[]
notDone.addEventListener("click",showNotDone)
showAll.addEventListener("click",showAllTasks)
function showAllTasks(){
tasklist.innerHTML=""
tasks
.forEach(task=>task.createTask(tasklist))
}
function showNotDone(){
tasklist.innerHTML=""
tasks
.filter(task=>task.isDone==false)
.forEach(data=>data.createTask(tasklist))
}
delAll.addEventListener("click",function(){
tasklist.innerHTML=""
message.style.display="block"
})
crBtn.addEventListener("click",addHandler)
function addHandler(){
if(!name.value){
alert("Введіть задачу")
}
else{
let newTask=new Todo(name.value);
name.value=""
newTask.createTask(tasklist)
tasks.push(newTask)
}
}
class Todo{
constructor(text){
this.isDone=false;
this.div=null;
this.text=text;
}
createTask(element){
message.style.display="none"
this.div=document.createElement("div")
let p=document.createElement("p");
p.textContent=this.text;
let input=document.createElement("input")
input.type="checkbox";
input.addEventListener("click",()=> this.changeState())
let del=document.createElement("div")
del.classList.add("del")
del.textContent="x"
del.addEventListener("click",function(e){
e.target.parentElement.remove()
})
this.div.classList.add("ex")
this.div.append(input)
this.div.append(p)
this.div.append(del)
element.append(this.div)
console.log(tasks)
}
changeState(){
this.isDone=!this.isDone
this.div.classList.toggle("check")
}
}