You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: JavaScript3/Week7/homework.md
+3-1Lines changed: 3 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -90,7 +90,9 @@ Go over your homework one last time:
90
90
- Have you used `const` and `let` and avoided `var`?
91
91
- Do the variable, function and argument names you created follow the [Naming Conventions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md)?
92
92
- Is your code well-formatted (see [Code Formatting](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md))?
If you can answer yes to the above questions then you are ready to hand in the homework:<br/>
95
97
- Find the hyf-homework git repo (that you have forked from [here](https://github.com/HackYourFuture-CPH/hyf-homework)) the link will be https://github.com/YOUR-ACCOUNT/hyf-homework
96
98
- Add your homework files in the Javascript/javascript3/week7 folder
Copy file name to clipboardExpand all lines: JavaScript3/Week8/homework.md
+5-3Lines changed: 5 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -90,11 +90,13 @@ Go over your homework one last time:
90
90
- Does every file run without errors and with the correct results?
91
91
- Have you used `const` and `let` and avoided `var`?
92
92
- Do the variable, function and argument names you created follow the [Naming Conventions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md)?
93
-
- Is your code well-formatted (see [Code Formatting](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md))?
If you can answer yes to the above questions then you are ready to hand in the homework:<br/>
96
98
- Find the hyf-homework git repo (that you have forked from [here](https://github.com/HackYourFuture-CPH/hyf-homework)) the link will be https://github.com/YOUR-ACCOUNT/hyf-homework
97
-
- Add your homework files in the Javascript/javascript3/week7 folder
99
+
- Add your homework files in the Javascript/javascript3/week8 folder
98
100
- To finish the homework post the link for your repo and the rendered index.html on your classes slack channel
Copy file name to clipboardExpand all lines: JavaScript3/Week9/homework.md
+26-12Lines changed: 26 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@
4
4
Using classes help with structuring code. It is one of many **design patterns**. Second it **connects everything** you have learned in js: functions, properties, methods, keys, arrays.
5
5
6
6
## Lets make some art using classes
7
-
In HTML5 there is an elements called canvas. It works just like a canvas. You can paint elements like lines, circles and much more to the canvas.
7
+
In HTML5 there is an elements called canvas. It **works just like a real canvas.** You can paint elements like lines, circles and much more to the canvas.
8
8
9
9
### Paint a circle to a canvas element
10
10
First add the `canvas` element to your html. Now draw a circle on the `canvas` using js. Google is your friend here :)
@@ -20,9 +20,9 @@ c1.draw();
20
20
21
21
Where the constructor should look like this: `constructor(x, y, r, startAngle, endAngle, fillColor)`
22
22
23
-
The circle should have one method: `draw` that draws the circle to the canvas. That means that creating an instance of the circle class will not draw the circle. That first happens when we call the draw method.
23
+
The circle should have one method: `draw` that **draws the circle to the canvas**. That means that creating an instance of the circle class will not draw the circle. **Drawing the circle**first happens when we **call the draw method.**
24
24
25
-
Test if the new class works by creating a circle and drawing it to the canvas. Try some different radiuses and fill colors.
25
+
Test if the new class works by creating a circle and drawing it to the canvas. Try some different radiuses, positions and fill colors.
26
26
27
27
### Now lets make art!
28
28
Every half second create a new circle class and draw that to the canvas.
@@ -36,11 +36,11 @@ Instead of the circles just randomly appearing on the screen, make them appear a
36
36
37
37
38
38
## Getting into promises
39
-
Lets use the github api to see what repositories different users have. You can use this url to get repositories for a specific github username, in this case the username `benna100`: `https://api.github.com/search/repositories?q=user:benna100`. Select 3 classmates github username that you want to show repositories for.
39
+
Lets use the github api to see **what repositories different users have**. You can use this url to get repositories for a specific github username, in this case the username `benna100`: `https://api.github.com/search/repositories?q=user:benna100`. Select 3 classmates github username that you want to show repositories for.
40
40
41
-
Fetch all the 3 classmates repositories at the same time using Promise.all.
41
+
Fetch all the 3 classmates repositories **at the same time using Promise.all.** Remember the **all at once** exercise [here?](../Week8/homework.md#visual-promise)
42
42
43
-
When you have the data for the different repositories, render the fullname of the repo, url of the repo, and the owner of the repo. See [github-repos](homework/github-repos.html) as an example of how the renderered repos should look.
43
+
When you have the data for the different repositories, **render the fullname** of the repo, **url** of the repo, and **the owner** of the repo. See [github-repos](homework/github-repos.html) as an example of how the renderered repos should look. You are more than welcome to style it a bit nicer!
44
44
45
45
## Shopping cart using Classes
46
46
Let's get a bit more into creating classes!
@@ -53,7 +53,6 @@ class Product {
53
53
}
54
54
}
55
55
56
-
57
56
classShoppingCart {
58
57
constructor(products) {
59
58
this.products= products;
@@ -67,6 +66,10 @@ class ShoppingCart {
67
66
// Implement functionality here
68
67
}
69
68
69
+
searchProduct(productName) {
70
+
// Implement functionality here
71
+
}
72
+
70
73
getTotal() {
71
74
// Implement functionality here
72
75
}
@@ -89,18 +92,27 @@ So we have two classes. `Product` represents products. `ShoppingCart` represents
89
92
### Part 1
90
93
Create the functionality for the `ShoppingCart` class.
91
94
-`addProduct` should add a product to the products array.
92
-
-`removeProduct` should remove a product from the products array. Hint look up indexOf
95
+
-`removeProduct` should remove a product from the products array.
93
96
-`getTotal` should get the total price of the products in the `shoppingcart`.
94
97
-`renderProducts` should render the products to html. You decide what to show and how.
98
+
-`searchProduct` should return an array of product that match the `productName` parameter
95
99
-`getUser` should return a promise with the data from this api: https://jsonplaceholder.typicode.com/users/1
96
100
97
101
### Part 2
98
102
Try and create some products and call the `addProduct` and the `removeProduct` functions to see if they work.
99
103
100
104
Call the `getUser` function to get a user. When the user has been fetched. Render the products using the `renderProducts` method. Also render the username and the total price of the products in the `shoppingcart`.
101
105
106
+
*Optional and a little tricky!* Create a **searchbar where a user can search for a product.** Matching product are shown as an autocomplete. **Clicking a product** in the autocomplete **opens a modal** with product information.
107
+
102
108
### Part 3
103
-
The `Product` class function should get a method called `getPrice`. The function should have `currency` as a parameter. Depending on the currency return the correct price. Add 3 or more curriencies. Or use an api for getting the price dependent on a currency that getPrice uses.
109
+
The `Product` class should get a method called `convertToCurrency`. The function should have `currency` as a parameter. Depending on the **provided currency return the correct price** for the product. Add 3 or more curriencies. Or use an api for getting the price dependent on a currency that `convertToCurrency` uses.
Be creative! Create some cool/weird/quirky functionality of either the `Product` class or the `ShoppingCart` class.
@@ -117,11 +129,13 @@ Go over your homework one last time:
117
129
- Does every file run without errors and with the correct results?
118
130
- Have you used `const` and `let` and avoided `var`?
119
131
- Do the variable, function and argument names you created follow the [Naming Conventions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md)?
120
-
- Is your code well-formatted (see [Code Formatting](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md))?
If you can answer yes to the above questions then you are ready to hand in the homework:<br/>
123
137
- Find the hyf-homework git repo (that you have forked from [here](https://github.com/HackYourFuture-CPH/hyf-homework)) the link will be https://github.com/YOUR-ACCOUNT/hyf-homework
124
-
- Add your homework files in the Javascript/javascript3/week7 folder
138
+
- Add your homework files in the Javascript/javascript3/week9 folder
125
139
- To finish the homework post the link for your repo and the rendered index.html on your classes slack channel
0 commit comments