CodeAlpha_ToDo_List/index.js at main · ikram595/CodeAlpha_ToDo_List · 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
function addTask() {
  let userInput = document.getElementById("task_input").value;
  const existingTask = Array.from(
    document.querySelectorAll(".task p b") //array fih all tasks ' text(p fih b)
  ).filter((task) => task.textContent.trim() === userInput);
  if (userInput !== "" && existingTask.length === 0) {
    let newTask = document.createElement("div");
    let parentDiv = document.getElementById("tasks");
    newTask.classList.add("task");
    newTask.innerHTML = `<p><b>${userInput}</b></p>
                    <div class="task-icons">
                        <i class="fa-solid fa-check-double" style="color: #44ff00;" onclick=completeTask(this)></i>
                        <i class="fa-solid fa-pen-to-square" style="color: #005eff;" onclick=editTask(this)></i>
                        <i class="fa-solid fa-trash" style="color: #ff0000;" onclick=deleteTask(this)></i>
                    </div>`;
    parentDiv.appendChild(newTask);
    countTasks();
    displayPlaceHolderText();
  } else if (existingTask.length > 0) {
    //task exists
    alert("Task already exists!");
  }
  document.getElementById("task_input").value = "";
}
function deleteTask(icon) {
  let parentDiv = icon.parentElement.parentElement;
  parentDiv.remove();
  countTasks();
  displayPlaceHolderText();
}
let editingTask = null;
function editTask(icon) {
  let parentDiv = icon.parentElement.parentElement;
  const taskText = parentDiv.querySelector("p > b").textContent;
  document.getElementById("task_input").value = taskText;
  const addButton = document.querySelector(".task-form button");
  addButton.textContent = "Edit";
  addButton.onclick = editTaskSubmit;
  editingTask = parentDiv;
}
function editTaskSubmit() {
  const userInput = document.getElementById("task_input").value.trim();
  if (userInput !== "") {
    const taskDiv = editingTask;
    const taskText = taskDiv.querySelector("p > b");
    taskText.textContent = userInput;
    editingTask = null; //reset=> button="Add"
    const addButton = document.querySelector(".task-form button");
    addButton.textContent = "Add";
    addButton.onclick = addTask;

    countTasks();
    displayPlaceHolderText();
    document.getElementById("task_input").value = "";
  }
}
function completeTask(icon) {
  let subParentDiv = icon.parentElement;
  let parentDiv = subParentDiv.parentElement;
  parentDiv.classList.add("completed");
  countTasks();
  displayPlaceHolderText();
}
function displayPlaceHolderText() {
  let tasksCount = document.querySelectorAll(".task").length;
  let text = document.querySelector(".placeholder-message");
  if (tasksCount === 0) {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}
function countTasks() {
  let displayCount = document.getElementById("tasks-count");
  let totalTasksCount = document.querySelectorAll(".task").length;
  let tasksCompletedCount = document.querySelectorAll(".completed").length;
  let tasksUncompletedCount = totalTasksCount - tasksCompletedCount;

  displayCount.textContent =
    totalTasksCount +
    " Total, " +
    tasksCompletedCount +
    " Completed, " +
    tasksUncompletedCount +
    " Pending.";
  //console.log(totalTasksCount);
}