Javascript Tutorials

JavaScript Zone

Script Tutorials

Introduction
Pre-requisites
Code
Notes
Exercises

Screen shot of 'To Do' List

To Do List (v1.1)

Introduction

Links

This Tutorial on Javascript Source
This Tutorial on SimplyTheBest

Updates

[06.06.01]Edit function added

This javascript shows how to maintain a simple "To Do" list, using cookies.

Click below for a demonstration:

To Do List Demonstration

Pre-requisites

None.

Code

Folow the instructions below to cut and paste all the code listed into your html file:

1. add the following into the <head> section

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var expDays = 30;
var exp = new Date(); 
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
var ShowCount = 0;
var SwapColour;

function ListToDoItems()
{
	var NumToDoItems = GetCookie('PT_NumToDoList');
	var i;
	var ToDoItem;

if (NumToDoItems == null) 
	{
		NumToDoItems = 0;
	}
	ShowCount = 0; SwapColour = 0;
 
	for (i=1; i <= NumToDoItems; i++)
	{
		ToDoItem = GetCookie('PT_ToDoItem'+i);
		if (ToDoItem != null)
		{
			PrintItem(ToDoItem, i);
		}
	}
}

function DeleteItem(Count)
{
	DeleteCookie('PT_ToDoItem'+Count);
	window.location = window.location;
}

function PrintItem (ToDoItem, Count)
{
	var color = "";

SwapColour = 1 - SwapColour;
	if (SwapColour==1) {color = "bgcolor='#c0c0c0'"} ;

ShowCount++;
	document.write("<tr " + color + ">");
	document.write("<td width=10% align=center valign=top><small><b>"+ShowCount);
	document.write("<td width=60% align=left  ><small>"+ToDoItem);
	document.write("<td width=15% align=center><small>"+"<a href='javascript:EditItem(" + ShowCount + "," + Count + ")'>Edit</a>");
	document.write("<td width=15% align=center><small>"+"<a href='javascript:DeleteItem(" + Count + ")'>Delete</a>");
}

function AddItem()
{
	var NumToDoItems = GetCookie('PT_NumToDoList');
	var i;
	var ToDoItem;

if (NumToDoItems == null) 
	{
		NumToDoItems = 0;
	}
	ToDoItem = prompt("Enter new item");
	if ((ToDoItem != null) && (ToDoItem != "undefined" ))
	{
		NumToDoItems++;
		SetCookie('PT_ToDoItem'+NumToDoItems, ToDoItem, exp);
		SetCookie('PT_NumToDoList',NumToDoItems, exp);
		window.location = window.location;
	}
}

function EditItem(Display,Count)
{
	var i;
	var ToDoItem = GetCookie('PT_ToDoItem'+Count);
	var ToDoItem2;

ToDoItem2 = prompt("Edit item #"+Display, ToDoItem);
	if ((ToDoItem2 != null) && (ToDoItem2 != "undefined" ))
	{
		SetCookie('PT_ToDoItem'+Count, ToDoItem2, exp);
		window.location = window.location;
	}
}

2. add the following into the <body> section

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin

ListToDoItems();

//  End -->
</SCRIPT>

</table>

<small><a href="http:\\www.users.globalnet.co.uk\~thompp">To Do List by Thompp Nation</a>

</center>

Notes

This script demonstrates the following:

how to use cookies to add, update and delete items
version 1.1 now shows you how to edit items
how to display a list using dynamic html (DHTML)
how to refresh the screen after removing items

Exercises

write a separate function to count all the items. This function can the be used in a separate html page that calls the 'To DO' list. This first page can warn the user how many items he has, and automatically load the 'To Do' list (using 'onload' on the statement) if he has 1 or more items.

Page last updated 6th June 2001