Skip to content

Commit fc21436

Browse files
committed
Feat: filter tasks as per selected options
1 parent 33c84d2 commit fc21436

File tree

3 files changed

+124
-6
lines changed

3 files changed

+124
-6
lines changed

index.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,16 @@ <h1 id="todoTitle">ToDo App</h1>
2626
</svg>
2727
</div>
2828

29+
<div class="filter-tasks">
30+
<select id="filter-list" title="Filter Tasks">
31+
<optgroup label="Filter Tasks">
32+
<option value="all" selected>All</option>
33+
<option value="active">Active</option>
34+
<option value="completed">Completed</option>
35+
</optgroup>
36+
</select>
37+
</div>
38+
2939
<div class="task-container">
3040
<div class="task" taskid="1">
3141
<!-- Pending Task -->

script.js

Lines changed: 98 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const taskAddBtn = document.querySelector("#addSvg");
33
const taskContainer = document.querySelector(".task-container");
44
const taskField = document.querySelector(".task");
55
const taskCountText = document.querySelector("#clearAllTaskText");
6+
const filterSelected = document.querySelector("#filter-list");
67
const clearAllTaskBtn = document.querySelector("#clearAllTaskBtn");
78
const taskCompletedIcon = "fa-solid fa-circle-check pendingSvg";
89
const taskUncompletedIcon = "fa-regular fa-circle pendingSvg";
@@ -25,11 +26,6 @@ const completedTask = (task) => {
2526
editIcon.style.display = "none";
2627
task.classList.add("checked");
2728

28-
// shift the completed task to the end
29-
const shiftTask = task.cloneNode(true);
30-
task.remove();
31-
taskContainer.append(shiftTask);
32-
3329
// update task counts
3430
taskCount--;
3531
updateTaskCount();
@@ -259,6 +255,80 @@ const listTasksFromStorage = () => {
259255
updateTaskCount();
260256
}
261257

258+
// list only active tasks
259+
const listActiveTask = () => {
260+
261+
// get data from local storage
262+
const tasksData = loadData();
263+
taskCount = 0;
264+
265+
// clear the task-container
266+
taskContainer.innerHTML = '';
267+
268+
// list down the tasks
269+
for(const task of tasksData)
270+
{
271+
// if the task is incomplete list it
272+
if(!task.completed)
273+
{
274+
const newTaskField = taskField.cloneNode(true);
275+
276+
// select the task text field and the text from storage
277+
const newTaskText = newTaskField.querySelector(".taskText");
278+
newTaskText.textContent = task.text;
279+
280+
// add taskid to tasks
281+
newTaskField.setAttribute("taskid", task.id);
282+
283+
// append the task
284+
taskContainer.append(newTaskField);
285+
286+
taskCount++;
287+
}
288+
}
289+
// update the taskCount
290+
updateTaskCount();
291+
}
292+
293+
// list completed Tasks
294+
const listCompletedTasks = () => {
295+
296+
// get data from local storage
297+
const tasksData = loadData();
298+
299+
// clear the task-container
300+
taskContainer.innerHTML = '';
301+
302+
// list down the tasks
303+
for(const task of tasksData)
304+
{
305+
// if the task is incomplete list it
306+
if(task.completed)
307+
{
308+
const newTaskField = taskField.cloneNode(true);
309+
310+
// select the task text field and the text from storage
311+
const newTaskText = newTaskField.querySelector(".taskText");
312+
newTaskText.textContent = task.text;
313+
314+
// add taskid to tasks
315+
newTaskField.setAttribute("taskid", task.id);
316+
317+
// change the sign to checked
318+
newTaskField.classList.add("checked");
319+
const uncheckIcon = newTaskField.querySelector("i.pendingSvg");
320+
uncheckIcon.className = taskCompletedIcon;
321+
322+
// append the task
323+
taskContainer.append(newTaskField);
324+
}
325+
}
326+
327+
// update the taskCount
328+
taskCount = 0;
329+
updateTaskCount();
330+
}
331+
262332
// add initial tasks to the local storage
263333
const executeOnceOnVisit = () => {
264334

@@ -387,3 +457,26 @@ const updateTaskTextInStorage = (task) => {
387457
// update the data at local storage
388458
localStorage.setItem("tasks", JSON.stringify(tasksData));
389459
}
460+
461+
// filter the tasks as All, Active, completed
462+
filterSelected.addEventListener("change", (e) => {
463+
464+
// get the selected value
465+
const filterValue = e.target.value;
466+
467+
// execute functions as per value
468+
switch(filterValue)
469+
{
470+
case "all":
471+
listTasksFromStorage();
472+
break;
473+
case "active":
474+
listActiveTask();
475+
break;
476+
case "completed":
477+
listCompletedTasks();
478+
break;
479+
default:
480+
// do nothing :)
481+
}
482+
});

style.css

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ body {
3333
justify-content: space-between;
3434
align-items: center;
3535
padding: 4px;
36-
margin-bottom: 12px;
36+
margin-bottom: 6px;
3737
}
3838
#taskInput {
3939
width: 85%;
@@ -59,6 +59,21 @@ body {
5959
border-radius: 4px;
6060
cursor: pointer;
6161
}
62+
/* Filter Tasks */
63+
.filter-tasks {
64+
padding: 4px 8px;
65+
margin-bottom: 8px;
66+
}
67+
#filter-list {
68+
font-size: 18px;
69+
border: transparent;
70+
outline: transparent;
71+
border-radius: 4px;
72+
padding: 4px;
73+
color: white;
74+
background-color: #2D3E50;
75+
cursor: pointer;
76+
}
6277
/* Tasks */
6378
.task-container {
6479
padding: 0 6px;

0 commit comments

Comments
 (0)