Group members: this is the place for your learning diary. Use this to post your zipped-up site at least once each unit, and your reflections as often as you wish (at least once per unit). Please write your reflections directly in the post, not as attached files. Where you do need to attach documents, such as for unit 1 designs, use PDF, PNG or JPG formats. You can attach files using the 'Embed content' link in the editor.
QUICK COURSE LINKS: Add blog post - Read latest group posts - FAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : Misc
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.
The Landing is a social site for Athabasca University staff, students and invited guests. It is a space where they can share, communicate and connect with anyone or everyone.
Unless you are logged in, you will only be able to see the fraction of posts on the site that have been made public. Right now you are not logged in.
If you have an Athabasca University login ID, use your standard username and password to access this site.
We welcome comments on public posts from members of the public. Please note, however, that all comments made on public posts must be moderated by their owners before they become visible on the site. The owner of the post (and no one else) has to do that.
If you want the full range of features and you have a login ID, log in using the links at the top of the page or at https://landing.athabascau.ca/login (logins are secure and encrypted)
Posts made here are the responsibility of their owners and may not reflect the views of Athabasca University.
We block sites that track your web browsing without your permission. If a link is greyed out, click once to enable sharing, once more to share.
Comments