Jason Atkins, Alyce Brady, Pamela Cutter, R.C. McDowell, Kelly Schultz and Nathan Sprague 1997, 1999, 2002, 2009, 2015
Kalamazoo College, Kalamazoo, MI
In previous mini-labs and in Lab 4, we created an Address Book. In this project, we will add new functionality that will allow us to choose people from the Address Book to invite to some event and then create a separate Invitation List of those people.
You may work individually or in groups of 2 people to finish this project. These groups do not need to be the same as the groups for the previous mini-labs or Lab 4. If you worked with someone on the Virtual Pet programming project, you might consider working with someone else for this project. We expect that the programming will be your group's effort and not the effort of other persons. If you have questions or need assistance with your program, the instructor and the TAs are very willing to help and are available during their office hours.
Check out the page on programming tips to help you. Also, look at the page on PP 3 grading criteria (and grading criteria for Mini-Labs 7 - 9 and Lab 4) to see the breakdown of the points given for this project.
Good programs include good indentation, good variable names, and comments that help the author (or someone else) understand who developed the program and what is going on. (See the grading criteria to see how comments and program style are evaluated.)
If you have not done so already, add an appropriate title to your page, including the address book owner's name. Add appropriate headings to your page now and as you continue to work on it.
To create an invitation list consisting of a subset of people from the
address book, you will first add a checkbox to the beginning of each row
in the table. Modify the addTableRow
function and
insert the following before the code for the person's name:
var cell = row.insertCell(cellNum++); var checked = ""; // Checkboxes start out not checked. // Give each checkbox a unique id using the row number. cell.innerHTML = "<input type='checkbox' id='check" + nextRow + "' " + checked + " onclick='functionName(this, " + nextRow + ");'>";
functionName
is just a placeholder for the
name of a function you are about to write.
Test that your checkboxes appear correctly when you load the page. Don't try clicking on them yet, though, since you haven't yet written the code that gets executed when you check or uncheck a checkbox.
Next, write the function that gets called when the user checks, or
unchecks, one of the checkboxes. (A starting skeleton is below.)
When a checkbox becomes checked,
the function should update the address book information to
indicate that the corresponding person has been invited.
If a checkbox is unchecked, the person becomes
"uninvited." In other words, clicking on the checkbox toggles
the person between the invited and not-invited states. (One possible
name for this function is toggleInvited
, or even just
toggle
.)
What parameters does this new function need, and what does it need to do?
It needs to know the current state of the checkbox (checked
or unchecked?) and which person in the address book is to be invited
or uninvited.
This implies that it needs the checkbox,
the address book array, and the integer index of the person to be affected.
Unfortunately, we cannot pass the address book array as a parameter in the
checkbox's onClick
attribute, so we must use the name of the array
from the body
section of the page instead (which might have
been called myArray
, as in the example below). That leaves two
parameters to be passed in: the checkbox and the table row, which is also the
index into the address book array.
//--------------- // ??? functionName ??? // functionName and this comment should be changed to something more useful. function functionName(checkbox, rowNumber) { // Use the array name from the BODY section. (might not be myArray) var addrBookArray = myArray; // DO SOMETHING USEFUL HERE }
Choose a good function name and update your checkbox code in
addTableRow
to use that name also. The function should check the
truth value of checkbox.checked
(where
checkbox
is whatever name you gave the first parameter)
and set addrBookArray[rowNumber].invited
to
true
or false
accordingly (where
rowNumber
is whatever name you gave the 2nd
parameter).
Once you have your function written,
update the code in addTableRow
that generates the checkbox,
change the functionName
in the onClick
attribute to the name of the function you just wrote.
If you want a quick test that your new function is operating correctly
before going on, inside the end of your function you can call
alert
with an embedded call to your toString
function
to show you the values for the address book entry you have just changed.
As a further test, select some entries and then sort by name.
Do the selected checkboxes remain selected? If not, notice that the code
provided to you for adding a checkbox to the table assumes that the checkbox
should not be checked. If the entry's invited
field is true,
however, the check
variable should be "checked"
rather than an empty string.
Test this sequence of behaviors again.
When the user is done choosing which people to invite, they should be able to click on a button that generates a summary list of who has been invited.
script
section of your page).
Give it a different table id.
buildTable
function your new table, rather than
the original. If you test it at this point, you should get a new table,
although it will include all of the address book entries, not just the
selected ones.
buildTable
function that
will allow you to specify whether to include everyone or only include
invited people in the table. Modify the code in the function to
either add all entries or only "invited" entries, depending on the
value of the new parameter. Using the parameter, build the
original table and sorted table including everyone, but build the
invitation list to only include invitees. (What should this button do
if no one has been invited? What if they have all been
invited? What if you change which entries have been invited and try
to re-generate the list?)
Add headings and other formatting as appropriate, to make your page easier to read and use. Make sure you add descriptive text to the summary, including a recommendation that the user should print the invitation list summary so he/she can easily contact those people. (This invitation list web page is not advanced enough to email the list to you or share it in any other way.)
(Optional: If you want a heading for the invitation
list to show up only when such a list is generated, create a function that
produces both the heading and calls buildTable
, and call that
function rather than buildTable
from your latest button.)
Enhancement:
Your invitation list, like the original address book, contains checkboxes
in every row, but the checkboxes are meaningless in the invitation list.
You can eliminate them by adding an additional parameter to the
addTableRow
function to indicate whether or not you want to
include a checkbox, and then modifying the function to only create a
table cell containing a checkbox when the parameter is true
.
Modify the
buildTable
function to pass an appropriate
true
/false
value as the extra parameter.
Test your program to make sure that everything is still working correctly.
When an individual or organization sends out large mailings (including holiday cards, formal invitations, and the like), the post office asks that the envelopes be sorted by zip code. Define functions similar to the ones you wrote in Lab 4 to sort by zip code rather than by a person's name, and provide a second sorting button.
Once the Invitation List and both sorting buttons are functioning properly, add graphics or text to the page to improve the user interface. Add text to describe what to do and align the list and buttons in an easy-to-read format. Don't forget to give credit to yourself and any picture designers.