├── .gitignore
├── READme.md
├── index.html
└── js
└── app.js
/.gitignore:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/READme.md:
--------------------------------------------------------------------------------
1 | ### Simple TODO List Using JavaScript
2 |
3 | #### Description
4 |
5 | Here you can easily add new task, delete before task and filter task by name
6 |
7 | #### Live Preview
8 |
9 | Preview
10 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
Tasks
42 |
51 |
54 |
57 |
63 |
64 |
65 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/js/app.js:
--------------------------------------------------------------------------------
1 | // task add form
2 | const addTask = document.getElementById("add-task");
3 |
4 | // clear all task button
5 | const clearAllTask = document.getElementById("clear-all-task");
6 |
7 | // filter task input
8 | const filterTask = document.getElementById("filter-task");
9 |
10 | // local storage task
11 | const tasks = JSON.parse(localStorage.getItem("tasks")) || [];
12 |
13 | // check if tasks is not empty
14 | if (tasks) {
15 | tasks.forEach((task) => {
16 | const newTask = document.createElement("li");
17 | const deleteBtn = document.createElement("button");
18 | deleteBtn.textContent = "X";
19 | deleteBtn.classList.add(
20 | "delete-btn",
21 | "bg-red-500",
22 | "text-white",
23 | "py-1",
24 | "px-2",
25 | "rounded-md",
26 | "ml-2"
27 | );
28 |
29 | deleteBtn.addEventListener("click", deleteTask);
30 | newTask.textContent = task;
31 | newTask.appendChild(deleteBtn);
32 | newTask.classList.add("task", "list-inside", "list-decimal");
33 | const list = document.querySelector(".task-list");
34 | clearAllTask.classList.remove("hidden");
35 | list.appendChild(newTask);
36 | });
37 | }
38 |
39 | // event listener
40 | addTask.addEventListener("submit", handleSubmit);
41 | clearAllTask.addEventListener("click", clearTasks);
42 | filterTask.addEventListener("keyup", filterTaskByKeyword);
43 |
44 | // handle add task
45 | function handleSubmit(e) {
46 | e.preventDefault();
47 |
48 | const form = e.target;
49 | const data = new FormData(form);
50 | const { task } = Object.fromEntries(data);
51 |
52 | // check if task is empty
53 | if (!task) return alert("Please enter a task");
54 |
55 | // save task to local storage
56 | tasks.push(task);
57 |
58 | localStorage.setItem("tasks", JSON.stringify(tasks));
59 |
60 | const newTask = document.createElement("li");
61 | const deleteBtn = document.createElement("button");
62 | deleteBtn.textContent = "X";
63 | deleteBtn.classList.add(
64 | "delete-btn",
65 | "bg-red-500",
66 | "text-white",
67 | "py-1",
68 | "px-2",
69 | "rounded-md",
70 | "ml-2"
71 | );
72 |
73 | deleteBtn.addEventListener("click", deleteTask);
74 |
75 | newTask.textContent = task;
76 | newTask.appendChild(deleteBtn);
77 |
78 | newTask.classList.add("task", "list-inside", "list-decimal");
79 | const list = document.querySelector(".task-list");
80 | clearAllTask.classList.remove("hidden");
81 | list.appendChild(newTask);
82 | form.reset();
83 | }
84 |
85 | // clear all task
86 | function clearTasks(e) {
87 | e.preventDefault();
88 | const list = document.querySelector(".task-list");
89 | list.innerHTML = "";
90 | clearAllTask.classList.add("hidden");
91 | // clear local storage task
92 | localStorage.removeItem("tasks");
93 | }
94 |
95 | // delete task
96 | function deleteTask(e) {
97 | e.preventDefault();
98 | const list = document.querySelector(".task-list");
99 | list.removeChild(e.target.parentElement);
100 |
101 | // remove task from local storage
102 | let task = e.target.parentElement.textContent;
103 |
104 | // remove X from task
105 | task = task.slice(0, task.length - 1);
106 | console.log(task);
107 | const index = tasks.indexOf(task);
108 | console.log(index);
109 | tasks.splice(index, 1);
110 | localStorage.setItem("tasks", JSON.stringify(tasks));
111 | }
112 |
113 | // filter task by keyword
114 | function filterTaskByKeyword(e) {
115 | e.preventDefault();
116 | const keyword = e.target.value.toLowerCase();
117 | const tasks = document.querySelectorAll(".task");
118 | tasks.forEach((task) => {
119 | const text = task.textContent.toLowerCase();
120 | if (text.includes(keyword)) {
121 | task.classList.remove("hidden");
122 | } else {
123 | task.classList.add("hidden");
124 | }
125 | });
126 | }
127 |
--------------------------------------------------------------------------------