JAVASCRIPT JOURNEY - DAY 17
CHAPTER 17 : PROJECT - TASK LIST
GOAL: A basic TASK LIST
All you have to do is open up your VS Code , make a folder named TaskList with an index.html and app.js file. Then google comes into play, google materialize css CDN and copy its CSS link files. (Can copy from here also) with fontawesome CDNlink .
```<! — Compiled and minified CSS →
<link rel=”stylesheet” href=”cdnjs.cloudflare.com/ajax/libs/materialize/..">
<link rel=”stylesheet” href=”cdnjs.cloudflare.com/ajax/libs/font-awesome.."
The main structure looks like:
DOM STRUCTURE:
**INDEX.HTML SOURCE CODE:
**
```<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<title>Task List</title>
<link rel=”stylesheet” href=”css/style.css”>
<! — Compiled and minified CSS →
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#info
{
text-align: center;
}
</style>
</head>
<body>
<div class=”container “>
<div class=”row”>
<div class=”col s12">
<div class=”card” id=”main”>
<! — main card content starts →
<div class=”card-content”>
<span class=”card-title”>Task List</span>
<div class=”row”>
<form id= “task-form”>
<div class=”input-field col s12">
<input type=”text” name=”task” id=”task”>
<label for=”task”>New Task</label>
</div>
<input type=”submit” value=”Add Task” class=”btn”>
</form>
</div>
</div>
<! — main card content ends →
<! — card action starts →
<div class=”card-action”>
<h5 id=”task-title”>Tasks</h5>
<div class=”input-field col s12">
<input type=”text” name=”filter” id=”filter”>
<label for=”filter”>Filter Tasks</label>
</div>
<ul class=”collection”></ul>
<a class=”clear-tasks btn black”href=”#”>Clear Tasks</a>
</div>
<! — Card action ends →
</div>
<div id=”info”>
<a href=”https://www.google.com/" target=”_blank”> <h4 class=”btn btn-danger”>Understand the Code!</h4> </a>
</div>
</div>
</div>
</div>
<script src=”https://code.jquery.com/jquery-3.5.1.js" integrity=”sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=” crossorigin=”anonymous”></script>
<! — Compiled and minified JavaScript →
<script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src=”js/app.js”></script>
</body>
</html>
So this is how we ready our basic UI Template. But what is more important is the JS behind TaskList
Let us understand it with a series of Steps:-
Grab all the UI elements (for which you mentioned class and ID) using getElementById() or get ElementByClassName() or querySelector()
- Next step is to load all the event listeners to make the TaskList responsive. For that we need to define a function named loadEventListeners() to handle all the events with respect to UI
Tip: Grabbed UI elements above are used to attach even listeners to them.
- One by One, define all of the event Listeners: a) Add Task :-( Remember we can add delete or clear tasks normally , but once we reload the window we can never have out data stored there. so for that we need to instantiate LocalStorage concept.
Summary: If you add no task it will show you alert while you click the add task button leading to the DOM creation of list for all of the tasks that will be added .
In addition to it we can also add cross button for user experience using DOM only .
Later append all the li thing into ul and call user defied function storeTaskInLocalStorage() to store your tasks permanently (Which we will discuss in a bit) .
b) Remove Task:
To explain this code ,
remember you have added a cross (x) icon besides your task list in addTask() function. When you console e.target() it prints out the tag associated with cross(x) icon.
To remove the list we need to grab the tag to ensure that we have grabbed the whole a tag with its remove icon or not for further process.
Once we ensure the class name is correct , we can prompt the user in between if he/she is sure to remove the task followed by yes , we can go from -> ->
Later we can call removeTaskInLocalStorage() to remove task from the memory as well.
c) Clear Tasks:-
POINT : innerHTML() is used to give it null value with li classname taskList
d) Filter Tasks:
Explanation :-
With the click of filterTask event listener filterTasks() function is called .. where first we grab the text types in the search bar using e.target.value and will convert into lowercase for ease.
Then we can take all the list items in li with classname: collection-item and apply foreach on it because the foreach will return the nodelist with a callback function :
Where the const item will grab the text content of every list item which will be compared with the searched text (text var) using indexOf to match every character of const item. If it matches , display that particular item otherwise display none.
This is all about basics of TaskList functions . But what left is the localStorage concept to retain the values once the window reloaded.
Now in the loadEventListeners() function , at the top define a DOM Load Event with function getTasks() to call this particular function everytime the DOM reloads.
Explanation : We need to get tasks from LocalStorage everytime we call this function. For that first we need to check whether the tasks we declared using let is null or not , if yes then tasks=[] else we need to parse every task and attach a foreach to it with a callback function to put back tasks from memory to
Now we can define those storeTaskInLocalStorage() , removeTaskInLocalStorage() and clearTaskfromLocalStorage() functions easily.
In this way you can make your TaskList work easily using JS only.
Thankyou!!