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 Lab 4. If you worked with someone on the first 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++); cell.innerHTML = "<input type='checkbox' id='check" + nextRow + "' onclick='functionName(this, addressArray, " + nextRow + ");'>";
functionName is just a placeholder for the
name of a function you are about to write. Once you have named that
function, you should change
functionName to the
right function name.
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, we need to write the function that gets called when the user checks, or
unchecks, one of the checkboxes. 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
What parameters does this new function need, and what does it need to do?
It needs to know the current state of the checkbox (has it been checked
or unchecked?) and which person in the address book is to be invited
or uninvited. Thus, it needs three parameters: the checkbox, the
address book array, and the integer index of the person to be affected.
The function should check the truth value of
checkbox is the name you gave the checkbox
parameter) and set
are the names you gave the 2nd and 3rd parameters).
Once you have your function written,
update the code in
addTableRow that generates the checkbox,
functionName in the
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, you can put an
alert call at the bottom of
the function to print out the name and invited status for the address
book entry you have just changed.
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.
buildTablefunction that only calls
addTableRowfor people who have been invited.
Test your program at this point to be sure that the function to toggle the invited status of your people and your code to create the invited summary are working correctly.
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.)
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
Modify the two functions that call
buildTable and your new function) to pass an appropriate
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 a function similar to the one you wrote in Lab 4 that sorts people (address book entries) by zip code, and provide two sorting buttons, one for each sort function.
Once the Invitation List is functioning properly, add graphics or text to the page to improve the user interface. Add text to describe what to do, align the list and other buttons in an easy-to-read format. Don't forget to give credit to yourself and any picture designers.