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

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 are going to add two different, but similar, pieces of functionality to our to-do list web application. We are going to add the functionality to delete individual list items and also the functionality to delete every to-do list item at once. This will allow us to remove list items that are completed, or to completely clear the entire list and create a new list.

First, we will add a new button element to our ‘index’ HTML page under our heading element. We will give this button an ‘id’ attribute so that we can apply some CSS to it and also to allow us to grab the element in our JavaScript code easily.

Now we are doing to add some CSS to our button, and to a class called ‘remove-btn’ which we will use later. The float property allows us to align elements to a specific horizontal position (left, center, or right). This will make our clear button and elements that have the ‘remove-btn’ class all be aligned to the right of its parent element. Remember CSS is put inside a ‘.css’ file, this will be put into our ‘styles.css’ file.

Now we are going to modify our ‘render’ function in our JavaScript file to add a remove button to each list item as we render it. The code below shows a section of the render function but we the added code to add a new button element, set it’s display text to “Remove”, add the class of ‘remove-btn’, and to add a click event handler to it. The click handler function we are adding we haven’t defined yet, so the clicking the button will currently result in an error. We are using the ‘bind’ function as we did in a previous tutorial to apply a function to an event listener and pass the ‘id’ parameter to the function.

Now we will define the click handler function we just applied to the remove buttons. The code snippet below shows this function. The remove handler function has two parameters, one being the ‘id’ that we passed and the other being the event of the click action. Then we use a filter on the data array. The filter function returns a new array, which is why we need to assign the data to the result of the filter, which only returns the items in the array that match the filter function. This filter will return all the items in the array that don’t match the id of the parameter, this results in it removing the list item that matches the id passed to the function. The filter function is explained in more depth in a post that will be linked below. We then call the render function to update the display of the list item in the HTML page.

Now we need to define a function to be used on the clear button that we created at the beginning of this tutorial. First, we need to grab the element, using a document selector, and then add a click event listener with a callback function, as we have done before. Within this function, we are using the ‘confirm’ function. This is an inbuilt function JavaScript that will display a warning dialog in the browser with some warning text and two buttons (‘ok’ and ‘cancel’); The text we pass the confirm function is the warning text that is displayed on the warning dialog. The confirm function will return a boolean value depending on the button the user clicks, if they click the ‘cancel’ button it will return ‘false’ and if they click the ‘ok’ button it will return the value ‘true’. We then use an if statement to run code if the user has clicked the ‘ok’ button. If the user clicks the ‘ok’ button we then set the data variable to an empty array, effectively removing all the items in the array, and then call the ‘render’ function to update the display of the list item on the webpage.

In this part of the tutorial, we added two pieces of functionality, to delete single list items and to clear all the list items. However, we are still using local storage, which means our data is browser dependent, it will be different on a different browser. In the next few parts, we will be working with PHP to add a database to our to-do list. This means we will be able to visit the page on any browser and on any computer and have the same list.

Further Reading

JavaScript Filter Function 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 8

Leave a Reply