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

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 are going to add the ability to add new items to our to-do list application. This will require an input text field, so we can type the new text to be added, and a button so that we can submit the new item to be added to the list. We will then have to add a click handler, or event listener, to the button so that we can add the new item to the list.

Firstly, we need to add an input type of ‘text’ and a button to trigger the add operation. Below the heading tag, but above the list of items, we add the below code to add these two elements to our page. These elements each have an ‘id’ that we will use to apply CSS styles in our stylesheet and to add functionality to them in our JavaScript file.

Before we add any style to our new elements they will look like default elements. We can add some simple style attributes in our stylesheet file ‘styles.css’. The ‘text-align’ property will determine how the elements are aligned within the container, such as ‘left’, ‘right’ or in our case ‘center’. We have used percentages in the width property which will be related to the parent element, e.g. the ‘input-container’ element will be 95% the width of its parent element. The CSS selectors used either use an id (e.g. ‘#input-container’) to select the container or are followed by a tag name (e.g. ‘#input-container input’) which will selector all the elements of that tag that are contained within the element of with the id. For example, ‘#input-container input’ will select all elements of tag type ‘input’ that are within an element with the id of ‘input-container’. Ids and classes are explained in more detail in a post linked at the bottom of the page.

Now, within the JavaScript file, we need to add an event listener to the new ‘add’ button which will add a new item to the to-do list. The code below shows getting the ‘add’ button using the ‘getElementById’ document selector function. Document selector functions are covered in a post in more detail that is linked at the end of this post. We then add a ‘click’ event listener to the button that will fire a function whenever the button is clicked.

Inside our function, we need to grab the ‘ul’ element that contains all our list items and the input field that contains the text for the new to-do list item. We use a combination of a ‘querySelector’ and ‘getElementElementById’ document selector functions to grab these elements. Any element can be accessed using a query selector or a document selector function, they both achieve the same result but in different ways.

We then need to create a new list item element and set its text value to the text value of the input field. The ‘innerText’ field is a field that all HTML elements have, it refers to the text that is within the element. The ‘value’ field is a field that all input text fields have that returns the value inside the text field, the value the user typed into the field. The below code will, therefore, create a new list item element and set it’s displayed text to the value that was typed in the input text field.

We now need to create a checkbox for our list item, so it looks like the rest of the list items we have. We create a new ‘input’ element, as the checkbox is created using an ‘input’ HTML tag. We then set the ‘type’ field to ‘checkbox’, as the input tag in HTML has an attribute called ‘type’ with the value of ‘checkbox’ which makes it a checkbox input element rather than a normal text input element.

We then need to add the checkbox to the list item and finally add the new list item to the list. We use the ‘prepend’ function to add the checkbox to the list item, this makes the checkbox appear to the left of the text. We then use ‘append’ to add the new list item to the end of our list item, after all our existing list items. If we used ‘append’ in the first line the checkbox would appear after the text and if we used ‘prepend’ in the second line then the new list item would appear at the top of the list of items.

Below is the final event listener code, with all the code we have written in the function above included. This code will now allow us to add new items to our to do list.

You may have noticed that when you add a new to-do list item the strike-through effect no longer works. This means that if you click the checkbox for a newly added item it won’t get the strike-through text effect as our other items. This will be solved later on in the tutorial series. Experiment with the append/prepend and see if you can work out how to add the strike-through effect to newly added to-do list items.

Further Reading

JavaScript Document Selector
Ids vs. Classes in HTML

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 5

Leave a Reply