You've opened a storefront business to sell products and/or services. It's been successful so far. Now you need to add a web page to track inventory for the business.

Enhance the web site you created in Homework 1 with the following changes:

Main page

Add a link in the menu to the Login page (described below).

Login Admin page

Add a Login Admin page to enable your staff to set and clear a passcode. The passcode will be used to access the Inventory Manager page (described below). Use local storage to store the passcode. The page has the following controls:

Passcode label and password-style text box

Create passcode button triggers code to check the passcode. If blank, it shows an error message. If not blank, it saves the passcode in local storage.

Clear passcode button triggers code to remove the passcode from local storage.

The page is accessed separately from all other pages (don't link to it from any other page).

Login page

Add a Login page to enable your staff to log in the Inventory Manager page (described below). The page has the following controls:

Passcode label and password-style text box

Login button triggers code to check the passcode. If blank, it shows an error message. If not blank, it checks if it is valid. If invalid, it shows and error message. If valid, it opens the Casher page.

Reset button triggers code to clear the passcode text box.

Inventory Manager page

Add an Inventory Manager page to enable your staff to view the current inventory count and value for any product, and change that inventory count. The page has the following controls:

Product: label and combo box this shows the currently selected product. Data for the combo box comes from a global 7x3 products array. Create the two-dimensional array with an initializer list. Each row corresponds to one of your products. Within each row, specify three values: product name (string), current inventory count (integer), product unit cost (real number). Set the first row to the following values:

"Select product ...", 0, 0

This will be the default value. Create function loadComboBox that reads through the products array, extracts products names, and builds combo box options. Trigger the call to loadComboBox when the page loads using:

Show Info button once a product is selected from the combo box, this button triggers a function to use the selected product (use property selectedIndex) to retrieve and display its current inventory count and product unit cost, and calculate the value of the inventory for that product (count * cost).

Count: label and read-only text box this shows the current inventory count of the selected product.

Cost ($): label and read-only text box this shows the product unit cost of the selected product.

Value ($): label and read-only text box this shows the inventory value of the selected product.

Ordered and Sold radio buttons these indicate what inventory change to make. "Ordered" adds to the inventory count. "Sold" subtracts from the inventory count.

Amount: label and text (number) box this enables the user to enter the amount ordered or sold. It is restricted to the range 1-100. This is the amount that the product inventory will change by.

Update button this button triggers a function to query the radio buttons and calculate and show the new inventory count and value of the inventory for that product.

New count: label and read-only text box this shows the updated inventory count of the selected product.

New value ($): label and read-only text box this shows the updated inventory value of the selected product.

Reset button this button triggers a function that clears all controls on the page.

Here is what the page might look like. Note that editable and read-only text boxes have different background colors.

Styles (CSS) page

Edit the Styles page with any needed additional styles.

Other code

In order to round all calculations to two decimal places, add the following JavaScript function roundNumber:

//==================================================

// roundNumber

//==================================================

function roundNumber(num)

{

return Math.round(num*100)/100;

}

Screenshots

Include the following screenshots in this document:

Login Admin page no passcode specified.

Login page no passcode specified.

Login page incorrect passcode.

Inventory Manager page two products ordered and sold (four screenshots).

Main page.

Login Admin page