Programming Project 3:
Invitation List

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.

Polish Existing Work

• 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.)

  • Make sure you have comments at the top of your file giving your name, the names of anyone who has assisted you, and a short description of the project.
  • Every function should have a comment describing the purpose of that function, and what parameters it expects (if any). Add comments inside the functions wherever the code might be difficult to follow. Continue to do this as you complete the programming project.
  • Clean up your indentation and fix any obscure variable names.
  • Keep these guidelines in mind as you continue to work on your project.

• 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.

Build an Invitation List

• 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 2^nd 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.

  • Create a new, empty table for the invitation list. Put the HTML code for the new table where you want the table to appear (but not within the script section of your page). Give it a different table id.
  • Create a button similar to your sorting button, although this one does not need to sort the data, it just needs to build a table. Pass the 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.
  • Add an extra parameter to the 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.

Bulk Mailing: Sorting by Zip Code

• 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.

Final Touches

• 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.

• Be sure to prrof-read your source code to make sure that your comments, variable names, and indentation present a professional look. Remember that the human audience is as important to good code as the computer.