Open up your project in Notepad++ and paste this code at the end of your previous code.
Save your file. Do not run it yet as it is incomplete.
I believe that all browsers now support HTML5 data storage. This code along with the doShowAll()came from the article I referenced before
The way to code works is to create a table and then put the information from storage into it.
Day 4: RemoveItem() function
Open up your project in Notepad++ and paste this code just after your previous work.
Save your html file as pizzaPageSessionStorage.html. Do not run it yet as it is incomplete.
When the user click on the remove item button, the function is fired.
The variables are declared: the item name and its cost.
The item is then deleted from session storage.
Now the variable that contains the subtotal of pizza needs to be adjusted.
We need to subtract the cost of the deleted item from the totalPizza variable.
First we get the value of totalPizza.
Next, we get the name and cost of the item that was deleted.
Now we convert the string totalPizza to a number and delete it from the totalPizza variable.
Now we round it off and save it to sessionStorage.
Day 5: Empty the cart
Open up your project in Notepad++ and paste this code just after your previous work.
Save your html file. Do not run it yet as it is incomplete.
The command to clear the sessionStorage is triggered when a user presses a key in the HTML section to empty the cart.
In addition to clearing the storage, we need to uncheck all the boxes that were checked in the HTML section of the page.
Lastly we show the empty cart to the user. This part is in the doShowAll() function if the cart is empty.
Day 6: Checkout function
Paste this code at end of javascript functions,just before the ending script tag.
When the Checkout button is clicked this code is fired. My thoughts were that if a customer had an account, they should not have to fill in delivery and account information like credit card stuff.
Consequently there are two checkout pages. To determine if the user has an account, we look into localStorage to see if there is a userpassword. The account information is created in the section on creating an account.
If an account has been created, we make a link to cOutHasAccount.html, which will automatially load customer information in the order.
If the user does not have an account, the cOut.html page is loaded and the user must enter delivery information and pay for the order when it is delivered.
Day 7: HTML section of page
Open up your project in Notepad++ and paste this code just after ending head tag.
Save your html file. Do not run it yet as it is incomplete.
Make sure that you use ending tags for head and script
When the page loads we want our code to run the doShowAll() function to see what is on the shopping list.
The next four lines are the heading for our pizza company.
The navigation table is next. This is identical to the uppercrust.html code.
The form name is next. It must surround the information that we want to send to the company.
A table is created next for our two products:cheese pizza and pepperoni pizza.
Sizes range from small to large. A check box is available to be checked for each choice.
An image of as shopping cart is next.
Two input fields are next. One is for the name of a product, the other for its price.
We do not use these fields for inputting new items, but for removing an item from the cart.
Next comes two buttons. One to add items, the other to remove items.
The next section of code, displays the items in the cart.
A button is shown which clears or empties the entire cart.
A button to the checkout page is next. sThere tow checkout pages: one for individuals with an account and the other for those who have not created one.
Ending tags for the form, body and html finish off the code.
Day 8: getting the pictures needed for the page.(pizza cheese images and pepperoni images)
Right click the images in the table and save images as: cheese2.jpg, pizza.jpg and shoppingCart.jpg.
Day 9: Testing out the pizza page.
We need to find out if our application works. Follow the steps listed below to check the accuracy of our application. I can not emphasise how important this step is.
Your completed application should look like this Finished pizza page
Run the application using the browser of choice.
Click on all checkboxes like you were ordering all the pizzas.
Click on the Add to cart button.
Press F12 to activate the javascript debugger.
Select >> to expand selection
Click on Application
Select session storage
Click File to see contents of session storage.
Now let's remove an item.
Type item and price in the textboxes or drag and drop them.
