-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
138 lines (112 loc) · 3.55 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
// Define Ui vars
const form = document.querySelector("#task-form");
const tasklist = document.querySelector(".collection");
const clearBtn= document.querySelector(".clear-tasks");
const filter = document.querySelector("#filter");
const taskInput= document.querySelector("#task");
function gettasks(){
let tasks;
if(localStorage.getItem('tasks')=== null){
tasks=[];
}
else{
tasks=JSON.parse(localStorage.getItem('tasks'));
}
tasks.forEach(function(task){
//create li elementy
const li=document.createElement('li');
li.className='collection-item';
li.appendChild(document.createTextNode(task));
//create new link elementy
const link=document.createElement('a');
link.className="delete-item secondary-content";
link.innerHTML='<i class="fas fa-times"></i>';
li.appendChild(link);
tasklist.appendChild(li);
});
}
function clearTaskFromLocalStorage(){
localStorage.clear();
}
function clearTask(e){
tasklist.innerHTML="";
clearTaskFromLocalStorage();
}
function filtertask(e){
const text=e.target.value.toLowerCase();
document.querySelectorAll('.collection-item').forEach(
function(task) {
const item = task.firstChild.textContent;
if(item.toLowerCase().indexOf(text) != -1){
task.style.display="block";
}else{
task.style.display="none";
}
}
);
}
function removeTaskFromLocalStorage(taskItem){
console.log(taskItem);
let tasks;
if(localStorage.getItem('tasks')=== null){
tasks=[];
}
else{
tasks=JSON.parse(localStorage.getItem('tasks'));
}
tasks.forEach(function(task,index){
if(taskItem.textContent===task){
tasks.splice(index,1);
}
});
localStorage.setItem('tasks',JSON.stringify(tasks));
}
function removeTask(e){
if(e.target.parentElement.classList.contains("delete-item")){
if(confirm("Are you sure you want to delete?")){
e.target.parentElement.parentElement.remove();
// e.target.parentElement.parentElement.remove();
removeTaskFromLocalStorage(e.target.parentElement.parentElement);
}
}
}
function storeTaskInLocalStorage(task){
let tasks;
if(localStorage.getItem('tasks')=== null){
tasks=[];
}
else{
tasks=JSON.parse(localStorage.getItem('tasks'));
}
tasks.push(task);
localStorage.setItem('tasks',JSON.stringify(tasks));
}
function addTask(e){
if(taskInput.value===''){
alert('Add a task');
}
//create li elementy
const li=document.createElement('li');
li.className='collection-item';
li.appendChild(document.createTextNode(taskInput.value));
//create new link elementy
const link=document.createElement('a');
link.className="delete-item secondary-content";
link.innerHTML='<i class="fas fa-times"></i>';
li.appendChild(link);
tasklist.appendChild(li);
storeTaskInLocalStorage(taskInput.value);
taskInput.value='';
e.preventDefault();
}
// load all events listeners
function loadEventsListeners(){
//add task event
document.addEventListener('DOMContentLoaded', gettasks);
form.addEventListener('submit',addTask);
tasklist.addEventListener('click',removeTask);
clearBtn.addEventListener('click',clearTask);
filter.addEventListener('keyup',filtertask);
}
//Add task eventfunction addTask function
loadEventsListeners();