TodoList/script.js at master · KingBasak/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
var ListBtn = document.getElementById("AddListBtn");
var ListName = document.getElementById("ListName");
var DivContainer = document.querySelector(".ListContainer");

function CreateNewList() {
  //Declaring the new HTML tags for new List creation.
  var NewCard = document.createElement("div");
  var NewHead = document.createElement("div");
  var ListHeading = document.createElement("h3");
  var NewCrossBtn = document.createElement("button");
  var NewBody = document.createElement("div");
  var NewTaskInput = document.createElement("input");
  var NewTaskBtn = document.createElement("button");
  var NewUl = document.createElement("ul");
  //Appending all HTML tage properly in order for creation of new List.
  ListHeading.appendChild(document.createTextNode(ListName.value));
  NewHead.appendChild(ListHeading);
  NewCrossBtn.appendChild(document.createTextNode("X"));
  NewHead.appendChild(NewCrossBtn);
  NewCard.appendChild(NewHead);
  NewBody.appendChild(NewTaskInput);
  NewTaskBtn.appendChild(document.createTextNode("Add task"));
  NewBody.appendChild(NewTaskBtn);
  NewBody.appendChild(NewUl);
  NewCard.appendChild(NewBody);
  DivContainer.appendChild(NewCard);
  //Assinging the nesesarry class to the new HTML tags.
  NewCard.className = "ListCard";
  NewHead.className = "ListHead";
  NewCrossBtn.className = "CrossListBtn";
  NewBody.className = "ListBody";
  NewTaskInput.className = "TaskInput";
  NewTaskInput.type = "text";
  NewTaskInput.placeholder = "Enter Task";
  NewTaskBtn.className = "AddTaskBtn";
  NewCrossBtn.onclick = DeleteList;
  // Code for activating the buttons to add new task.
  NewTaskBtn.addEventListener("click", AddTaskAfterClick);
  NewTaskInput.addEventListener("keypress", AddTaskAfterKeypress);
  function AddTaskAfterClick() {
    if (NewTaskInput.value.length > 0) {
      CreateNewTask();
    }
  }
  function AddTaskAfterKeypress(event) {
    if (NewTaskInput.value.length > 0 && event.keyCode === 13) {
      CreateNewTask();
    }
  }
  //Code for creating new task.
  function CreateNewTask() {
    var Newli = document.createElement("li");
    var Newbtn = document.createElement("button");
    var Delbtn = document.createElement("button");
    Delbtn.appendChild(document.createTextNode("✖"));
    Newli.appendChild(Delbtn);
    Newbtn.appendChild(document.createTextNode("✔"));
    Newli.appendChild(Newbtn);
    Newli.appendChild(document.createTextNode(NewTaskInput.value));
    NewUl.appendChild(Newli);
    Delbtn.className = "TaskDeleteBtn";
    Newbtn.className = "TaskDoneBtn";
    Newbtn.onclick = TaskDone;
    Delbtn.onclick = DeleteTask;
    NewTaskInput.value = "";
  }
}

//Code for Deleting any task or any list.
function DeleteList(event) {
  event.target.parentNode.parentNode.remove();
}
function TaskDone(event) {
  event.target.parentNode.classList.toggle("TaskComplete");
}
function DeleteTask(event) {
  event.target.parentNode.remove();
}

// Code for activating the buttons to add new List.
ListBtn.addEventListener("click", AddListAfterClick);
ListName.addEventListener("keypress", AddTaskAfterKeypress);
function AddListAfterClick() {
  if (ListName.value.length > 0) {
    CreateNewList();
    ListName.value = "";
  }
}
function AddTaskAfterKeypress(event) {
  if (ListName.value.length > 0 && event.keyCode === 13) {
    CreateNewList();
    ListName.value = "";
  }
}