To Do List Tutorial

For my tutorial I created 2 list objects. These objects generate list items from user input. Cookies are used to save the user data for the 2 lists. You can access my lists here.

My framework that I made describes the properties that compose the list objects. It sets their default values, and also allows the user of my framework to customize certain aspects of the lists, such as colors, and widths. Below you can see the parameters, and their default values as described in the framework.

screenshot 1
screenshot 7

My framework also provides users with the ability to add items to the list of their choice. They simply need to call the method below on a designated list object, and make sure that a title for the task is provided in the textbox for that list. This function also supplies a feature where if a user were to click on a generated list item, it would change its background color and put a line through the item.

screenshot 2

The way the user calls the add method in the framework is displayed below:

screenshot 3

Another thing that can be done with this framework is removal of list items. The method shown below creates a span that is applied to every list item that, when clicked, removes the chosen item from the list.

screenshot 4

The list items are stored inside of a javascript array when they are added by the user. This array is then converted to a string using JSON stringify method. After it is in string form the array is put into a cookie, there are separate cookies for each list. The code to created and retrieve the cookies can be seen below.

screenshot 5

In order to load the cookie data, and apply it to the list upon page load, you need to set your body tag to have an onload that points to a javascript function that will pull the data from the cookie, convert it back into an array, and then apply it to the proper lists. The function I wrote to do this is below.

screenshot 6

In order to delete a cookie, you need to call a method that creates a cookie of the same name that has expired. This is shown below:

screenshot 8

Then make a method to be called by a button that passes the cookie name to the delete method, also make sure that you reset your variables associated with the list.

screenshot 9

That concludes my tutorial, the framework provides many feature to interact with the list, and provides the user with customization options for the lists created.


W3 Schools List How To