DOM Project - TaskList

The purpose of this project is to explore the DOM, localStorage, event delegation in JavaScript(ES6)

---

DOM Project	Task List
Objective	To explore document object model, localStorage, event delegation in JavaScript
Description	Add a task, list the tasks, filter through them as we type, delete them, Also persist the tasks to localStorage so that they don't disappear when we reload the page, levae the page and come back.

---

Approach

Step 1.   UI (used Materialize CSS) and add task items (restricted to DOM)
Step 2.   Delete and filter the tasks (restricted to DOM)
Step 3.   Persist the task to localStorage, so that application stays in same state even if reload the page, leave and come                     back. Remove the task from localStorage, clearing all the tasks in localStorage

---

Important Points:

1. Event Delegation: Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. That event listener analyzes bubbled events to find a match on child elements. So basically, inside event handler we put logic to target the element that we actually want (for that particular event) Example in the project: I have used event delegation in the function which deals with deleting/removing the task from the list of tasks. If we look at the UI code, then we have all the tasks which will be inside ul tag as li tag. Now, if I want to remove the item, I will click on x icon (the i tag has the class of delete-item) and since the tasks are dynamic and multiple (as more tasks will be added), we need to use event delegation.

2. innerHTML vs removeChild: removeChild() is relatively faster than innerHTML. It is used in order to clear the tasks from DOM.

3. I have used keyup event in order to provide the functionality of filtering the tasks as you type. The keyup event occurs when a keyboard key is released.

---

Reference

1. Materialize CSS
2. innerHTML vs removeChild