@@ -3,6 +3,7 @@ const taskAddBtn = document.querySelector("#addSvg");
3
3
const taskContainer = document . querySelector ( ".task-container" ) ;
4
4
const taskField = document . querySelector ( ".task" ) ;
5
5
const taskCountText = document . querySelector ( "#clearAllTaskText" ) ;
6
+ const filterSelected = document . querySelector ( "#filter-list" ) ;
6
7
const clearAllTaskBtn = document . querySelector ( "#clearAllTaskBtn" ) ;
7
8
const taskCompletedIcon = "fa-solid fa-circle-check pendingSvg" ;
8
9
const taskUncompletedIcon = "fa-regular fa-circle pendingSvg" ;
@@ -25,11 +26,6 @@ const completedTask = (task) => {
25
26
editIcon . style . display = "none" ;
26
27
task . classList . add ( "checked" ) ;
27
28
28
- // shift the completed task to the end
29
- const shiftTask = task . cloneNode ( true ) ;
30
- task . remove ( ) ;
31
- taskContainer . append ( shiftTask ) ;
32
-
33
29
// update task counts
34
30
taskCount -- ;
35
31
updateTaskCount ( ) ;
@@ -259,6 +255,80 @@ const listTasksFromStorage = () => {
259
255
updateTaskCount ( ) ;
260
256
}
261
257
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
+
262
332
// add initial tasks to the local storage
263
333
const executeOnceOnVisit = ( ) => {
264
334
@@ -387,3 +457,26 @@ const updateTaskTextInStorage = (task) => {
387
457
// update the data at local storage
388
458
localStorage . setItem ( "tasks" , JSON . stringify ( tasksData ) ) ;
389
459
}
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
+ } ) ;
0 commit comments