In this post, we will now take the tools that we installed in the last post and put them to good use. We will also draw upon all of the knowledge that we have built up until now to create this “todo” application. It has become rather common in programming for people to make a todo application as their first application. It’s so common that the todo app has almost replaced the “Hello World” app as the first app people make.
todo appThe basic function of a todo application is to create a list of items that we want “to do” or have “to do”. We can add as many “todos” as we want to this list and we can cross them off the list by hitting a remove button which is right next to each element. We also have a button which will remove all of the items on the list if we wish to clear our “todos” for the day.

In our code example, we will show both the HTML and the JavaScript as one large code container then we will split it into parts and talk about what they do. Note, you can run this application by simply opening the HTML file in a browser, you don’t need to use Node.js.

The Todo Application

In this example, we have the JavaScript embedded inside of the HTML. We will ignore the HTML and talk about the JavaScript as this tutorial assumes you have a basic understanding of HTML.

Let us focus on the first few lines of the JavaScript.

This first statement is a variable declaration and binding. We are using some of the Dom methods to bind elements of the HTML to variables in the JavaScript. The method document.getElementById('list') is selecting the unordered list with the id of ‘list’. The next two statements are getting the two button elements and binding them to variables. Our next lines of code are where many of the more important parts of this program take place.

Our Main Code Logic

First, we create an onclick function called addLi and bind it to the add button. Our onclick function resides inside of an anonymous function which is then bound to our add variable’s attribute of onclick. We are making an object out of the add variable and we use an anonymous function so that add.onclick will run when we click the add button.

jscriptThe first lines of the addLi function are again variable declarations and assignments. The first one invokes the document.getElementById('text').value method to get the string from the input box. Our li variable is bound to a function which creates a new li list element, document.createElement('li'). The textNode variable calls the document.createTextNode(inputText + " ") method to “mount” the text from the input box to the new li list element. Our final variable declaration removeButton creates a button that will be mounted onto the new li list elements.

The next line is a call to allow us to clear the text input by setting it equal to an empty string with document.getElementById('text').value = ''. We then enter an if statement which checks to see if there was indeed an input into the input box. If there is no input, the program deploys an alert box to the screen and returns false. If the if statement passes we go on to the next lines.

The lines after the if statement are lines to create the removeButton element which is mounted in the li list elements. We are creating an object out of removeButton which has two properties; className and innerHtml; and an onclick method; removeMe. The className property gives the button a class name of "removeMe" and the innerHtml property gives the button a label of " DONE!".

The final three lines in this function mount the text node and button we just created onto the list element using the appendChild method. We then call the appendChild method on the unordered list that was passed to the function, targetUl. Let us now turn our focus to our final lines of code.

Adding Logic to the Remove Buttons

We create a function removeMe, which is the function that is called as an onclick event on the removeButton we just made. First, this function selects the parent HTML element of the button itself which is the li list item by using the parentElement method. The function then calls the parentElement of the li list item which is the unordered list and deletes that li list item using removeChild(self). Keep in mind that the parent variable is bound to the original list item that has the button we just clicked on.

The final function in this code is an on click method for the removeAll button. This function removes all of the li list items by setting the inner HTML of the unordered list equal to an empty string.

Closing

In this post, we took a look at an inline HTML vanilla todo application. We talked about how the JavaScript works line by line. We also looked at various methods that we can use to target HTML elements and their properties. If you want to see a video version of this post, go to our vanilla todo app video tutorial. If you would like to brush up on your HTML knowledge, we recommend checking out w3school’s tutorials. You can download a version of this code with styling at our github repository.