├── .gitignore
├── README.md
├── assignments
    ├── assignment-1.md
    ├── assignment-2.md
    ├── assignment-3.md
    ├── assignment-4.md
    ├── assignment-5-client.js
    ├── assignment-5.md
    ├── images
    │   ├── Box1_$10.png
    │   ├── Box2_$5.png
    │   ├── Clothes1_$20.png
    │   ├── Clothes2_$30.png
    │   ├── Jeans_$50.png
    │   ├── KeyboardCombo_$40.png
    │   ├── Keyboard_$20.png
    │   ├── Mice_$20.png
    │   ├── PC1_$350.png
    │   ├── PC2_$400.png
    │   ├── PC3_$300.png
    │   └── Tent_$100.png
    ├── layout.png
    └── product.png
├── server-boilerplate
    ├── README.md
    ├── StoreDB.js
    ├── index.js
    ├── initdb.mongo
    ├── package.json
    └── public
    │   └── index.html
└── tutorials
    └── git-setup.md


/.gitignore:
--------------------------------------------------------------------------------
 1 | CMakeCache.txt
 2 | CMakeFiles
 3 | CMakeScripts
 4 | Testing
 5 | Makefile
 6 | cmake_install.cmake
 7 | install_manifest.txt
 8 | compile_commands.json
 9 | CTestTestfile.cmake
10 | **/node_modules/**
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # University of British Columbia - CPEN 400A (Winter 2019)
 2 | This repo contains the tutorials and necessary materials needed for assignments.
 3 | 
 4 | [Git Tutorial](tutorials/git-setup.md)
 5 | 
 6 | 1. [Assignment-1](assignments/assignment-1.md) 
 7 | 2. [Assignment-2](assignments/assignment-2.md)
 8 | 3. [Assignment-3](assignments/assignment-3.md)
 9 | 4. [Assignment-4](assignments/assignment-4.md)
10 | 4. [Assignment-5](assignments/assignment-5.md)
11 | 
12 | 


--------------------------------------------------------------------------------
/assignments/assignment-1.md:
--------------------------------------------------------------------------------
  1 | [<< Back to Main](../README.md)
  2 | 
  3 | # Overview
  4 | 
  5 | You are hired as a web developer for UBC bookstore to develop a website to sell their products online. As a part of your job you are going to build an online store where you can list different items that can be sold online. Students can register on the website, browse all the available products, check out availability, read product description and purchase any of the listed items.
  6 | 
  7 | 
  8 | # Assignment 1
  9 | 
 10 | For the first part of this project, you will need to build the homepage for the online store. Below is a wireframe of how the web page should look:
 11 | 
 12 | ![layout.png](./layout.png?raw=true "Web Page Wireframe")
 13 | 
 14 | You are free to choose colours and fonts of your own choice.
 15 | 
 16 | **For this assignment, you will be using HTML and CSS to define the layout of a web page and apply styles to different DOM elements. There is no JavaScript required for this assignment, so you will be penalized if you use JavaScript for this assignment.**
 17 | 
 18 | 
 19 | ## Directory Structure
 20 | 
 21 | To help you get started, you will need to structure your project like the following. **Submission instructions are given in the end of this document.**
 22 | 
 23 | ```
 24 | /css/
 25 | /js/
 26 | /images/
 27 | /index.html
 28 | ```
 29 | 
 30 | * Root folder (all html files go in this folder)
 31 |   * css
 32 |     * (all stylesheets go in this folder)
 33 |   * js
 34 |     * (all JavaScript files go in this folder)
 35 |   * images
 36 |     * (all images go in this folder)
 37 |   * index.html (this should be the entry point to your website)
 38 | 
 39 | 
 40 | ## Tasks
 41 | 
 42 | 1. [HTML] Create the html layout that will be required to generate the web page provided in the screenshot. Your homepage should include the following elements:
 43 |     
 44 |     * Header (div id=header)
 45 |         * Logo (img id=logo)
 46 |         * Welcome Banner (img id=banner)
 47 |     * Main Content (div id=content)
 48 |         * Navigation Menu (ul id=menu)
 49 |             * Menu Item 1 (li class=menuItem)
 50 |             * Menu Item 2 (li class=menuItem)
 51 |             * Menu Item 3 (li class=menuItem)
 52 |         * Product List (ul id=productList)
 53 |             * Product 1 (li class=product)
 54 |             * Product 2 (li class=product)
 55 |             * Product n (li class=product)
 56 |     * Footer (div id=footer)
 57 | 
 58 |     * **You can find and download all the product images that you will be displaying on the home page [HERE](./images/). The product name and price are indicated in the file name.**
 59 | 
 60 | 2. [CSS] Create a CSS stylesheet to add relevant styles that would help you design the layout for the web page. A few things to keep in mind:
 61 |     * The width of the content within the website should be 1000px.
 62 |     * The content should be centered within the web page.
 63 | 
 64 | 3. [CSS] You need to add some interactivity to the website using pure css (no javascript is required for these tasks, so *please do not use JavaScript*)
 65 |     * A) When you hover over any of the items in the navigation menu, the **text and background color should be changed**. As soon as you move the mouse pointer away, the color should be restored back to the original color.
 66 |     * B) When you hover over any of the product, the **background color around the product should change, and the price should become visible on top of the product image**. As soon as you take the mouse pointer away, the price should disappear and the background should revert to its original color.
 67 | 
 68 | 
 69 | ## Testing
 70 | 
 71 | **To test your code, insert the following script tags in the head tag of your page**
 72 | ```
 73 | <script src="http://ece.ubc.ca/~kumseok/src/cpen400a/jquery-3.3.1.min.js" type="text/javascript"></script>
 74 | <script src="http://ece.ubc.ca/~kumseok/src/cpen400a/test-1.js" type="text/javascript"></script>
 75 | ```
 76 | You will see a red button on the top-right corner of your web page. Click it to test your code.
 77 | 
 78 | * Note that you do not need to setup any server to host the webpage you are creating. Simply open the html pape with any browser, the webpage will be displayed.
 79 | 
 80 | * The marks and feedback you get from the test script is for your debugging purposes. **Those marks are not used for grading.**
 81 | 
 82 | 
 83 | ## Marking
 84 | 
 85 | There are 3 tasks for this assignment:
 86 | * Task 1: 2 Points
 87 | * Task 2: 2 Points
 88 | * Task 3:
 89 |   * A: 3 Points
 90 |   * B: 3 Points
 91 | 
 92 | 
 93 | ## Submission instructions:
 94 | 
 95 | * For each assignment, create a branch called `assignment-{number}` (case-sensitive, note the hyphen), for ex: `assignment-1`, `assignment-2`, * etc.
 96 |     * The TAs use a script to automate the checkout process, so it is **important that the branch name follows the format**
 97 |     * You can create as many branches as you want, but we will only mark the branch that follows this naming format
 98 | * Make sure you push your changes to that branch before midnight (11:59 PM) on the date of the assignment deadline - late submissions will not be accepted.
 99 |     * We will be downloading the code on the midnight of the due date, any changes to code after that point will not be considered for marking.
100 | 
101 | * For a step-by-step walk-through of the submission procedure, go [here](../tutorials/git-setup.md)
102 | 
103 | 
104 | ### Deadline:
105 | 
106 | These deadlines will be strictly enforced; we won't be looking at any commits done after this time-stamp.
107 | 
108 | * L1A, L1B, and L1C - Monday, September 23, 2019 23:59:59 PST
109 | 
110 | Feel free to create the branch *assignment-N* from the beginning and make incremental commits. Doing it this way you would still have partially completed work even if you accidentally forget to push the final commit on the day of the deadline. We will `checkout` the most recent commit time-stamped before the deadline. For this Assignment 1, the branch should be called `assignment-1`.
111 | 


--------------------------------------------------------------------------------
/assignments/assignment-2.md:
--------------------------------------------------------------------------------
  1 | [<< Back to Main](../README.md)
  2 | 
  3 | # Assignment 2
  4 | 
  5 | This assignment builds on the work you have done for [Assignment 1](./assignment-1.md).
  6 | 
  7 | For this assignment you will be implementing the "Shopping Cart" functionality. Here is a high-level overview of what you will be doing:
  8 | 
  9 | * Create a "Store" object to keep track of the application's state
 10 | * Create "Add to Cart", "Remove from Cart" buttons
 11 | * Create a "Show Cart" button to see the items in the cart
 12 | * Create a timer to track user inactivity
 13 | 
 14 | 
 15 | ## Directory Structure
 16 | 
 17 | Same as assignment 1, except this time it will include a JavaScript file that describes your application.
 18 | 
 19 | ```
 20 | /css/
 21 | /js/
 22 |     /app.js
 23 | /images/
 24 | /index.html
 25 | ```
 26 | 
 27 | In the above example `app.js` will have all your JavaScript code. You should include this in your `index.html` as a `<script>` tag.
 28 | 
 29 | 
 30 | ## Tasks
 31 | 
 32 | 1. (2 Points) [JS] Define a constructor function with the signature `function Store(initialStock)`, which will be used to instantiate a `Store` object. This `Store` object will keep track of the items in the store and the items in the cart. *Although we do tolerate the use of ES6 for the assignments, for this Task **do not use the ES6 `class`***.
 33 |     * A) The constructor function should initialize the following properties:
 34 |         * `"stock"` - initialize it with `initialStock` passed as the argument to the constructor
 35 |         * `"cart"` - initialize it with an empty object (i.e. associative array)
 36 |     * B) Define the following methods for `Store` (i.e. prototype functions) - You don't need to implement the function body yet; you will do that in Task 5:
 37 |         * `addItemToCart(itemName)`
 38 |         * `removeItemFromCart(itemName)`
 39 | 
 40 | 2. (1 Point) [JS] Create a **global variable** named `products` and then assign it an associative array (i.e. an object) that will store information about the products.
 41 |     * The keys of this object should be the names of the product (e.g. `"Box1"`) found in the file names of the [product images](./images/) we provided in assignment 1.
 42 |     * The value corresponding to each key should be yet another associative array, storing information about a product. The object should have the following properties:
 43 |         * `"label"` - `(string)` Human friendly name of the product
 44 |         * `"imageUrl"` - `(string)` The URL of the product image
 45 |         * `"price"` - `(number)` The price of the product
 46 |         * `"quantity"` - `(number)` The quantity of the product **(initialize this to 5 for all products)**
 47 | 
 48 | 3. (1 Point) [JS] Create a **global variable** named `store` and then assign a new instance of `Store` you defined in Task 1. Use the `product` object created in Task 2 as the argument.
 49 | 
 50 | 4. (2 Points) [HTML] For each product box, create "Add to Cart" and "Remove from Cart" buttons that are shown when the mouse pointer is over it:
 51 |     * A) Use `btn-add` as the class name for the "Add to Cart" button. When clicked, this button should invoke `addItemToCart` method of the `store` object you instantiated in Task 3, using the appropriate item name as the argument.
 52 |     * B) Use `btn-remove` as the class name for the "Remove from Cart" button. When clicked, this button should invoke `removeItemFromCart` method of the `store` object you instantiated in Task 3, using the appropriate item name as the argument.
 53 | 
 54 | 5. (4 Points) [JS] Implement the following methods of `Store`:
 55 |     * A) `addItemToCart(itemName)` - this function should accept a string argument `itemName`. If the cart object already has a value corresponding to this key, increment it. If not, set it to 1. Decrement the quantity in the stock accordingly. Handle cases where the stock does not have the item anymore.
 56 |     * B) `removeItemFromCart(itemName)` - this function should accept a string argument `itemName`. If the cart object has a value corresponding to this key, decrement it. Increment the quantity in the stock accordingly. If the quantity in the cart becomes 0, delete the entry in the cart.
 57 | 
 58 | 6. (2 Points) [JS+HTML] Implement a function with the signature `showCart(cart)`, which **invokes an `alert` to display the contents of the given cart object** as shown below in the example. Then create a "Show Cart" button with id=`btn-show-cart` somewhere in your HTML, which, when clicked, will invoke the `showCart` function with the appropriate cart object.
 59 | 
 60 | ```
 61 | Box1 : 3
 62 | Jeans : 1
 63 | Keyboard : 2
 64 | ```
 65 | 
 66 | 7. (3 Points) [JS] Create a **global variable** named `inactiveTime` and initialize it to `0`. Then implement an "Inactivity Tracker" feature using `setInterval` or `setTimeout`. Use the global `inactiveTime` variable to keep track of how much time has elapsed. If the user does not perform any action (adding item to cart, removing item from cart, viewing cart) within **30 seconds** since the last time an action was performed, an `alert` should be displayed with a message (e.g. "Hey there! Are you still planning to buy something?"). Clicking OK on the alert should reset the timer. At any point, if the user performs an action, the timer should be reset as well.
 67 | 
 68 | 
 69 | ## Testing
 70 | 
 71 | **To test your code, insert the following script tags within the head tag of your page**
 72 | ```
 73 | <script src="http://ece.ubc.ca/~kumseok/src/cpen400a/jquery-3.3.1.min.js" type="text/javascript"></script>
 74 | <script src="http://ece.ubc.ca/~kumseok/src/cpen400a/test-2.js" type="text/javascript"></script>
 75 | ```
 76 | You will see a red button on the top-right corner of your web page. Click it to test your code.
 77 | Watch out for the alert messages which tell you any missing components/functionalities. You are responsible for ensuring that all the functionalities above are implemented correctly - the tests are only there to help you. We reserve the right to test your code with other test cases than the above.
 78 | 
 79 | * The feedback you get from the test script is for your debugging purpose only; **they are not used directly for grading.**
 80 | 
 81 | 
 82 | ## Marking
 83 | 
 84 | There are 7 tasks for this assignment (Total 15 Points):
 85 | * Task 1: 2 Points
 86 | * Task 2: 1 Point
 87 | * Task 3: 1 Point
 88 | * Task 4:
 89 |   * A: 1 Point
 90 |   * B: 1 Point
 91 | * Task 5:
 92 |   * A: 2 Point
 93 |   * B: 2 Point
 94 | * Task 6: 2 Points
 95 | * Task 7: 3 Points
 96 | 
 97 | 
 98 | ## Submission instructions:
 99 | 
100 | * Create a branch called `assignment-2`.
101 | * Update the code to reflect the changes for this assignment.
102 | * Make sure you commit and push your changes before the due date - late submissions will not be accepted.
103 | 
104 | 
105 | ### Deadlines:
106 | 
107 | These deadlines will be strictly enforced; we won't be looking at any commits done after this time-stamp.
108 | 
109 | * L1A, L1B and L1C - Monday, October 7, 2019 23:59:59 PST
110 | 


--------------------------------------------------------------------------------
/assignments/assignment-3.md:
--------------------------------------------------------------------------------
  1 | [<< Back to Main](../README.md)
  2 | 
  3 | # Assignment 3
  4 | 
  5 | This assignment builds on the work you have done for [Assignment 2](./assignment-2.md).
  6 | 
  7 | In this assignment you will be focusing on making your application more dynamic. Here is a high-level overview of what you will be doing:
  8 | 
  9 | * Dynamically generate the product list
 10 | * Dynamically generate the shopping cart modal
 11 | 
 12 | 
 13 | ## Tasks
 14 | 
 15 | Before you begin, you can set the inactivity timeout to 30 minutes or longer so that the alerts don't keep popping up.
 16 | 
 17 | 1. (5 Points) [JS] Define and implement the following functions.
 18 |     * A) `renderProduct(container, storeInstance, itemName)`
 19 |         * The first argument `container` is a DOM element *(not a CSS selector string)*
 20 |         * The second argument `storeInstance` is an instance of `Store`.
 21 |         * The third argument `itemName` is the name of a product (e.g. `"Box1"`)
 22 |         * The function should generate a single product box (DOM element) corresponding to `itemName`, then **replace the contents of `container` with this new DOM element**.
 23 |         * Conditionally generate "Add to Cart" and "Remove from Cart" buttons:
 24 |             * If the quantity of an item in stock is zero, "Add to Cart" button should not be generated.
 25 |             * If the quantity of an item in cart is zero, "Remove from Cart" button should not be generated.
 26 |         * Make sure that the click handlers on the buttons are working correctly.
 27 | 
 28 |     * B) `renderProductList(container, storeInstance)`
 29 |         * The first argument `container` is a DOM element *(not a CSS selector string)*
 30 |         * The second argument `storeInstance` is an instance of `Store`.
 31 |         * The function should generate the product list (DOM element), which so far you had hard-coded in the HTML, and then **replace the contents of `container` with this new DOM element.**
 32 |         * Use the `renderProduct` function you created in Task 1A to generate the individual product boxes.
 33 |         * On the element **that you pass to `renderProduct`** as the first argument, assign the id `product-<itemName>` where `<itemName>` is the name of each product (e.g. `"Box1"`). *You will need this id later.*
 34 | 
 35 | 2. (1 Point) [JS+HTML] Remove the hard-coded product list (i.e. #productList) from `index.html` and in its place put a placeholder `<div>` with id `productView`. Then invoke `renderProductList` function with the appropriate arguments to populate this `<div>` element.
 36 | 
 37 | 3. (2 Points) [JS] If you have completed Task 1 and 2, the product list should now render when you load the page. However, when you add an item to the cart, the "Remove from Cart" button does not show because we are not updating the HTML when our cart object is modified. In this task, you will use a *callback function* to set up a mechanism to re-render the view whenever the application's state is updated.
 38 |     * Add a new property `onUpdate` in the `Store` constructor function and initialize it to `null`
 39 |     * The `onUpdate` property will later be assigned a function that takes a single argument. In `addItemToCart` and `removeItemFromCart` methods, call `this.onUpdate` function whenever cart or stock is updated, passing in `itemName` as the argument.
 40 |     * After the `store` object is instantiated, assign to its `onUpdate` property a function with the signature `function(itemName)`.
 41 |         * The first argument `itemName` is the name of a product (e.g. `"Box1"`)
 42 |         * This function should call `renderProduct` function with the appropriate arguments. (Hint: use the ids you assigned in Task 1.B)
 43 |     * If Tasks 1 ~ 3 are done correctly, the product list should now be updated dynamically.
 44 | 
 45 | 4. (4 Points) [JS] You will be upgrading the "show cart" functionality to display a modal window instead of an alert. First, define and implement the function with signature `renderCart(container, storeInstance)`:
 46 |     * The first argument `container` is a DOM element *(not a CSS selector string)*
 47 |     * The second argument `storeInstance` is an instance of `Store`.
 48 |     * The function should generate a table (does not need to be specifically a `<table>` element, we just mean "tabular representation") displaying the contents of the cart including the quantity of each item and the total price, and then **replace the contents of `container` with this new DOM element.**
 49 |     * The table should also have "+" and "-" `<button>`s for each item, which can be clicked to increment/decrement the quantity. You should invoke the same `addItemToCart` and `removeItemFromCart` methods.
 50 | 
 51 | 5. (3 Points) [JS+HTML+CSS] You will use the `renderCart` function from Task 4 to complete the "show cart" functionality.
 52 |     * In your HTML, place the following elements:
 53 |         * `div#modal` as a sibling of `div#footer` element. *It should initially be invisible.*
 54 |         * `div#modal-content` as an offspring of `div#modal`
 55 |         * `button#btn-hide-cart` as an offspring of `div#modal`
 56 |     * The modal should have a semi-transparent dark backdrop, and should be shown in the center of the screen.
 57 |     * Update your `showCart` function from `assignment-2` to perform the following instead of showing an alert:
 58 |         * Make `div#modal` visible
 59 |         * Use `renderCart` to update `div#modal-content`
 60 |     * Write a `hideCart` function and invoke it when `button#btn-hide-cart` is clicked. The function should:
 61 |         * Make `div#modal` invisible
 62 |     * Finally, to automatically re-render the cart content, invoke `renderCart` function with the appropriate arguments in the `onUpdate` function you defined in Task 3.
 63 | 
 64 | 
 65 | 6. (Bonus 1 point) Hide the cart modal when the user presses **esc** key.
 66 | 
 67 | 
 68 | ## Testing
 69 | 
 70 | **To test your code, insert the following script tags within the head tag of your page**
 71 | ```
 72 | <script src="http://ece.ubc.ca/~kumseok/src/cpen400a/jquery-3.3.1.min.js" type="text/javascript"></script>
 73 | <script src="http://ece.ubc.ca/~kumseok/src/cpen400a/test-3.js" type="text/javascript"></script>
 74 | ```
 75 | You will see a red button on the top-right corner of your web page. Click it to test your code.
 76 | Watch out for the alert messages which tell you any missing components/functionalities. You are responsible for ensuring that all the functionalities above are implemented correctly - the tests are only there to help you. We reserve the right to test your code with other test cases than the above.
 77 | 
 78 | * The feedback you get from the test script is for your debugging purpose only; **they are not used directly for grading.**
 79 | 
 80 | 
 81 | ## Marking
 82 | 
 83 | There are 5 tasks + 1 bonus task for this assignment (Total 15 Points):
 84 | * Task 1:
 85 |   * A: 4 Points
 86 |   * B: 1 Point
 87 | * Task 2: 1 Point
 88 | * Task 3: 2 Points
 89 | * Task 4: 4 Points
 90 | * Task 5: 3 Points
 91 | * Bonus Task 6: 1 Point
 92 | 
 93 | **Bonus mark does not carry over to the next assignment - it is used only to make up for marks lost in this assignment**
 94 | 
 95 | 
 96 | ## Submission instructions:
 97 | 
 98 | * Create a branch called `assignment-3`.
 99 | * Update the code to reflect the changes for this assignment.
100 | * Make sure you commit and push your changes before the due date - late submissions will not be accepted.
101 | 
102 | 
103 | ### Deadlines:
104 | 
105 | These deadlines will be strictly enforced; we won't be looking at any commits done after this time-stamp.
106 | 
107 | * L1A, L1B, and L1C - Monday, October 21, 2019 23:59:59 PST
108 | 
109 | 
110 | ## Labs are mandatory on the week of assignment submission


--------------------------------------------------------------------------------
/assignments/assignment-4.md:
--------------------------------------------------------------------------------
  1 | [<< Back to Main](../README.md)
  2 | 
  3 | # Assignment 4
  4 | 
  5 | This assignment builds on the work you have done for [Assignment 3](./assignment-3.md).
  6 | 
  7 | In this assignment you will focus on interacting with a remote server. Here is a high-level overview of what you will be doing:
  8 | 
  9 | * Fetch the products from a remote server using AJAX
 10 | * Implement the first part of the cart check-out routine
 11 | 
 12 | 
 13 | ## Tasks
 14 | 
 15 | The following URLs can be used for this assignment:
 16 | * `https://cpen400a-bookstore.herokuapp.com/products` - returns object containing all the products
 17 | * `https://cpen400a-bookstore.herokuapp.com/products/<itemName>` - returns a single product identified by `<itemName>` 
 18 | * `https://cpen400a-bookstore.herokuapp.com/test/reliable` - the reliable version of `/products` endpoint
 19 | * `https://cpen400a-bookstore.herokuapp.com/test/error` - this endpoint always returns error
 20 | 
 21 | 1. (2 Points) [JS] First we will make some minor modifications to prepare for integration with server-side logic:
 22 |     * Remove the `products` variable as we no longer need it.
 23 |     * Modify the constructor function of `Store` like the following:
 24 |         * The constructor should now have the signature `function Store(serverUrl)`.
 25 |         * Initialize the property `serverUrl` with the argument passed to the constructor function.
 26 |         * Instead of initializing the `stock` property with `initialStock`, assign an empty object.
 27 |     * Modify the initialization of the `store` variable accordingly, passing in `https://cpen400a-bookstore.herokuapp.com` as the argument. (previously you passed in the `products` object)
 28 |     * Modify the anonymous function you assigned to `store.onUpdate` so that if `itemName` is not given, the entire product list is redrawn (by invoking `renderProductList` with the appropriate arguments).
 29 | 
 30 | 2. (5 Points) [JS] Write a reusable function that can be used for making AJAX calls. [jQuery](http://jquery.com) has a `$.get(url, callback)` function, which can be used to make XMLHttpRequests to servers and get back data. For this task you will be writing a similar function with the following signature: `ajaxGet(url, onSuccess, onError)`.
 31 |     * The first argument `url` is a string representing the URL to make request to.
 32 |     * The second argument `onSuccess` is a function that is called if the request was successful, and it takes in a single argument - the response returned from the server.
 33 |     * The third argument `onError` is a function that is called if the request ultimately failed, and it also takes in a single argument - the error of the request.
 34 |     * The remote server you are fetching the data from is not very reliable. Sometimes, instead of returning the product list the server takes a long time, which causes the AJAX request to time out. Also, sometimes the server returns error 500 instead of the product list. In either case, you will need to retry the request until you get the list of products from the web server. If you are still unable to get a response after 3 retries, invoke the `onError` callback function.
 35 |     * Upon successfully receiving a response, invoke the `onSuccess` callback function. Convert the response payload into a JavaScript object and then pass it as the argument.
 36 | 
 37 | You should be able to use the function like this:
 38 | 
 39 | ```
 40 | ajaxGet("https://cpen400a-bookstore.herokuapp.com/products",
 41 | 	function(response){
 42 | 		// do something with the response
 43 | 	},
 44 | 	function(error){
 45 |     // this function should be invoked only after all 3 retries have failed.
 46 | 		// do something with the error
 47 | 	}
 48 | );
 49 | ```
 50 | 
 51 | To help you get started, here is [some reference to the XMLHttpRequest API](https://www.w3schools.com/xml/xml_http.asp).
 52 | 
 53 | 3. (4 Points) [JS] Define a method for `Store` with the following signature: `syncWithServer(onSync)`
 54 |     * The first argument `onSync` is a function that is called after the `Store` instance has successfully synchronized its `stock` with the server.
 55 |     * Using the `ajaxGet` function you wrote above, make a request to the server. The URL to use is the value of `serverUrl` property plus `"/products"`.
 56 |     * The response returned from the server has the same structure as `products` variable we've been using so far. Upon succesfully receiving a response, compute a "delta" object with the following structure (the "delta" object tells us about what has been changed since the last time we synchronized. The example below corresponds to the case where the price of `Box1` changed from `10` to `5` and the quantity from `5` to `8`):
 57 |     ```
 58 |     var delta = {
 59 |         'Box1': {
 60 |             price: -5,
 61 |             quantity: 3
 62 |         }
 63 |     }
 64 |     ```
 65 |     * Once you've computed the "delta" object, update the `stock` property using the object fetched from the server. You will need to pay close attention when updating the quantity of items (if some items are currently in the cart, can you simply replace the `stock` with the new stock object?). After that, invoke the store instance's `onUpdate` function with no arguments to trigger re-rendering of the view.
 66 |     * If `onSync` argument was provided, call it and pass in the "delta" object as the argument.
 67 |     * Finally, after you have initialized the `store` variable, call this `syncWithServer` method with no arguments.
 68 | 
 69 | 4. (4 Points) [JS] You will implement the first part of the check-out routine in this task; the rest of the check-out procedure will be completed in the next assignment.
 70 |     * A) Create a "Check Out" button with id `btn-check-out` in your cart modal. Bind a click event listener that does the following:
 71 |         * First, disable the button to prevent multiple clicks.
 72 |         * Then call `storeInstance.checkOut`, passing in a callback function.
 73 |         * Re-enable the button in the callback function.
 74 |     * B) Define a method for `Store` with the following signature: `checkOut(onFinish)`.
 75 |         * This method should first invoke the `syncWithServer` method to check that the items are still available. Pass in a callback function with the signature `function(delta)`.
 76 |         * In the callback function, if there was a change in the stock (i.e. if `delta` is not an empty object), alert the user of the changes. One alert can show all the changes, for example:
 77 |         ```
 78 |         Price of Jeans changed from $50 to $60
 79 |         Quantity of Fancy Keyboard changed from 7 to 3
 80 |         ```
 81 |         * If there was no change in the stock and everything is okay to check out, alert the user the total amount due. (In the next assignment, we will be replacing this part with the actual check-out request)
 82 |         * If `onFinish` argument was provided, call it.
 83 | 
 84 | 
 85 | ## Testing
 86 | 
 87 | **To test your code, insert the following script tags within the head tag of your page**
 88 | ```
 89 | <script src="http://ece.ubc.ca/~kumseok/src/cpen400a/jquery-3.3.1.min.js" type="text/javascript"></script>
 90 | <script src="http://ece.ubc.ca/~kumseok/src/cpen400a/test-4.js" type="text/javascript"></script>
 91 | ```
 92 | You will see a red button on the top-right corner of your web page. Click it to test your code.
 93 | Watch out for the alert messages which tell you any missing components/functionalities. You are responsible for ensuring that all the functionalities above are implemented correctly - the tests are only there to help you. We reserve the right to test your code with other test cases than the above.
 94 | 
 95 | * The feedback you get from the test script is for your debugging purpose only; **they are not used directly for grading.**
 96 | 
 97 | 
 98 | ## Marking
 99 | 
100 | There are 4 tasks for this assignment (Total 15 Points):
101 | * Task 1: 2 Points
102 | * Task 2: 5 Points
103 | * Task 3: 4 Points
104 | * Task 4:
105 |   * A: 1 Points
106 |   * B: 3 Point
107 | 
108 | 
109 | ## Submission instructions:
110 | 
111 | * Create a branch called `assignment-4`.
112 | * Update the code to reflect the changes for this assignment.
113 | * Make sure you commit and push your changes before the due date - late submissions will not be accepted.
114 | 
115 | 
116 | ### Deadlines:
117 | 
118 | These deadlines will be strictly enforced; we won't be looking at any commits done after this time-stamp.
119 | 
120 | * L1A, L1B and L1C - Tuesday, November 12, 2019 23:59:59 PST
121 | 
122 | 
123 | ## Labs are mandatory on the week of assignment submission:
124 | 
125 | * If you cannot attend the lab to demo your assignment for any reason, you need to notice Instructors on Piazza at least 24 hours before the lab section starts. Otherwise, you will be recorded as no attendance and will have marks deducted.
126 | 


--------------------------------------------------------------------------------
/assignments/assignment-5-client.js:
--------------------------------------------------------------------------------
  1 | Store.prototype.queryProducts = function(query, callback){
  2 | 	var self = this;
  3 | 	var queryString = Object.keys(query).reduce(function(acc, key){
  4 | 			return acc + (query[key] ? ((acc ? '&':'') + key + '=' + query[key]) : '');
  5 | 		}, '');
  6 | 	ajaxGet(this.serverUrl+"/products?"+queryString,
  7 | 		function(products){
  8 | 			Object.keys(products)
  9 | 				.forEach(function(itemName){
 10 | 					var rem = products[itemName].quantity - (self.cart[itemName] || 0);
 11 | 					if (rem >= 0){
 12 | 						self.stock[itemName].quantity = rem;
 13 | 					}
 14 | 					else {
 15 | 						self.stock[itemName].quantity = 0;
 16 | 						self.cart[itemName] = products[itemName].quantity;
 17 | 						if (self.cart[itemName] === 0) delete self.cart[itemName];
 18 | 					}
 19 | 					
 20 | 					self.stock[itemName] = Object.assign(self.stock[itemName], {
 21 | 						price: products[itemName].price,
 22 | 						label: products[itemName].label,
 23 | 						imageUrl: products[itemName].imageUrl
 24 | 					});
 25 | 				});
 26 | 			self.onUpdate();
 27 | 			callback(null, products);
 28 | 		},
 29 | 		function(error){
 30 | 			callback(error);
 31 | 		}
 32 | 	)
 33 | }
 34 | 
 35 | function renderMenu(container, storeInstance){
 36 | 	while (container.lastChild) container.removeChild(container.lastChild);
 37 | 	if (!container._filters) {
 38 | 		container._filters = {
 39 | 			minPrice: null,
 40 | 			maxPrice: null,
 41 | 			category: ''
 42 | 		};
 43 | 		container._refresh = function(){
 44 | 			storeInstance.queryProducts(container._filters, function(err, products){
 45 | 					if (err){
 46 | 						alert('Error occurred trying to query products');
 47 | 						console.log(err);
 48 | 					}
 49 | 					else {
 50 | 						displayed = Object.keys(products);
 51 | 						renderProductList(document.getElementById('productView'), storeInstance);
 52 | 					}
 53 | 				});
 54 | 		}
 55 | 	}
 56 | 
 57 | 	var box = document.createElement('div'); container.appendChild(box);
 58 | 		box.id = 'price-filter';
 59 | 		var input = document.createElement('input'); box.appendChild(input);
 60 | 			input.type = 'number';
 61 | 			input.value = container._filters.minPrice;
 62 | 			input.min = 0;
 63 | 			input.placeholder = 'Min Price';
 64 | 			input.addEventListener('blur', function(event){
 65 | 				container._filters.minPrice = event.target.value;
 66 | 				container._refresh();
 67 | 			});
 68 | 
 69 | 		input = document.createElement('input'); box.appendChild(input);
 70 | 			input.type = 'number';
 71 | 			input.value = container._filters.maxPrice;
 72 | 			input.min = 0;
 73 | 			input.placeholder = 'Max Price';
 74 | 			input.addEventListener('blur', function(event){
 75 | 				container._filters.maxPrice = event.target.value;
 76 | 				container._refresh();
 77 | 			});
 78 | 
 79 | 	var list = document.createElement('ul'); container.appendChild(list);
 80 | 		list.id = 'menu';
 81 | 		var listItem = document.createElement('li'); list.appendChild(listItem);
 82 | 			listItem.className = 'menuItem' + (container._filters.category === '' ? ' active': '');
 83 | 			listItem.appendChild(document.createTextNode('All Items'));
 84 | 			listItem.addEventListener('click', function(event){
 85 | 				container._filters.category = '';
 86 | 				container._refresh()
 87 | 			});
 88 | 	var CATEGORIES = [ 'Clothing', 'Technology', 'Office', 'Outdoor' ];
 89 | 	for (var i in CATEGORIES){
 90 | 		var listItem = document.createElement('li'); list.appendChild(listItem);
 91 | 			listItem.className = 'menuItem' + (container._filters.category === CATEGORIES[i] ? ' active': '');
 92 | 			listItem.appendChild(document.createTextNode(CATEGORIES[i]));
 93 | 			listItem.addEventListener('click', (function(i){
 94 | 				return function(event){
 95 | 					container._filters.category = CATEGORIES[i];
 96 | 					container._refresh();
 97 | 				}
 98 | 			})(i));
 99 | 	}
100 | }


--------------------------------------------------------------------------------
/assignments/assignment-5.md:
--------------------------------------------------------------------------------
  1 | [<< Back to Main](../README.md)
  2 | 
  3 | # Assignment 5
  4 | 
  5 | This assignment builds on the work you have done for [Assignment 4](./assignment-4.md).
  6 | 
  7 | In this assignment you will focus on building the backend service for the bookstore. Here is a high-level overview of what you will be doing:
  8 | 
  9 | * Set up a MongoDB database
 10 | * Build a simple web server using Node.js
 11 | * Build a check-out routine using AJAX POST
 12 | 
 13 | 
 14 | ## Dependencies
 15 | 
 16 | 1. You will need [Node.js](https://nodejs.org) to complete this assignment, so please install Node.js if you haven't done so yet. Node.js comes with a tool called NPM (Node Package Manager), which you can use to download Node.js modules written by other people. After you have installed Node.js, you will need the following NPM modules (but *don't install these NPM modules yet*, you will do this in Task 1):
 17 |     * `express` (npm)
 18 |     * `mongodb` (npm)
 19 | 
 20 | 2. You will also need [MongoDB](https://docs.mongodb.com/manual/administration/install-community/) to store the data that your application will be accessing.
 21 | 
 22 | 3. In addition, we provide you with a boilerplate and a some utility functions - you will find them in the instructions below.
 23 | 
 24 | 
 25 | ## Tasks
 26 | 
 27 | We use the following object schemas to describe the structure of objects:
 28 | ```
 29 | Product = {
 30 |     "_id": ObjectId(String),
 31 |     "label": String,
 32 |     "price" : Number,
 33 |     "quantity" : Number,
 34 |     "imageUrl": String,
 35 |     "category": String
 36 | }
 37 | 
 38 | ProductArray = [ Product, Product, Product, ... ]
 39 | 
 40 | Products = {
 41 |     Product._id: {
 42 |         "label": Product.label,
 43 |         "price": Product.price,
 44 |         "quantity": Product.quantity,
 45 |         "imageUrl": Product.imageUrl,
 46 |     },
 47 |     Product._id: {
 48 |         "label": Product.label,
 49 |         ... 
 50 |     },
 51 |     Product._id: {
 52 |         "label": Product.label,
 53 |         ... 
 54 |     },
 55 |     ...
 56 | }
 57 | 
 58 | Cart = {
 59 |     Product._id: Number,
 60 |     Product._id: Number,
 61 |     Product._id: Number,
 62 |     ...
 63 | }
 64 | 
 65 | Order = {
 66 |     "_id": ObjectId(String),
 67 |     "client_id": String,
 68 |     "cart": Cart,
 69 |     "total": Number
 70 | }
 71 | 
 72 | Query = {
 73 |     minPrice: Number|String,
 74 |     maxPrice: Number|String,
 75 |     category: String
 76 | }
 77 | ```
 78 | For example, when we refer to a "`Product` object" in the instructions below, we mean an object with fields `"label"`, `"price"`, `"quantity"`,`"imageUrl"`,`"category"` as shown in the schema above. The field `"_id"` exists in the case of a MongoDB document.
 79 | 
 80 | 
 81 | 1. (2 Points) We will take a few small steps first to prepare for "full-stack" development.
 82 |     * A) **Reorganize your project directory** to include the server application. A [boilerplate](../server-boilerplate/) of the application has been provided for you and you're welcome to copy it and start from there (if you copied it before, take a look at it again as it's been updated). Your project directory should now have the following structure:
 83 |         ```
 84 |         /public/
 85 |             /css/
 86 |             /js/
 87 |             /index.html
 88 |         /index.js
 89 |         /initdb.mongo
 90 |         /package.json
 91 |         /StoreDB.js
 92 |         ```
 93 |         * When you're moving things within your project directory, **make sure you don't move the `.git` directory and `.gitignore` file**.
 94 |         * Make sure in your `.gitignore` file, you have a line `**/node_modules/**` (you should already have this as we included it upon setting up the repo). This tells `git` not to commit your NPM dependencies.
 95 |         * The `/public/` directory should now contain the files you had until now (up to `assignment-4`).
 96 |         * You can now *remove* the `/images` directory as you will be fetching the images from a different server.
 97 |         * Once you've reorganized the directory, install the NPM dependencies mentioned above. You should see a `/node_modules` directory once you've installed them.
 98 |         * If everything is set up properly, you should now be able to serve your client-side application by typing `node index.js` (`index.js` is your server application). The server should bind to port 3000 and your client app should be accessible via a browser at [`http://localhost:3000`](http://localhost:3000).
 99 |     * B) **Initialize the database using the [script provided](../server-boilerplate/initdb.mongo)**. Start a Mongo Shell by typing `mongo`, then load the script by `load("initdb.mongo")`. It initializes two collections, `products` and `orders`, and it will populate your database with the product list. You can type `db.products.find()` to see if the products were entered properly. If you need to reset your database, simply repeat the `load` command.
100 |     
101 | 2. (2 Points) [JS+HTML] To interact with the server, we will make some modifications in the client app. To help you focus on server-side development, we're providing you with some client-side functions that you can copy+paste into your application. You will need to set up the rest of your code to properly integrate the functions we're providing.
102 |     * A) In `assignment-4` you initialized `store` with the URL `https://cpen400a-bookstore.herokuapp.com`. Change this URL and use the URL of your server instead.
103 |     * B) Declare a new global variable `displayed` and assign an empty array. This array will store the keys of products that should be displayed in the view.
104 |     * C) Previously in the `renderProductList` function, you iterated over the keys of `storeInstance.stock`. Modify this loop to iterate over the `displayed` array.
105 |     * D) Previously, after you initialized the `store` instance, you called `store.syncWithServer` with no arguments. Now pass in a callback function with signature `function(delta)`. In the callback function, update the `displayed` array, assigning the keys of the `delta` object. Then invoke `renderProductList` with the appropriate arguments.
106 |     * E) We are providing [2 functions for you to use here](./assignment-5-client.js). Copy them into your client application. You are also welcome to write your own or modify the given code, but you will be responsible for making them work.
107 |         * The first is a `Store` method called `queryProducts` with the signature `function(query, callback)`. This method takes in a `query` object, makes an AJAX GET request with the appropriate query string, then invokes `onUpdate` upon getting a response, and finally invokes the `callback` function.
108 |         * The second is a rendering function named `renderMenu` with the signature `function(container, storeInstance)`. It renders the product category menu and the price filters on the given DOM element.
109 |     * F) To use the provided functions, replace the `#menu` element with a `div#menuView` in your HTML. This is where you will render the product category menu. In your JavaScript where you define `store.onUpdate` handler, add a call to `renderMenu`, passing in the appropriate arguments.
110 | 
111 | 3. (3 Points) [JS] We can use the `mongodb` library to interact with the database. However, the API provided by the module are quite low-level and we want to abstract out these details so we don't have to call the low-level methods all the time. In this task we will write a `StoreDB` object that will take care of the low-level operations. We have provided a [template for `StoreDB`](../server-boilerplate/StoreDB.js), which you will complete.
112 |     * A) Complete the implementation for `StoreDB.prototype.getProducts`.
113 |         * It should accept a single argument `queryParams`, which is a `Query` object.
114 |         * It should find documents in the MongoDB `products` collection, filtered according to the `queryParams` object.
115 |         * If `"minPrice"` is given, the result should only contain products with price higher than or equal to `"minPrice"`.
116 |         * If `"maxPrice"` is given, the result should only contain products with price lower than or equal to `"maxPrice"`.
117 |         * If `"category"` is given, the result should only contain products with category equal to `"category"`.
118 |         * Any combination of the above query parameters should work.
119 |         * It should return a `Promise` that resolves to a `Products` object we've been working with so far (not the raw MongoDB result). Make sure you don't return an array (while the standard practice is returning an array, we'll return an associative array so that we don't have to make a lot of changes on the client side)
120 |     * B) `require` the module `StoreDB.js` in your server application (i.e. `index.js`). Then declare a variable `db`, assigning a `StoreDB` instance initialized with the appropriate arguments (look in `initdb.mongo` for the database name).
121 | 
122 | 4. (2 Points) [JS] In your server app, **create a HTTP `GET` endpoint `/products`** that returns the products in the database.
123 |     * Use the [Express.js API](https://expressjs.com/en/4x/api.html#app) to define a GET endpoint.
124 |     * The handler for this endpoint should use `db.getProducts` to read a `Products` object.
125 |     * The handler should pass a `Query` object (created from the query-string) as the argument into `db.getProducts` function.
126 |     * If the database operation was successful, send the `Products` object as a JSON object.
127 |     * If the database operation was unsuccessful, set the response status to 500 and send an error message.
128 | 
129 | 5. (1 Point) [JS] Write a reusable function that can be used to make an AJAX POST request, similar to the `ajaxGet` function you implemented in `assignment-4`. The function should have the following signature: `ajaxPost(url, data, onSuccess, onError)`.
130 |     * The first argument `url` is a string representing the URL to make request to.
131 |     * The second argument `data` is the object to attach as the payload of the request.
132 |     * The third argument `onSuccess` is a function that is called if the request was successful, and it takes in a single argument - the response returned from the server.
133 |     * The fourth argument `onError` is a function that is called if the request failed or timed out, and it also takes in a single argument - the error of the request.
134 |     * Unlike `ajaxGet`, you *do not need to retry* the request in case of failure; simply invoke the `onError` callback with the appropriate error.
135 |     * Upon successfully receiving a response, invoke the `onSuccess` callback function. Convert the response payload into a JavaScript object and then pass it as the argument.
136 |     * The request payload should be a **JSON string**, and the request header should be set accordingly to indicate that the payload is JSON (i.e. the `Content-Type` header should be `"application/json;charset=UTF-8"`).
137 | 
138 | You should be able to use the function like this:
139 | 
140 | ```
141 | ajaxPost("http://localhost:3000/checkout",
142 |     {
143 |         // some object
144 |     },
145 |     function(response){
146 |         // do something with the response
147 |     },
148 |     function(error){
149 |         // do something with the error
150 |     }
151 | );
152 | ```
153 | 
154 | 6. (1 Point) [JS] Update `Store.prototype.checkOut` to make an actual AJAX POST request.
155 |     * In the place where you alert the user the total amount due, remove the alert and use `ajaxPost` to make an AJAX POST request to the `/checkout` endpoint.
156 |     * You should pass in an `Order` object as the `data` argument for the `ajaxPost` call.
157 |         * You can generate a random number to use for the `client_id` field.
158 |         * `cart` field should be the current `cart` object.
159 |         * `total` field should be the total amount due.
160 |     * If POST request is successful, do the following:
161 |         * alert the user that the items were successfully checked out.
162 |         * set the `cart` to an empty object.
163 |         * invoke `onUpdate` with no arguments.
164 |     * If POST request is unsuccessful, do the following:
165 |         * alert the user about the error
166 | 
167 | 7. (2 Points) [JS] In `StoreDB.js`, complete the implementation for `StoreDB.prototype.addOrder`.
168 |     * It should accept a single argument `order`, which is an `Order` object.
169 |     * It should insert an `Order` document in the MongoDB `orders` collection.
170 |     * It should also decrement the quantities in the `products` collection accordingly. That is, if `cart` field contains `{ Box1: 3 }`, 3 should be decremented from the product with `_id` = `"Box1"` in the `products` collection.
171 |     * It should return a `Promise` that resolves to the ObjectId of the newly inserted Mongo Document.
172 | 
173 | 8. (2 Points) [JS] **Create a HTTP `POST` endpoint `/checkout`** that accepts an order and inserts it in the database.
174 |     * The handler for this endpoint should accept an `Order` object in the payload of the request, *sanitize the object*, and then use it as the argument for `db.addOrder`. By *sanitize* we mean: check that the `Order` object has the correct fields and type-checks.
175 |     * The handler for this endpoint should use `db.addOrder` to insert the order into the database.
176 |     * If the database operation was successful, attach the resolved ID to the response as a JSON object.
177 |     * If the database operation was unsuccessful, set the response status to 500 and add an error message.
178 |     
179 | ## Test
180 | To test your code, insert the following script tags within the head tag of your page
181 | ```
182 | <script src="http://ece.ubc.ca/~kumseok/src/cpen400a/jquery-3.3.1.min.js" type="text/javascript"></script>
183 | <script src="http://ece.ubc.ca/~kumseok/src/cpen400a/test-5.js" type="text/javascript"></script>
184 | ```
185 | You will see a red button on the top-right corner of your web page. Click it to test your code.
186 | Watch out for the alert messages which tell you any missing components/functionalities. You are responsible for ensuring that all the functionalities above are implemented correctly - the tests are only there to help you. We reserve the right to test your code with other test cases than the above.
187 | 
188 | * The feedback you get from the test script is for your debugging purpose only; **they are not used directly for grading.**
189 | 
190 | 
191 | ## Marking
192 | 
193 | There are 8 tasks for this assignment (Total 15 Points):
194 | * Task 1: 2 Points
195 | * Task 2: 2 Points
196 | * Task 3: 3 Points
197 | * Task 4: 2 Points
198 | * Task 5: 1 Point
199 | * Task 6: 1 Point
200 | * Task 7: 2 Points
201 | * Task 8: 2 Points
202 | 
203 | 
204 | ## Submission instructions:
205 | 
206 | * Create a branch called `assignment-5`.
207 | * Update the code to reflect the changes for this assignment.
208 | * Make sure you commit and push your changes before the due date - late submissions will not be accepted.
209 | 
210 | 
211 | ### Deadlines:
212 | 
213 | These deadlines will be strictly enforced; we won't be looking at any commits done after this time-stamp.
214 | 
215 | * L1A, L1B and L1C - Tuesday, November 26, 2019 23:59:59 PST
216 | 
217 | 
218 | ## Labs are mandatory on the week of assignment submission:
219 | 
220 | * If you cannot attend the lab to demo your assignment for any reason, you need to notice Instructors on Piazza ahead of at least 24 hours before the lab section starts. Otherwise, you will be recorded as no attendance and will have marks deducted.
221 | 


--------------------------------------------------------------------------------
/assignments/images/Box1_$10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubc-cpen400a/assignments/09fbcc40dd775ede18c002234223d8719e45122a/assignments/images/Box1_$10.png


--------------------------------------------------------------------------------
/assignments/images/Box2_$5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubc-cpen400a/assignments/09fbcc40dd775ede18c002234223d8719e45122a/assignments/images/Box2_$5.png


--------------------------------------------------------------------------------
/assignments/images/Clothes1_$20.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubc-cpen400a/assignments/09fbcc40dd775ede18c002234223d8719e45122a/assignments/images/Clothes1_$20.png


--------------------------------------------------------------------------------
/assignments/images/Clothes2_$30.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubc-cpen400a/assignments/09fbcc40dd775ede18c002234223d8719e45122a/assignments/images/Clothes2_$30.png


--------------------------------------------------------------------------------
/assignments/images/Jeans_$50.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubc-cpen400a/assignments/09fbcc40dd775ede18c002234223d8719e45122a/assignments/images/Jeans_$50.png


--------------------------------------------------------------------------------
/assignments/images/KeyboardCombo_$40.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubc-cpen400a/assignments/09fbcc40dd775ede18c002234223d8719e45122a/assignments/images/KeyboardCombo_$40.png


--------------------------------------------------------------------------------
/assignments/images/Keyboard_$20.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubc-cpen400a/assignments/09fbcc40dd775ede18c002234223d8719e45122a/assignments/images/Keyboard_$20.png


--------------------------------------------------------------------------------
/assignments/images/Mice_$20.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubc-cpen400a/assignments/09fbcc40dd775ede18c002234223d8719e45122a/assignments/images/Mice_$20.png


--------------------------------------------------------------------------------
/assignments/images/PC1_$350.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubc-cpen400a/assignments/09fbcc40dd775ede18c002234223d8719e45122a/assignments/images/PC1_$350.png


--------------------------------------------------------------------------------
/assignments/images/PC2_$400.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubc-cpen400a/assignments/09fbcc40dd775ede18c002234223d8719e45122a/assignments/images/PC2_$400.png


--------------------------------------------------------------------------------
/assignments/images/PC3_$300.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubc-cpen400a/assignments/09fbcc40dd775ede18c002234223d8719e45122a/assignments/images/PC3_$300.png


--------------------------------------------------------------------------------
/assignments/images/Tent_$100.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubc-cpen400a/assignments/09fbcc40dd775ede18c002234223d8719e45122a/assignments/images/Tent_$100.png


--------------------------------------------------------------------------------
/assignments/layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubc-cpen400a/assignments/09fbcc40dd775ede18c002234223d8719e45122a/assignments/layout.png


--------------------------------------------------------------------------------
/assignments/product.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubc-cpen400a/assignments/09fbcc40dd775ede18c002234223d8719e45122a/assignments/product.png


--------------------------------------------------------------------------------
/server-boilerplate/README.md:
--------------------------------------------------------------------------------
 1 | # Boilerplate for server application
 2 | 
 3 | This is a minimal [Express.js](http://expressjs.com/) application for starting your full-stack web application.
 4 | 
 5 | 
 6 | ## Setting up
 7 | 
 8 | 0. Make sure you have [Node.js](http://nodejs.org/) installed.
 9 | 
10 | 1. Copy this entire directory (`server-boilerplate`) into your project directory. The following files are needed:
11 | 
12 | 	```
13 | 	/public/
14 | 	    /index.html
15 | 	/package.json
16 | 	/index.js
17 | 	```
18 | 
19 |     * `/public/` directory is the root of your client-side application (i.e. where the main `index.html` is served from)
20 |     * `package.json` contains metadata about your project. `npm` needs this file to correctly handle all `npm` commands.
21 |     * `index.js` is the main server application file.
22 | 
23 | 2. Navigate to the project directory. You should be inside the directory where `package.json` is located.
24 | 
25 | 	```
26 | 	~$ cd myProject
27 | 	~/myProject$ ls
28 | 	index.js  package.json  public
29 | 	```
30 | 
31 | 3. Run `npm install` to install the dependencies listed in `package.json`
32 | 
33 | 	```
34 | 	~/myProject$ npm install
35 | 	```
36 | 
37 | 4. If the installation was successful, you should now have a `node_modules` directory in your project.
38 | 
39 | 	```
40 | 	~/myProject$ ls
41 | 	index.js  node_modules  package.json  public
42 | 	```
43 | 
44 | 5. Run `node index.js` to check that your server is running correctly.
45 | 
46 | 	```
47 | 	~/myProject$ node index.js
48 | 	Express.js server started, listening on PORT 3000
49 | 	```
50 | 
51 | Your app should now be running on [localhost:3000](http://localhost:3000/).
52 | 
53 | 
54 | ## Building your application
55 | 
56 | If everything is working okay, you now have a minimal full-stack application. To continue building on this app, you should update the main `index.js` file and the client-side application inside `/public/` directory.


--------------------------------------------------------------------------------
/server-boilerplate/StoreDB.js:
--------------------------------------------------------------------------------
 1 | var MongoClient = require('mongodb').MongoClient;	// require the mongodb driver
 2 | 
 3 | /**
 4 |  * Uses mongodb v3.1.9 - [API Documentation](http://mongodb.github.io/node-mongodb-native/3.1/api/)
 5 |  * StoreDB wraps a mongoDB connection to provide a higher-level abstraction layer
 6 |  * for manipulating the objects in our bookstore app.
 7 |  */
 8 | function StoreDB(mongoUrl, dbName){
 9 | 	if (!(this instanceof StoreDB)) return new StoreDB(mongoUrl, dbName);
10 | 	this.connected = new Promise(function(resolve, reject){
11 | 		MongoClient.connect(
12 | 			mongoUrl,
13 | 			{
14 | 				useNewUrlParser: true
15 | 			},
16 | 			function(err, client){
17 | 				if (err) reject(err);
18 | 				else {
19 | 					console.log('[MongoClient] Connected to '+mongoUrl+'/'+dbName);
20 | 					resolve(client.db(dbName));
21 | 				}
22 | 			}
23 | 		)
24 | 	});
25 | }
26 | 
27 | StoreDB.prototype.getProducts = function(queryParams){
28 | 	return this.connected.then(function(db){
29 | 		// TODO: Implement functionality
30 | 	})
31 | }
32 | 
33 | StoreDB.prototype.addOrder = function(order){
34 | 	return this.connected.then(function(db){
35 | 		// TODO: Implement functionality
36 | 	})
37 | }
38 | 
39 | module.exports = StoreDB;


--------------------------------------------------------------------------------
/server-boilerplate/index.js:
--------------------------------------------------------------------------------
 1 | // Require dependencies
 2 | var path = require('path');
 3 | var express = require('express');
 4 | 
 5 | // Declare application parameters
 6 | var PORT = process.env.PORT || 3000;
 7 | var STATIC_ROOT = path.resolve(__dirname, './public');
 8 | 
 9 | // Defining CORS middleware to enable CORS.
10 | // (should really be using "express-cors",
11 | // but this function is provided to show what is really going on when we say "we enable CORS")
12 | function cors(req, res, next){
13 |     res.header("Access-Control-Allow-Origin", "*");
14 |   	res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
15 |   	res.header("Access-Control-Allow-Methods", "GET,POST,DELETE,OPTIONS,PUT");
16 |   	next();
17 | }
18 | 
19 | // Instantiate an express.js application
20 | var app = express();
21 | 
22 | // Configure the app to use a bunch of middlewares
23 | app.use(express.json());							// handles JSON payload
24 | app.use(express.urlencoded({ extended : true }));	// handles URL encoded payload
25 | app.use(cors);										// Enable CORS
26 | 
27 | app.use('/', express.static(STATIC_ROOT));			// Serve STATIC_ROOT at URL "/" as a static resource
28 | 
29 | // Configure '/products' endpoint
30 | app.get('/products', function(request, response) {
31 | 	response.json({
32 | 		Example: 'This is an Example!'
33 | 	});
34 | });
35 | 
36 | // Start listening on TCP port
37 | app.listen(PORT, function(){
38 |     console.log('Express.js server started, listening on PORT '+PORT);
39 | });


--------------------------------------------------------------------------------
/server-boilerplate/initdb.mongo:
--------------------------------------------------------------------------------
  1 | conn = new Mongo();
  2 | db = conn.getDB("cpen400a-bookstore");
  3 | db.dropDatabase();
  4 | imgHost = 'https://cpen400a-bookstore.herokuapp.com/';
  5 | 
  6 | result = db.products.insert([
  7 | 	{
  8 | 		_id: 'Box1',
  9 | 		label: 'Box',
 10 | 	    price : 5,
 11 | 	    quantity : 10,
 12 | 	    imageUrl: imgHost+'images/Box1.png',
 13 | 	    category: 'Office'
 14 | 	},
 15 | 	{
 16 | 		_id: 'Box2',
 17 | 		label: 'Box Set',
 18 | 	    price : 10,
 19 | 	    quantity : 10,
 20 | 	    imageUrl: imgHost+'images/Box2.png',
 21 | 	    category: 'Office'
 22 | 	},
 23 | 	{
 24 | 		_id: 'Clothes1',
 25 | 		label: 'Black Dress',
 26 | 	    price : 20,
 27 | 	    quantity : 10,
 28 | 	    imageUrl: imgHost+'images/Clothes1.png',
 29 | 	    category: 'Clothing'
 30 | 	},
 31 | 	{
 32 | 		_id: 'Clothes2',
 33 | 		label: 'Floral Blouse',
 34 | 	    price : 30,
 35 | 	    quantity : 10,
 36 | 	    imageUrl: imgHost+'images/Clothes2.png',
 37 | 	    category: 'Clothing'
 38 | 	},
 39 | 	{
 40 | 		_id: 'Jeans',
 41 | 		label: 'Jeans',
 42 | 	    price : 50,
 43 | 	    quantity : 5,
 44 | 	    imageUrl: imgHost+'images/Jeans.png',
 45 | 	    category: 'Clothing'
 46 | 	},
 47 | 	{
 48 | 		_id: 'KeyboardCombo',
 49 | 		label: 'Gaming Keyboard',
 50 | 		price : 40,
 51 | 		quantity : 5,
 52 | 		imageUrl: imgHost+'images/KeyboardCombo.png',
 53 | 	    category: 'Technology'
 54 | 	},
 55 | 	{
 56 | 		_id: 'Keyboard',
 57 | 		label: 'Backlit Keyboard',
 58 | 	    price : 20,
 59 | 	    quantity : 5,
 60 | 	    imageUrl: imgHost+'images/Keyboard.png',
 61 | 	    category: 'Technology'
 62 | 	},
 63 | 	{
 64 | 		_id: 'Mice',
 65 | 		label: 'Mouse',
 66 | 		price : 20,
 67 | 	    quantity : 10,
 68 | 	    imageUrl: imgHost+'images/Mice.png',
 69 | 	    category: 'Technology'
 70 | 	},
 71 | 	{
 72 | 		_id: 'PC1',
 73 | 		label: 'Barebone PC - ATX',
 74 | 	    price : 350,
 75 | 	    quantity : 5,
 76 | 	    imageUrl: imgHost+'images/PC1.png',
 77 | 	    category: 'Technology'
 78 | 	},
 79 | 	{
 80 | 		_id: 'PC2',
 81 | 		label: 'Barebone PC + Keyboard',
 82 | 	    price : 400,
 83 | 	    quantity : 5,
 84 | 	    imageUrl: imgHost+'images/PC2.png',
 85 | 	    category: 'Technology'
 86 | 	},
 87 | 	{
 88 | 		_id: 'PC3',
 89 | 		label: 'Barebone PC - mATX',
 90 | 	    price : 300,
 91 | 	    quantity : 5,
 92 | 	    imageUrl: imgHost+'images/PC3.png',
 93 | 	    category: 'Technology'
 94 | 	},
 95 | 	{
 96 | 		_id: 'Tent',
 97 | 		label: 'Tent for 4',
 98 | 	    price : 100,
 99 | 	    quantity : 5,
100 | 	    imageUrl: imgHost+'images/Tent.png',
101 | 	    category: 'Outdoor'
102 | 	}
103 | ]);
104 | 
105 | print(result);
106 | 
107 | result = db.orders.insert([
108 | 	{
109 | 		client_id: '12345678',
110 | 		cart: {
111 | 			Box1: 2,
112 | 			Box2: 1
113 | 		},
114 | 	    total: 20
115 | 	}
116 | ]);
117 | 
118 | print(result);
119 | 


--------------------------------------------------------------------------------
/server-boilerplate/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "express-boilerplate",
 3 |   "version": "1.0.0",
 4 |   "description": "Minimal boilerplate for Express.js apps",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "express": "^4.16.4"
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/server-boilerplate/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="utf-8">
 5 | 	<title>UBC CPEN400A</title>
 6 | </head>
 7 | <body>
 8 | 	UBC CPEN400A
 9 | </body>
10 | </html>


--------------------------------------------------------------------------------
/tutorials/git-setup.md:
--------------------------------------------------------------------------------
  1 | # Setting up Git for the assignments
  2 | 
  3 | To set up your assignment repository, you will **need a Github account** and also have **Git installed on your local machine**. If you have not done these, follow the instructions below, otherwise you can skip to the next section.
  4 | 
  5 | ## Installing Git
  6 | 
  7 | Go to [https://git-scm.com/downloads](https://git-scm.com/downloads) and download Git.
  8 | 
  9 | ## Setting up Github
 10 | 
 11 | If you have not already, [create a Github account](https://github.com). You will need to **share your Github username with the TA via private piazza note** to get an invitation to your assignment repository.
 12 | 
 13 | 
 14 | # Setting up your assignment repository
 15 | 
 16 | This walk-through assumes you're working in a Unix environment - i.e. using `ls` for listing directories instead of `dir` as in MS-DOS.
 17 | 
 18 | 1. Accept the Github invitation sent to **your primary email address** associated with your Github account.
 19 | 2. Once you have access to the repository, clone the repository on your local machine by using the `git clone` command as shown in the example below:
 20 | 
 21 | ```
 22 | # In this code example we assume:
 23 | #     your repository name is "cpen-group-a",
 24 | #     your working directory is at "~/projects"
 25 | # Replace the above two tokens with your own settings.
 26 | 
 27 | ~/projects$ git clone https://github.com/dashpritam/cpen-group-a.git
 28 | ```
 29 | 
 30 | 3. The repository is now copied to your machine at `~/projects/cpen-group-a`. Navigate into the directory to see the content.
 31 | 
 32 | ```
 33 | ~/projects$ cd cpen-group-a
 34 | ~/projects/cpen-group-a$ ls
 35 | ```
 36 | 
 37 | In your repository, you should see nothing but the `.git` directory and a `.gitignore` file. The `.git` directory is where Git stores all the information about your repository such as commits and branches.
 38 | 
 39 | 
 40 | 4. Enter `git status` in your command line to see which branch you're currently working on and if there are any files that have been added or modified since your last commit.
 41 | 
 42 | ```
 43 | ~/projects/cpen-group-a$ git status
 44 | On branch master
 45 | nothing to commit, working directory clean
 46 | ```
 47 | 
 48 | If you followed the steps so far, the above message should print to your terminal, saying that there is no new or modified files.
 49 | 
 50 | 
 51 | 5. You can enter `git log` to see the commit history.
 52 | 
 53 | ```
 54 | ~/projects/cpen-group-a$ git log
 55 | ```
 56 | 
 57 | The log should show only the first commit that your TA has made.
 58 | 
 59 | 
 60 | 6. Now we will make a test commit to understand the assignment submission procedure. Submitting an assignment would roughly follow these steps:
 61 |     1. Create a new branch called `assignment-N` where `N` is the assignment number.
 62 |     2. Check out the branch to begin working on it.
 63 |     3. Work on your assignment, writing and updating files as needed.
 64 |     4. When your assignment is ready for submission, commit all the changes.
 65 |     5. Push the branch to Github.
 66 | 
 67 | 
 68 | 7. Create a new branch called `assignment-0` by entering the Git command `git branch` as shown below:
 69 | 
 70 | ```
 71 | ~/projects/cpen-group-a$ git branch assignment-0
 72 | ```
 73 | 
 74 | Type `git branch` again to see the list of branches
 75 | 
 76 | ```
 77 | ~/projects/cpen-group-a$ git branch
 78 |   assignment-0
 79 | * master
 80 | ```
 81 | 
 82 | The list shows that the new branch was created, but you are still on the `master` branch.
 83 | 
 84 | 8. Begin working on `assignment-0` branch by checking it out via `git checkout` command.
 85 | 
 86 | ```
 87 | ~/projects/cpen-group-a$ git checkout assignment-0
 88 | Switched to branch 'assignment-0'
 89 | ```
 90 | You are now on the `assignment-0` branch, as indicated by the message on the terminal.
 91 | 
 92 | * As a shortcut, steps 7 & 8 can be done using a single command `git checkout -b assignment-0`.
 93 | 
 94 | 
 95 | 9. In this branch, create a new file using your preferred text editor. Or you can just create a dummy readme file as shown below:
 96 | 
 97 | ```
 98 | ~/projects/cpen-group-a$ echo "Hello Git!" > README.md
 99 | ```
100 | 
101 | 10. Now type `git status` to see the list of files that have not been committed.
102 | 
103 | ```
104 | ~/projects/cpen-group-a$ git status
105 | On branch assignment-0
106 | Untracked files:
107 |   (use "git add <file>..." to include in what will be commmitted)
108 | 
109 |         README.md
110 | 
111 | nothing added to commit but untracked files present (use "git add" to track)
112 | ```
113 | 
114 | The message indicates that `README.md` has not been committed yet, and suggests we use `git add` command to add this file to the commit.
115 | 
116 | 11. Use `git add` command to add the file
117 | 
118 | ```
119 | ~/projects/cpen-group-a$ git add .
120 | ```
121 | 
122 | The command line argument `.` tells Git to add everything in the current directory. If you want to add just the `README.md` file, you can type specifically `git add README.md`.
123 | 
124 | 12. Typing `git status` should indicate that `README.md` has been "staged", but not yet "committed".
125 | 
126 | ```
127 | ~/projects/cpen-group-a$ git status
128 | On branch assignment-0
129 | Changes to be committed:
130 |   (use "git reset HEAD <file>..." to unstage)
131 | 
132 |         new file:   README.md
133 | 
134 | ```
135 | 
136 | 13. Commit the "staged" changes to the branch using the `git commit` command.
137 | 
138 | ```
139 | ~/projects/cpen-group-a$ git commit -m "my first commit"
140 | [assignment-0 e4bea89] my first commit
141 |  1 file changed, 1 insertion(+)
142 |  create mode 100644 README.md
143 | ```
144 | 
145 | The command line argument `-m` means the following argument (`"my first commit"`) will be the commit message you would like to include in the commit. If you omit this flag, the commit process will be interactive.
146 | 
147 | 14. Type `git log` to verify that your commit was successful. The output on terminal should show 2 commits, with the latest commit on top.
148 | 
149 | 15. Your local Git repository has the latest commits, but the remote repository at Github does not know about your changes. You will need to update the remote repository by "pushing" your changes to Github via `git push`.
150 | 
151 | ```
152 | ~/projects/cpen-group-a$ git push origin assignment-0
153 | Counting objects: 3, done.
154 | Delta compression using up to 4 threads.
155 | Compressing objects: 100% (2/2), done.
156 | Writing objects: 100% (3/3), 940 bytes | 0 bytes/s, done.
157 | Total 3 (delta 0), reused 0 (delta 0)
158 | To https://github.com/dashpritam/cpen-group-a.git
159 |  * [new branch]      assignment-0 -> assignment-0
160 | ```
161 | 
162 | The command line argument `origin` refers to the remote repository at Github. You can check the list of remote repositories by typing `git remote -v`.
163 | 
164 | 16. On a browser, navigate to your Github repository at `https://github.com/dashpritam/cpen-group-a` to see the updated repository. The TA's will be looking at this repository to mark the assignments.
165 | 


--------------------------------------------------------------------------------