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];
}
}
