SHOPPING CART PAGE FOR THE DANIEL JAMES COLLECTION
1. At the end of file dan.js, create a function named makeTable(). The function should write the opening table tag and the first row of a table to a Web page. The table should have a width of 500 pixels. The first row of the table should contain four table header cells, containing the text "Item Name", "Item Price", "Quantity", and "Cost". Be sure to close the table row.
2. Create a function name endTable() that writes a closing table tag.
3. Create a function named addCart() that accepts three parameters: "itm", "p", and "v".
a. Use an if statement to check if the parameter "v" is equal to zero. If so, then pass the value of the input field "bowl1" from the form "item1" to a variable named "q".
b. Use an if statement to check if the parameter "v" is equal to 1. If so, then pass the value of the input field "bowl2" from the form "item2" to a variable named "q".
c. Use an if statement to check if the parameter "v" is empty. If so, then create an alert box displaying the text "Please enter
a quantity greater than zero." The function should then return "false".
d. Create a variable named currDate with a value equal to the current date. Below it, create a variable named expdate with a value equal to a date six months from the current date.
e. Create a cookie with the name "danv" where v is the value of the variable "v". The value of the cookie should be the values held in the variables "itm", "p", and "q", separated by commas. The cookie's expiration date should equal the value of the variable expdate converted to GMT.
f. Generate an alert box displaying the text "Thank you for your purchase of the "+itm+"."
4. Create a function named seeItm().
a. Create a variable named addTot and set it equal to zero.
b. Create an array named "itm". Pass the value of the cookies dan0 and dan1 to the array.
c. Using an if statement, evaluate each element in the array "itm" to see if it is null. If both array elements are null, then write the text "Your cart is empty." and return "false". Otherwise, call the function makeTable() and loop through all of the items in the array "itm". For each item, use an if statement to confirm that the element is not null and not empty. If these conditions are both true, execute the following commands:
• Write an opening table row tag and an opening table data tag.
• Find the first instance of a comma in the first element of the array "itm". Pass the result to a variable named stopnow. Find the value of the item by searching the string from the very beginning to a point specified in the variable named "stopnow". Pass the results of this search to a variable named "start". Write the value of the variable "start" to the file followed by a closing table cell tag and an opening table cell tag.
• Search the array element for a comma. After finding its numeric location in the string, add 1 to this value and pass the entire results to a variable named px. Search the element for another comma from a starting point held in the variable px. Pass the results to a variable named px2. Pull out from this string all text starting from a point designated by the value held in the variable px and ending at a point designated by the value held in the variable px2. Parse out the number, including decimal values. Pass this result to a variable named tot_px. Fix the numeric value to two decimal places and pass the result to a variable named tot_px1. Write the value of the variable tot_px1 to the file, followed by a closing table cell tag and an opening table cell tag specifying center alignment.
• You will now extract the last value in the array element. Take the entire length of the array element and subtract 1 from it. This is the starting point to extract the substring that contains the quantity value. The end point is the entire length of the array element. Given the starting and ending points in the array element, search out the quantity value held in the array. Parse out the number and pass it to the variable quant. Write the value of the quant variable to the document followed by a closing table cell tag and an opening table cell tag specifying right alignment.
• Multiply the values in the variables quant and tot_px and pass the result to a variable named cost_raw. Fix the numeric display of the variable cost_raw to two decimal places. Pass the result of this to the variable "cost". Parse out the numeric value of "cost", including decimals, and pass this value to the variable cost_tot. Add the value of cost_tot to the existing value of addTot. Fix the value of addTot to two decimal places and pass the result to a variable named "total".
• Write a dollar sign followed by the value of the variable "cost" to the document, followed by a closing table cell tag and an opening table cell tag specifying right alignment. Next write the text link "Remove Item" with href set to # and an onclick() event handler that calls the function delItm() with the argument "+[i]+".
• Write a closing table cell tag followed by a closing table row tag. Write a new table row. The row's only cell should span four columns and should be right-aligned. The cell should contain the text "The total cost of your order is" followed by a dollar sign and the value of the "total" variable, formatted as bold. Close the else statement, then call the function endTable().
5. Create a function named delItm() with a single parameter, "itm".
a. The function should create a cookie named "danx" where x is the value of the "itm" parameter. Set the cookie to expire immediately.
b. Next, the function should reload the page in the browser.
6. In the file dan_cart.htm, replace the comment "" with a script calling the function seeItm().
7. Open dan.htm in the browser. Add an item to the cart, then click the View Cart button at the top of the page. View the contents of the shopping cart. Test the functionality for removing items from the cart by clicking the Remove Item link for the item placed in the cart.
Attachment:- zipped html gif css js files.zip