Writing JavaScript

This was my favorite unit thus far because I get to write code. My 3 scripts were to add functionality to the add Item buttons on Arganoil.html, Exfoliatingsoap.hmtl, and Lavaclay.html. Also, display items on the shopping cart when the user visits the Cart.html. And finally, when the user adds an item to his/her cart the system suggests other items.

There were a few attempts before the ideas became reality. The first attempt was to write one script for all pages and handle everything in it from adding products, removing products, clearing the cart, incrementing product quantity or decreasing it. I actually did it, but it was messy and really long to manage. Then, I found out that I can use Object Oriented Programming in JavaScript. This way I can use objects that have properties and behavior. I could see that it would be so easy to deal with custom made objects than trying to write structured JavaScript code.

Now, I have to determine which classes to build and how they relate to each other. I found three classes that could be useful. First, I am dealing with products that are to be added to a shopping cart and this latter may have multiple products in it. So, I need a Product, Row and Cart classes. A Product has a name and a price. A Row has a Product, quantity, and total price. A Cart has Rows, total quantity, and total price. Now, I need somewhere to store this data, because it needs to be persistent since the user is moving from page to page. We do have common storage for all webpages, or more precisely a session. This storage is called localStorage, and each website has its own localStorage that resides on the users hard drive.

My, next step is to learn how to store and retrieve data from and to localStorage. As this is my first time using this technique I made some mistakes when storing an object on localStorage. I assumed that objects would be stored as they are, I mean the object will be stored with its variables and methods. NO! that was not correct. When an object is stored on localStorage it is stringified to a JSON object, thus the object loses its methods and keeps only the variables which are stored as a string (JSON object). I had to learn how to deal with that the hard way. One way to understand how data is stored on localStorage is to print the content of it after filling it. After learning about localStorage everything else was easy to implement.

The scripts I wrote are all necessary for my website so that the personas mentioned in unit 1 can use the site properly.

The second idea of a drop-down shopping cart has the same logic as above the only difference is I didn't use a table to show the cart but instead just used divs that shows up when the user hovers over the shopping cart icon and disappears when the mouseout event fires. The last idea of adding suggestions to the user when he/she adds an item was trivial. The logic was to generate items that do not appear on that page and show them right under the add button.

My diagrams for the shopping cart are here. 

My website is here as a zipped file. 

You can visit my website by clicking here.