CS 90.3 Assignment 2

For this assignment, you are to create a page that uses a text input node for users to use to enter their state, as in a contact information form. If the user has JavaScript enabled, they will get a suggestion list of state names and abbreviations based on what they have typed. At any point, they can pick a I suggest you select New York
(or New Jersey). state from the list, which shows only those state names that contain the sequence of characters the user has typed so far. If they leave the field without selecting a valid state, the text field turns red. Otherwise, the two-letter state code is entered in the field, and the field turns green.

1. Set up the web page.

   Create a directory named Assignment_02 under your My Website directory, and in it create a web page named index.xhtml with several paragraphs of Lorem Ipsum text, and put an input tag in the middle of one of them. The idea is to have enough text on the page so that you can move the text box to various places in the window by resizing it and/or changing the aspect ratio. Your dynamic prompt list has to display correctly no matter what the window geometry is.

   Be sure the XHTML and CSS for the page pass all validation tests with no errors or warnings.

2. Set up your JavaScript code.

   Create an anonymous object with a closure for its private varables to use as the framework for this project:

   function generate_state_suggestions() { var a = "hello"; return { init: function () { alert(a); } }; } Core.start( generate_state_suggestions() );

3. Make the suggestion panel appear and disappear in the right place.

   Create a span to act as your suggestion panel, and embed it right after your input element. Wrap both spans inside another span to act as a container for the two spans. Use CSS to remove the suggestion panel from the page. This setup turns out to be messier than anticipated. For one thing, whitespace in your code matters, and you will have best results if the three spans are run together on one line with no spaces between them:

   <span id="container"><input type="text" id="theTextBox" /><span id="suggestionPanel"> I suggest you select New York<br/>(or New Jersey) </span></span>

   You can place the suggestion panel directly below the text box by using absolute positionioning, but that only works if the container is positioned too. You can position the container without taking it out of the flow of the layout by declaring its position as relative but omitting the top, left, etc properties. While you are at it, you can format the suggestion panel to give whatever visual effects you like (padding, font-size, etc.):

   #container { position: relative; } #suggestionPanel { position: absolute; top: 100%; left: 0; display: none; }

   Extra Credit: Get this to work for Opera the way it works in other browsers!

   Use Core.addEventListener() to set up focus and blur event listeners for the text box. Use them to change the style.display property of the suggestion panel to make it appear and disappear appropriately.

4. Set up an event listener for keyup events.

   Set up an event handler for keyup events in the textbox. Create an array of state abbreviations and names ("NY New York", "NJ New Jersey", etc." which you can build from data on the USPS.com web site.) When the user types a character, update the contents of the suggestion panel so it displays just those items in the array that match what the user has typed.

   For each keyup event, get the contents of the text box (textBox.value), and use the String.indexOf() function to find which elements of your master array of state abbreviations/names contain that string; create a second array containing copies of the matching strings. Write a function named generateHTML() that creates a single string from all the elements in the matching strings array separated by html <br /> tags. Then use this string to replace the contents of the suggestion panel: suggestionPanel.innerHTML = generateHTML();

   Logically, you could generate the html string without building the second array, but do it this way in anticipation of the next part of the project.

5. Process arrow and Enter keys and blur events so the user can select a state.

   If a proper state is selected, put the two-letter abbreviation in the text box and color the background light green. If the user leaves the text box without making a proper selection, leave the text box empty and color the background light red.

   This is a bother because of browser incompatibilities in the way arrow keys, for which there are no standard character codes, are handled. After some web searching (UnixPapa.com />) and experimentation, we have the following:

   Browser	Key Codes for Up/Down Arrows	Notes
   Gecko (Firefox, etc.) and Opera	38, 40	Use keypress events to capture auto-repeat behavior.
   Internet Explorer	38, 40	Does not generate any keypress events for arrow keys.
   Safari	63232 (0xF700), 63233 (0xF701)	Generates two keypress and two keyup events for each press-release.

Test your project on various browsers. Because of browser differences, it is time-consuming to get the project to work exactly right on all browser/computers, so the only requirement is that you provide a working version for Firefox running on Windows. (I will be checking your project using Firefox on a Macintosh, but that shouldn’t make a difference.) But check your code on the other browsers available in the lab: Internet Explorer, Opera, and Safari. Your code should be functional on all platforms, just not necessarily perfect.

Perform a link check on your site. If necessary, go to the Manage Sites panel and be sure you have selected the “case-sensitive link checking” option. Then right-click on your Assignment_02 directory and select the Check Links->Selected Files menu item from the context menu. Fix any errors you find there. (There should be one broken link that you will need to fix.)

If necessary, copy your site from your development system to the lab as described above, and do a final check of your project using the ~<accountname> form of URL. Then send email to me telling me the project is ready for me to grade. I will copy the project from your account in the lab to babbage for testing.

The Subject line of your email must say, CS-90.3 Assignment 2, just like that, in order to get through my spam filters. Within a day, you should receive an “OK, I’ll check it out!” message from me acknowledging that I received your email.