This document acts as a beginner guide to create very first application (web page) using java script programming. This document explains basic terminology and briefly describes the structure and functioning of the methods used to dynamically update the HTML content of the webpage.

Introduction:

We need to create a basic mytodolist using java script. We would create a simple to do list using java script capabilities to demonstrate the potential of java script (This application would only interact with the current page to update the HTML content dynamically). This would give us fair understanding of how java script can be used to build complex applications.

Method/measurement:

Step1- Functionality to be developed :

In the first step, we would identify what all functionalities we need to incorporate in the mytodolist application using java script. Below is the list of functionalities we would implement:

A form with following fields to take user inputs:
1. To do Item : a Text Box for entering the item
2. Location : A text box for entering the location
3. Due date : A calendar control to select the due date for the item
4. Priority: A drop down (Not applicable,High,Medium,Low)
5. Completed (Check box) to mark completion of the item.
A table to show the added “to do” items
Validation mechanism to ensure correct user inputs.
Additem method to add the items in the table and marking different priority levels in different colors to categorize items by priority.
Submit button to submit the request.
Delete function to delete the selected item from the list.

Step 2-Create the form:

In the first step, we will create the form to take the user input. As briefly explained in the above section, we would have following fields on the Page

A form to take user Inputs:
1. To do Item : a Text Box for entering the item
2. Location : A text box for entering the location
3. Due date : A calendar control to select the due date for the item
4. Priority: A drop down (Not applicable,High,Medium,Low)
5. Completed (Check box) to mark completion of the item.
Display fields :
1. A table to show the added to do items
  
  Let’s start creating the form by typing following code between the form tag in a simple html file. As we can see we have created the above mentioned fields for taking user inputs. If you notice there are ResetPriority(this) and Additem() methods present on checkbox click and submit button events respectively. We would explain about these functions in detail later in this document.

Once we have created the user inputs, we will create the table for displaying the added items. To create the table, type the following code .

So far , we have created a simple layout of our page , which would look similar to below screenshot.

Note : The background image can be provided in the html body tag.

Step 3- Add validation mechanism:

In this step , we will create validations for user inputs to ensure valid input. We will implement following validations:

Todo item text box fields cannot be empty.
Location field cannot be empty.
Priority should be set as Not Applicable, if the items is marked as completed.

We will write a validate method to implementation the validations and we would call this function before adding items in the table for display through Additem() method. Note : You can find more details about the Additem method later in this document.

Create ValidateItems() method within the <script> tag, this method is part of java script programming . This item would return true only if all the validations have passed ; The AddItem() method, through which this method is called, would not add the item if ValidateItems() method return false.

We will add one more utility function to reset the priority if item has been marked as completed. This would ensure less user error. This function would be called on onclick event of the checkbox as shown below.

Write following method within script tags to implement ResertPriority method.

Step 4- Add Additem() method to add rows in the table:

In the next step , we would create AddItem() method, which would be doing most of the processing for our webpage. Through this function we would create and add rows in the table dynamically.

To create the placeholders for table row and table cells , we need to first create them. Use following code:

As we can see in the above code, we have created new row element and new data elements. Now, we will create text nodes to hold the text entered in the user input fields. Use the following code to create text nodes and get the text from corresponding user input fields.

Also, we will create a delete button element for delete function. Use following code to create delete button element and set onclick attribute to call DeleteFunction(). Note: We will learn about the delete function later in this document.

Now we need to attach the text nodes with the cells and cells with the table rows. Use following code :

As you can see we have changed the cell background depending on the priority of the item using

newPriorityCell.style.backgroundColor attribute. We have added the cells and row in the table.

Step 4- Add DeleteFunction() method to delete rows from the table:

In this step, we would implement the function to delete rows from the table. This function would be called on the click of delete button that we had added dynamically during adding items in AddItem method as shown below.

Use following code to implement DeleteFunction(this)

As you can see we have used td.parentElement.parentElement to reach to the table row and then this row reference has been used by the removeChild method to remove the row from the table.

Step 5- Running the web page:

After completing all the code , you can save the file in a .html format. To run the file, go the internet browser and browse to the saved file and hit open. You should be able to see the page. You can add ,view and delete items on this page. Note: We have used Google Chrome for our example to demonstrate the functioning.

You can delete any item by clicking the delete button.

You would get following error message if you forget to enter TodoItem or location:

Also, an item priority must be “Not Applicable”, if it has been marked as completed. ResetPriority function would reset the priority, if it is not “Not Applicable”, on the click of event. However, if you still try to give the priority for the completed item then you would get an error message as shown below

Priority cell would be marked Red, Green, Orange or yellow depending on the priority as shown below.

Results:

By following the steps mentioned in the above section, we have successfully created our first n “mytodolist”. We have also understood the basic capabilities of java script and how DOM can be used to dynamically update the content on a web page. The final file should like the one in the attachment here: .You can edit the file using any editor tool.

Conclusion:

In the document, we have gone through the process to

Create a web page
Add the java script capabilities to update the page dynamically
Understand DOM

Raj's World

Sunday, August 16, 2015

Creating a ”Todolist” with Javascript