If you have some basic knowledge of DOM, you can start to build your web side projects and I think to-do list is a good one for building solid concept of DOM.
Let’s try to understand the behind logic of a to-do list and I will explain each logic.
1. When click add or press enter, the value in the input field will show in the to-do item section
2. When click the edit button, you can edit the item your to-do items
3. When click the delete button, the to-do item can be deleted
4. When click the checkbox, it will display a line on the item. So, the user knows this item is finished
5. The browser should remember the to-do item users input, otherwise it just a “Interface game”
6. The to-do item can be filtered by all, complete, or uncomplete
Firstly, how do we know a user press the add button or press enter? Please try to recall there is a function called addEventListener(). We can use it to listen when an event happens.
In the creatteToDoItem(), we use insertAdjacentHTML() to put every new to-do item after the last one.
Secondly, how do we edit the to-do item? As you can see in the user interface, there are three different buttons in each to-do item, checkbox, edit, and delete. Do we add an event listener on each button? NO, it not good for management and performance. Instead, we add the event listener on their parent. I think it is a better option to listen three different buttons.
Let’s take look at the red square. Here we use toggle() to identify whether the item is finished or not. The next yellow square for the edition part, it is a little bit complex here, but don’t worry. The first if-else statement the default setting is true, then make it become false. So, the user can edit the chosen item. Then set the value of the modified item to the its attribute by using setAttribute(). As for the code about localStorage, we will talk them later.
The last one, green square for delete. Here is a trick that you need to learn. When we try to delete something, it is better to know the parent of the delete button. Why? Because the item you want to delete is not just the delete button itself, the one you try to delete is the whole item.
Thirdly, when recording something in the to-do list, users hope that if they close the window and open it the next day, these items they put on the previous day are still stored on the list. How do we achieve it? We can use localStorage().
In the localStorage part, the very first thing we do is to check whether there is item in your localStorage. If nothing in it, we’ll create an empty array, or parse the item in the localStorage to an object.
The next is the timing of using localStorage(). When pressing the add button, the item should not only be put into the to-do item section, but saved it to the localStorage. So, you can see there is a line saveLocalStorage(input__value) in the add function. Then, how do we get the items and put them back to to-do item section from the localStorage, which is that the value can be saved after closing window.
In the previous paragraph, we talked about the modification for to-do item, so that the value on the interface is same as localStorage. Let’s back to the yellow square. We can set -1 as edit index for tracking the position in the array we shell be editing. When click the edit button, it executes the else part. The edit__value equals to the items’ position in the array. Then, editLocalStorag()can help us to splice and replace the specific value.
When clicking delete button, we not only delete the item, but the one in the array. We use splice() to delete the one we delete on the interface. Then set the new data to the localStorage.
Lastly, all items can be filtered by all, complete, or uncomplete. Here, I used switch statement to identify the status of to-do items.
IMO, To-do list is a very first side project for every beginner (including myself) to practice and have a solid concept how a web application runs. In this project, you can apply those knowledge you learn about JS, HTML, CSS, etc. I highly recommend you can make your own to-do or task list.
You can check my GitHub for the to-do list project. If you like my article, please share your comments with me below. Thank you!
Related Article: DOM — Browser Event
