Javascript Tutorials

JavaScript Zone

Script Tutorials

Introduction
Pre-requisites
Code
Notes
Exercises

Screen shot of 'Reminders' List

Reminders List

Introduction

This javascript shows how to maintain a simple screen for scrolling through your reminders, and creating new ones.

Click below for a demonstration:

Reminders Demonstration

Pre-requisites

None.

Code

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

1 of 3. Add the following script to the <HEAD> part of your html page:

<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;
var CurrentReminder = 0;

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_Reminder'+CurrentReminder);
	document.remform.text.value = "(reminder deleted)";
	// window.location = window.location;
}

function PrevItem()
{
var 	i;
var	found=0;
var	Reminder;
var 	NumReminders = GetCookie('PT_NumReminders');

// get number of reminders "maximum"
	if (NumReminders == null) 
	{	NumReminders = 0;	}

// look for previous reminders
	for (i=(CurrentReminder-1); i >= 1; i--)
	{
		if (found == 0)
		{
			Reminder = GetCookie('PT_Reminder'+i);
			if (Reminder != null)
			{	found=i; 	}	
		}
	}

// look for next reminders
	for (i=NumReminders; i >= CurrentReminder; i--)
	{
		if (found == 0)
		{
			Reminder = GetCookie('PT_Reminder'+i);
			if (Reminder != null)
			{	found=i;	}	
		}
	}

// found
	if (found != 0)
	{
		document.remform.text.value = Reminder;
		CurrentReminder = found;
	}
	else
	{
		document.remform.text.value = "(no more reminders)";
		CurrentReminder = 0;	
	}
}

function NextItem()
{
var 	i;
var	found=0;
var	Reminder;
var 	NumReminders = GetCookie('PT_NumReminders');

// get number of reminders "maximum"
	if (NumReminders == null) 
	{	NumReminders = 0;	}

// look for remaining reminders
	for (i=(CurrentReminder+1); i <= NumReminders; i++)
	{
		if (found == 0)
		{
			Reminder = GetCookie('PT_Reminder'+i);
			if (Reminder != null)
			{	found=i; 	}	
		}
	}

// look for previous reminders
	for (i=1; i <= CurrentReminder; i++)
	{
		if (found == 0)
		{
			Reminder = GetCookie('PT_Reminder'+i);
			if (Reminder != null)
			{	found=i;	}	
		}
	}

// found
	if (found != 0)
	{
		document.remform.text.value = Reminder;
		CurrentReminder = found;
	}
	else
	{
		document.remform.text.value = "(no more reminders)";
		CurrentReminder = 0;	
	}
}

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=75% align=left  ><small>"+ToDoItem);
	document.write("<td width=15% align=center><small>"+"<a href='javascript:DeleteItem(" + Count + ")'>Delete</a>");
}

function AddItem()
{
	var NumReminders = GetCookie('PT_NumReminders');
	var i;
	var Reminder;

if (NumReminders == null) 
	{
		NumReminders = 0;
	}
	Reminder = "(overtype here)";		// document.remform.text.value;
	document.remform.text.value = Reminder;
	document.remform.text.select();		// highlight text

NumReminders++;
	SetCookie('PT_Reminder'+NumReminders, Reminder, exp);
	SetCookie('PT_NumReminders', NumReminders, exp);
	// window.location = window.location;
	CurrentReminder = NumReminders;
}

function UpdateItem()
{
	var i;
	var Reminder;

Reminder = document.remform.text.value;
	SetCookie('PT_Reminder'+CurrentReminder, Reminder, exp);
}

2 of 3. Add onload="javascript:NextItem()" to your <body> statement.

3 of 3. Add the following to the main body of your page, uncommenting the indicated lines:

<!--						--!>
<!-- remove comment (!) from following 2 lines: --!>
<!--						--!>

<!textarea name="text" rows=10 cols=40 wrap=virtual>
<!/textarea>

</form>

</table>

<small><small><center>
<a href="javascript:PrevItem()"><<</a> | 
<a href="javascript:NextItem()">>></a> | 
<a href="javascript:AddItem()">New</a> | 
<a href="javascript:UpdateItem()">Upd</a> | 
<a href="javascript:DeleteItem()">Del</a> | 
<a href="javascript:window.close()">Close</a>

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

</center>

Notes

This script demonstrates the following:

how to use cookies to add, update and delete items
how to use hyperlinks to call javascripts to update data on the screen
how to maintain items of data in a list of cookies

Exercises

re-write the script so that it automatically updates items that have been changed

Page last updated 10th April 2001