Develop a primitive catalog page that allows the user to select an item's product number and as a result displays in a text area the item number, item name, item description, and item price, accompanied by an image of the item. The items are featured on the University Bookstore site. Your web page should include a drop-down box for item selection, a button to initiate the processing, and a text area and image for output.
Use a drop down list (select box) in which to display the sorted item number list. Refer to the form field help page for drop down lists for help populating the drop down list.
Use a command button labeled "Find Item" to actually perform the item lookup.
Use a text area to display the product data.
Use an image to display the product image.
Your form should look as much as possible like the following. The first image is before a user selection, and the second is following a user selection.
The structure of this program follows the normal pattern, consisting of the following:
The onload event of the body tag calls the populateList function to initialize the productNameSorted array and then use its contents to populate the drop down box.
The click event of the Find Item button invokes the findItem function, which is the main function or dispatcher. This function calls specialized functions to perform initialization, input, processing and output.
The following table provides a description of the functions that you should use. Note that the chosen function names clearly describe the purpose of the functions.
When the form is loaded the populateList function is invoked [declaration: populateList(selectBox)]. It declares and initializes the productNameSorted array and then uses its contents to populate the drop down box. Refer to the form field help page for drop down lists for help populating the drop down list.
When the "Find Item" button is clicked the findItem function is called [declaration: findItem(selectBox)]. It declares the parallel arrays and then calls initializeArrays to populate the parallel arrays with product details. Then it calls getListText to get the text of the item selected in the list box. It then calls searchArray, which locates the search phrase, at which point it returns the index of the found item. It then calls showProductDetails to retrieve the corresponding product details from the parallel arrays and displays them in the specified output field.
Be sure that you code is documented thoroughly. In all programs you should include a comment block at the beginning or your program with your name, date, the assignment number, and a brief description of the purpose of the program. Comment blocks should be demarcated with lines before and after the block, as in the sample programs.
Each function should be prefaced by a comment block indicating its purpose.
You should use good variable and function names, sometimes referred to as self-documenting code.
You should embed comments in your code whenever the purpose of subsequent lines may be unclear to subsequent reviewers.
A video of how this program should function is included here (downloads slowly).
If you need an explanation of parallel arrays, see this link.
Be sure to use sortedProductName array to populate the drop down box. It is sorted differently than the other arrays to force you to do a search to find the matching product name when the button is pressed.
Do not use indexOf to search through the array. Instead, write your own search using a while loop like the one shown here.
In order to prevent the user from clicking the button without making a selection in the drop down box, you should initially disable the Find Item button by including disabled="disabled" somewhere in the button html.
<input id="find" type="button" value="Find Item" disabled="disabled" ....
Then, in the onchange event of the drop down box you can call the enableButton function provided below to enable the button.
Be sure to use CSS to style your page and include either the XHTML Transitional or the XHTML Strict DOCTYPE.
Refer to the grading rubric for grading details.
Note that I am aware that this assignment would be more efficient if it used multidimensional arrays or arrays of objects, but you need to use parallel arrays to get the maximum credit for the assignment because the one dimensional array is the topic being reinforced.
Here is the data for your arrays: Link