-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
90 lines (79 loc) · 2.65 KB
/
app.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
// let's do something special
//all selectors here
const todoInput = document.querySelector('.guta');
const todoButton = document.querySelector('.btn-doto');
const todoList = document.querySelector('.tlist');
const filterOption = document.querySelector('.filter-todo');
//Event listeners
todoButton.addEventListener('click', addTodo);
//to delete todo items
todoList.addEventListener('click', deleteCheck);
// let's do tite selectors
filterOption.addEventListener('click', filterTodo);
//let's create " Functions "
function addTodo(event) {
event.preventDefault();
//todo div
const todoDiv = document.createElement('div');
todoDiv.classList.add('todo');
//lest create list
const newTodo = document.createElement('li');
newTodo.innerText = todoInput.value;
newTodo.classList.add('todo-item');
todoDiv.appendChild(newTodo);
//check mark button here
const completedButton = document.createElement('button');
completedButton.innerHTML = '<i class="fas fa-check"></i>';
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
//check trash button
const trashButton = document.createElement('button');
trashButton.innerHTML='<i class="fas fa-trash-alt"></i>';
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);
//append to this list
todoList.appendChild(todoDiv);
//let's clear the value user input
todoInput.value = '';
}
function deleteCheck(e) {
const item = e.target;
//let's DELETE todo items
if(item.classList[0] === 'trash-btn') {
const todo = item.parentElement;
//umm gonna add animation here
todo.classList.add("fall");
todo.addEventListener('transitioned', function(){
todo.remove();
});
}
//complete task "check"
if(item.classList[0] === "complete-btn") {
const todo = item.parentElement;
todo.classList.toggle('completed');
}
}
//anoter function here
function filterTodo(e) {
const todos = todoList.childNodes;
todos.forEach(function(todo){
switch(e.target.value){
case "sob":
todo.style.display = 'flex';
case "hoce":
if(todo.classList.contains('hoce')){
todo.style.display = 'flex';
}else{
todo.style.display='none';
}
break;
case "hoyni":
if(!todo.classList.contains('hoce')){
todo.style.display = 'flex';
}else{
todo.style.display = 'none';
}
break;
}
});
}