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

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 some JavaScript to cross out items in the to-do list when they have been completed. This means when the checkbox is clicked it will add a strike-through effect to the text of the to-do list item, and if the checkbox is unticked the strike-through effect will be removed, so you can complete and uncomplete items.

Firstly we need to create a file called ‘scripts.js’ where ‘.js’ is the extension of the file. We also need to link the scripts file to the main index HTML file so that it knows to load it when the index page is loaded in the browser. We will include the scripts tag at the end of the body tag after all the elements have been declared. This is because we will be accessing the elements on the page, so we want the elements to be rendered before the script is loaded so that we can access them. Remember HTML files are read from the top to the bottom.

At the end of the body tag, after all the elements but before the closing body tag, we are going to use a script tag to link the JavaScript file with the index HTML file. A script tag is not self-closing so we need to include a separate closing script tag. The ‘src’ attribute of our script tag tells the index file where to find the JavaScript file, this is a relative path but also absolute paths are accepted. This is similar to when we linked to our stylesheet file in Part 2 of this tutorial series.

Within our new JavaScript file, we are going to grab the checkbox elements and attach an event listener to it that will log the status of the checkbox when it is clicked. This means when we click the checkbox it will log either ‘true’ or ‘false’ depending on the state of the checkbox if it is checked or not.

Within the new JavaScript, file put the below code. The first line will grab one of the checkbox elements using a query selector, you can also use document selectors here instead. Then we add a ‘change’ event listener to the checkbox, this will call the function whenever the checkbox changes (when the user clicks it). This function will simply output to the developer console the value of the checkbox, a boolean variable of the current state of the checkbox (true if it is checked and false if it is not). You can open the developer console in your browser either through the settings or most browsers will open it when the F12 key is pressed. Open the webpage, and the developer console, in your browser and test out the code. You will notice that the function is only called when the first checkbox is changed.

Now we are going to add the strike-through effect to our list item instead of outputting the status of the checkbox. Below I have changed the function to achieve this. Now when the function is called it will grab the parent element of the checkbox, the element that it is contained within, which will be our list item (the ‘li’ tag). We then use an if statement to change the text-decoration, the ‘line-through’ value will make the text be crossed out and the ‘none’ value will not have the strike-through effect. We use ‘this.checked’ in the if statement to determine the state of the checkbox if you switch the values we are assigning (‘line-through’ and ‘none’) around then the element will have a strike-through effect if the checkbox is checked and not if it is not checked. If statements in JavaScript are covered more in depth in a different post which will be linked at the end of this post.

Now that we the desired functionality on one of the checkbox elements we need to apply to it to every checkbox on the page. We first need to change our ‘checkbox’ element to a list by grabbing all the elements that match our document query. We do this by changing ‘querySelector’ to ‘querySelectorAll’. Now within our function, we iterate through the list, which means we just count through each element that is contained in the list and add our ‘change’ event listener to it. This will take the functionality we previously had and apply it to every list item on the page. For loops are described in more detail in a different post that will be linked below.

In this part, we added an event listener to each element in our to-do list that will add a strike-through effect to the text of each item dependent on the checkbox state. We covered basic variables, if statements, events, and for loops. Each of these topics and more is covered in detail in the posts linked below.

Further Reading

What is JavaScript?
Variables in JavaScript 
Functions in JavaScript
Events in HTML and JavaScript
What is the Developer Console in Browsers?
Arrays and Lists in JavaScript
If Statements in JavaScript
For Loops in JavaScript
Modify CSS Using JavaScript

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 4

Leave a Reply