1. Online Shopping JavaScript project for CS 175 JavaScript for Web Development, Spring 2009 By Sita Akella

2. MainForm.htm. This opens up a welcome page to take the user through the online shopping experience. Clicking on the link takes the user to the shop.htm page. MainForm.htm

3. shop.htm The shop.htm presents a pull-down list of available shopping choices. Although there exists a default selection, the user may choose any option-combination. After an option-combination is chosen, clicking on the link takes the user to the shopping page for that choice. There are nine shopping options and each has a corresponding page. shop.htm

4. orderIndian.htm Each shopping page (for example, orderIndian.htm) has a list of items for the user to choose from. An onChange event handler is used to register and call a function that adds the changed values to the cart. OrderIndian.htm OrderIndian.htm OrderIndian.htm

5. checkout.htm The main purpose of this page is call the checkout function which is stored in the shopping.js file. This function puts up a table that displays the contents of the cart. The checkout function uses cookies to keep track of the ordered items. The ideas and code used here are from The Book of Javascript and from the CS 175 website of Professor Jon Degallier. The checkout.htm also has input fields where the user enters personal info.

6. orderItalian.htm The orderItalian.htm file does not use cookies. Instead, the onChange event handler is used to register and call a function 'Cart' that updates an array. The 'alldone' function in this file displays the contents of the cart. OrderItalian.htm

7. function Cart(qty, item, cost) var item_name = new Array("Spaghetti", "Eggplant Parmesan", "Fried Mozzarella"); var item_name = new Array("Spaghetti", "Eggplant Parmesan", "Fried Mozzarella"); var item_cost = new Array(7, 9, 8); var item_cost = new Array(7, 9, 8); function Cart(qty, item, cost) function Cart(qty, item, cost) { if (item=='p1') { if (item=='p1') { p[0] += qty; } { p[0] += qty; } else if (item=='p2') else if (item=='p2') { p[1] += qty; } { p[1] += qty; } else if (item=='p3') else if (item=='p3') { p[2] += qty; } { p[2] += qty; } var p = new Array(0,0,0); var p = new Array(0,0,0); }

8. Problems I came across: I tried to combine form features such as checking for validity and passing the input fields as well as the contents of the cart to a single page on the click of a button. I could not achieve the passing of the cart data to a final page. checkout.html checkout.html checkout.html

9. Problems I came across: I tried two methods to update the cart- using cookies and using arrays. I tried two methods to update the cart- using cookies and using arrays. ----Problem with the array method - when the quantity value is changed a second time in the form, the cart data does not get updated correctly. ----Problem with the array method - when the quantity value is changed a second time in the form, the cart data does not get updated correctly. OrderItalian.htm OrderItalian.htm OrderItalian.htm

10. Problems I came across: --- ----Problem with the cookies method - each time the onChange event is called, a string with data is appended to the cookie; Now, if an item is changed more than once, the cart shows a second row for the same item but does not combine the data. ----Problem with the cookies method - each time the onChange event is called, a string with data is appended to the cookie; Now, if an item is changed more than once, the cart shows a second row for the same item but does not combine the data. shopping.js shopping.js shopping.js