How To Create A Simple To Do List App Using HTML, CSS, JS, and PHP – Part 5

This is the continuation of a series of tutorials about creating a to-do list web application, if you haven’t checked out the entire tutorial please start from Part 1.

In this part, we will take our list of to-do items and change the way they are stored and managed. We are going to use JavaScript to store the to list items, and use a JavaScript array of objects to add and remove items for our to-do list. JavaScript will also be used to render our list items onto the webpage using HTML elements.

Firstly, we will remove all the static list items in our HTML page, remove all the ‘li’ elements in our list in the ‘index.html’ file. Now when you look at the page in a browser there will be no items in our to-do list.

We are now going to rewrite our entire ‘scripts.js’ JavaScript file. First will we create an array of objects to store our to-do list items. Each item has three fields or attributes, an ‘id’, which allows us to identify unique/specific records, a ‘text’ field that contains the string text that will be displayed on the page, and a ‘isDone’ field that will contain a boolean value which will determine if the to-do list item is done and if the checkbox input element should be checked or not when we render the item.

We will now create a function to render all the elements onto the HTML page. This is similar to the function we used in the last part to add a new element to the page. We first use a for loop to run through all the items in the list ‘data’. Then for each item, we create a new ‘li’ tag and set its display text to the ‘text’ attribute of the list item. We then create a checkbox input field and set it’s ‘checked’ property to the boolean ‘isDone’ attribute of each item. To give the strike-through effect to the list item, like we had when you click the checkbox, we use a ternary operator which is similar to an if statement. Ternary operators are discussed in more detail in a linked post at the bottom of this page. Finally, we add the checkbox field to the ‘li’ element and then add the new ‘li’ element to the ‘ul’ element. If you call this function, be adding ‘render();’ after it will display all the items inside the ‘data’ array onto the page.

Next, we will create a function that will remove all the elements from the ‘ul’ tag. This is important, as when we call the render function we don’t just want it to add duplicates of each item if you call the ‘render’ function multiple times you will see what I mean. In this function, we are using a while loop to remove each child element of the ‘ul’ tag element. While loops and do-while loops are explained in a post linked at the bottom of this page. The ‘firstChild’ method will return the element that is at the top of the list, e.g. the first ‘li’ tag. We use this to determine if there are any children left in the condition of the while loop and then use it again to remove the child from the list.

We now need a function to handle the click events on the checkbox input items. We use a separate function to make it easier to assign to each checkbox element later on. This function takes two parameters, ‘id’ which will be the id of the to-do list item and the ‘event’ which refers to the click event. We use the ‘find’ function to get the to-do list item with the matching ‘id’ value. The ‘find’ function is explained in more detail in a post linked below. Once we have the matching to-do list item from the JavaScript array we set the ‘isDone’ attribute to the checkbox state. The ‘event.target.checked’ will return a boolean value corresponding to the state of the checkbox, true or false. Finally, we call the ‘render’ function so that the display is kept up to date.

We are now going to modify the render function by first calling the ‘clearList’ function so that the old items are removed to avoid adding duplicate items to the page. Then we are going to add a change event listener to the checkboxes. We use the bind function here and pass the item’s id. The bind function allows us to change the value and scope of ‘this’ in JavaScript, so we able to bind the function to the checkbox, pass the id parameter, and have it not automatically called. This isn’t the only way to achieve this in JavaScript.

You might still be looking at a blank webpage, this is because we need to call the ‘render’ function when the page loads. Outside of any other function call the render function and the page will be filled with the items from the JavaScript array. You’ll notice that we can’t add new items to the list anymore, we will fix this in the next part of the tutorial series.

Further Reading

JavaScript Ternary Operator
JavaScript Objects Explained 
While Loops in JavaScript
While and Do While Loops
JavaScript Find Function Explained
JavaScript ‘this’ Keyword
Model, View, Controller Explained

Remember all of the code for this tutorial series can be seen at the following link: https://github.com/acroynon/tutorial-to-do-list-app
and a demo of the to-do list application can be seen at the following link: https://acroynon.github.io/tutorial-to-do-list-app/

Continue to Part 6

Leave a Reply