|
1 | 1 | # Homework Week 9 |
2 | 2 |
|
3 | 3 | ## Step 1: Continuing on previous weeks' homework |
| 4 | +The solutions to last week's homework are available in [this folder](https://github.com/HackYourFuture-CPH/JavaScript/tree/class06/JavaScript3/Week9/More-homework/last-homework-V2). |
4 | 5 |
|
5 | | -The solutions to last week's homework are available in [this folder](./last-homework/). |
| 6 | +Continuing on last weeks movies solution, add the following features on top: |
| 7 | +1. Create a way to select movies by decade (hint: you can use something similar to how movies are filtered by the rating tag). |
| 8 | +1. Similarly, allow the user to sort the movies by: Name, Rating or Year (hint: you can create a new `select` element as well, listen for user interaction and then apply `array.sort()` at the end). Optional |
6 | 9 |
|
7 | | -1. Review the closure solution and try and complete it on your own. |
8 | | -1. Review the movies solution, complete your own implementation, and then add the following features on top: |
9 | | - 1. Create a way to select movies by decade (hint: you can use something similar to how movies are filtered by the rating tag). |
10 | | - 1. Similarly, allow the user to sort the movies by: Name, Rating or Year (hint: you can create a new `select` element as well, listen for user interaction and then apply `array.sort()` at the end). |
| 10 | +## Step 2: Getting into promises |
| 11 | +Rewrite the following code (using promise and other control flow tools/features): |
11 | 12 |
|
12 | | -## Small exercises on Closure and Promise |
13 | | - |
14 | | -1. Write a function that would allow you to do this: |
15 | | - |
16 | | - ```js |
17 | | - var addSix = createBase(6); |
18 | | - addSix(10); // returns 16 |
19 | | - addSix(21); // returns 27 |
20 | | - ``` |
21 | | - |
22 | | -1. Rewrite the following code (using promise and other control flow tools/features): |
23 | | - |
24 | | - ```js |
| 13 | +```js |
25 | 14 | function getAjaxData(url, callback) { |
26 | 15 | const request = new XMLHttpRequest(); |
27 | 16 | request.addEventListener('load', function () { |
@@ -69,31 +58,65 @@ The solutions to last week's homework are available in [this folder](./last-home |
69 | 58 | } |
70 | 59 | } |
71 | 60 | }); |
72 | | - ``` |
| 61 | +``` |
73 | 62 |
|
74 | | -1. You will need to create an HTML document out of the below snippet to run the below code. A hint - the code is syntactically correct but doesn't do what you would expect. Can you see why and fix it? |
75 | 63 |
|
76 | | - Don't cheat - but if you get stuck ... http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example |
| 64 | +## Step 3: Shopping cart using factory functions |
| 65 | +Let get a bit more into factory functions! |
| 66 | +```js |
77 | 67 |
|
78 | | - ```html |
79 | | - <button id="btn-0">Button 1!</button> |
80 | | - <button id="btn-1">Button 2!</button> |
81 | | - <button id="btn-2">Button 3!</button> |
| 68 | +function createProduct(name, price) { |
| 69 | + return { |
| 70 | + name: name, |
| 71 | + price: price, |
| 72 | + } |
| 73 | +} |
| 74 | + |
| 75 | +function createShoppingCart(products) { |
| 76 | + return { |
| 77 | + addProduct: function(product) { |
| 78 | + // Implement functionality here |
| 79 | + }, |
| 80 | + removeProduct: function(product) { |
| 81 | + // Implement functionality here |
| 82 | + }, |
| 83 | + getTotal: function() { |
| 84 | + // Implement functionality here |
| 85 | + }, |
| 86 | + renderProducts: function() { |
| 87 | + // Implement functionality here |
| 88 | + }, |
| 89 | + getUser: function() { |
| 90 | + // Implement functionality here |
| 91 | + } |
| 92 | + } |
| 93 | +} |
82 | 94 |
|
83 | | - <script type="text/javascript"> |
| 95 | +const flatscreen = createProduct('flat-screen', 5000); |
| 96 | +const shoppingCart = createShoppingCart([flatscreen]); |
| 97 | +``` |
| 98 | + |
| 99 | +So we have two factory functions/ constructor function. `createProduct` creates products represented by objects. `createShoppingCart` creates a shopping cart also represented as an object. |
| 100 | + |
| 101 | +### Part 1 |
| 102 | +Create the functionality for the `createShoppingCart` factory functions. |
| 103 | +- `addProduct` should add a product to the products array. |
| 104 | +- `removeProduct` should remove a product from the products array. |
| 105 | +- `getTotal` should get the total price of the products. |
| 106 | +- `renderProducts` should render the products to html. You decide what to show and how. |
| 107 | +- `getUser` should return a promise with the data from this api: https://jsonplaceholder.typicode.com/users/1 |
| 108 | + |
| 109 | +### Part 2 |
| 110 | +Use the `addProduct` and the `removeProduct` functions. Use the `getUser` function to get a user. When the user has been fetched. Show the total price and the username in html and render the products for the user. This should be in html, but you have to choose what to show! |
| 111 | + |
| 112 | +### Part 3 |
| 113 | +The `createProduct` factory function should get a method that can change the name of the product using the `this` keyword. |
| 114 | + |
| 115 | +### Part 4, optional |
| 116 | +Be creative! Create some cool/weird/quirky functionality of either the `createProduct` or the `createShoppingCart` factory function. |
84 | 117 |
|
85 | | - var prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!']; |
86 | | - for (var btnNum = 0; btnNum < prizes.length; btnNum++) { |
87 | | - // for each of our buttons, when the user clicks it... |
88 | | - document.getElementById('btn-' + btnNum).onclick = function() { |
89 | | - // tell her what she's won! |
90 | | - alert(prizes[btnNum]); |
91 | | - }; |
92 | | - } |
93 | | - </script> |
94 | | - ``` |
95 | 118 |
|
96 | | -## Step 2: Hand in Homework: |
| 119 | +## Step 4: Hand in Homework: |
97 | 120 | Go over your homework one last time: |
98 | 121 |
|
99 | 122 | - Does every file run without errors and with the correct results? |
|
0 commit comments