To Do List

Posted on June 23rd, 2010. Written by Blancer.

Create a To Do list using arrays, created in an HTML formtat. This project is not practical for use on a live Web page because it does not store the information you enter into a database; the data you enter will disappear after you refresh or leave the Web page.

1. Add the following heading level element and form to the document body. The Add Task and Delete Selected Task buttons include onclick event handlers that call functions, which you will add in the next step.

<h1>To Do List</h1>
<form action=”">
<p>New Task <input type=”text” size=”68″ name=”newtask” />
</p><p><input type=”button” value=”Add Task” onclick=”addTask()”
style=”width: 150px” />
<input type=”button” value=”Delete Selected Task”
onclick=”deleteTask()” style=”width: 150px” /><br />
<input type=”button” value=”Ascending Sort”
onclick=”ascendingSort()” style=”width: 150px” /></p>
<p><select name=”tasks” size=”10″ style=”width: 500px”>
<option value=”tasks”>Tasks</option></select></p>
</form>

2. Add to the script section the following addTask() function, which adds a new task
to the selection list. The if statement first checks to ensure that the user has entered a value into the New Task field. If the field does not contain a value, then a window.alert() dialog box appears and informs the user that they must enter a value in the field. If the field does contain a value, then an else statement executes. The else statement first checks to see if the default option of “Tasks” is present as the first element in the options[] array. If so, it is deleted. Then, the addTask() function uses the Option object to add a new task.

function addTask() {
if (document.forms[0].newtask.value == “”)
window.alert(“You must enter a value in the
New Task field.”);
else {
if (document.forms[0].tasks.options[0].value
== “tasks”)
document.forms[0].tasks.options[0] = null;
var newTask = new Option();
newTask.value = document.forms[0].newtask.value;
newTask.text = document.forms[0].newtask.value;
var numTasks = document.forms[0].tasks
.options.length;
document.forms[0].tasks.options[numTasks]
= newTask;
document.forms[0].newtask.value = “”;
}
}

3. Add the following deleteTask() function, which deletes a task from the selection list. The function uses a while statement to loop through each option in the selection list to determine which option is selected. Once the selected option is located, it is deleted from the options[] array.

function deleteTask() {
var selectedTask = 0;
var taskSelected = false;
while (selectedTask < document.forms[0].tasks.length) {
if (document.forms[0].tasks
.options[selectedTask].selected == true) {
taskSelected = true;
break;
}
++selectedTask;
}
if (taskSelected == true)
document.forms[0].tasks.options[selectedTask]
= null;
else
window.alert(
“You must select a task in the list.”);
}

4. To the end of the script section, add the following function, which sorts the tasks in the task list in ascending order. One problem with a form’s options[] array is that you cannot use any of the array methods that are available to other types of arrays. Therefore, the following function creates a new array named newTasks[] and copies to it the values from each of the elements in the options[] array. The sort() method is then executed on the new array. Finally, the values from each of the elements in the newTasks[] array are copied back into the options[] array.

function ascendingSort() {
var newTasks = new Array();
for (var i =0; i < document.forms[0].tasks.length;
++i) {
newTasks[i] = document.forms[0].tasks
.options[i].value;
}
newTasks.sort();
for (var j =0; j < document.forms[0].tasks.length;
++j) {
document.forms[0].tasks.options[j].value
= newTasks[j];
document.forms[0].tasks.options[j].text
= newTasks[j];
}
}

Related posts:

1. Make List From Data On Website Make List From Data On Website We need someone to put a list together by just copying the name and email from a website and putting it into excel or some other document. Basically the website has the names of all professionals in an industry and we need someone who...
2. Rtf To Pdf Rtf To Pdf I need a PHP solution that will allow me to pass an array of search strings and an array of replacement of replacement strings to a function that will search and replace in an RTF file, make a unique copy as a PDF, zip it, and present...
3. Unordered List Joomla Unordered List Joomla I need someone to fix an issue with my joomla site. Unordered and ordered list are not showing the list bulleted or with numbered in my joomla articles. They show in the editor but not on the front end. My unordered list are showing like this: (with...
4. Document Converter Document Converter We require a PHP-based function which will receive several document types and return HTML text. The function must be able to accept DOC, DOT, DOCX, XML, PDF, TXT and RTF. The function will be called by passing a file name to it. If a file type that is...
5. Modify Pdf Document 2 Modify Pdf Document 2 Hello, I have a 10 page pdf document that I need modified. The task is basic. I need to modify the document in one way..I need to change the company name on the document on all pages from one name to another as this demo document...