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/Week9/homework.md
+14-18Lines changed: 14 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,12 +4,12 @@
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 to the canvas.
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.
8
8
9
9
### Paint a circle to a canvas element
10
-
First add the canvas element to your html. Now draw a circle on the canvas using js. Google is your friend here :)
10
+
First add the `canvas` element to your html. Now draw a circle on the `canvas` using js. Google is your friend here :)
11
11
12
-
When you have added a normal circle, try filling it out so it has a color.
12
+
When you have added a normal circle, try filling it out so it has a color. Again google time!
13
13
14
14
### Class creation time!
15
15
Lets create a class called `Circle`. The circle should be used like this:
@@ -20,14 +20,14 @@ 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.
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.
24
24
25
-
Test if the new class works by creating a circle and drawing it to the canvas.
25
+
Test if the new class works by creating a circle and drawing it to the canvas. Try some different radiuses 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.
29
29
30
-
The circle should have random `x`, `y`, `radius` and `color`.
30
+
The circle should have random `x`, `y`, `radius` and `color`. For giving the `circle` a random color what should we do?? We should google off course!
31
31
32
32
What if we wanted the canvas to have the same width and height of the screen?
33
33
@@ -36,17 +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
-
Get `movies` using this api: https://gist.githubusercontent.com/pankaj28843/08f397fcea7c760a99206bcb0ae8d0a4/raw/02d8bc9ec9a73e463b13c44df77a87255def5ab9/movies.json
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
-
Show the movie poster and the title for the first 20 movies from the above api. To get a movie poster for a movie, use this api: https://developers.themoviedb.org/3/getting-started/introduction You need to investigate a bit how to get the poster for a given movie. But help each other in the class and ask questions if you struggle too much.
41
+
Fetch all the 3 classmates repositories at the same time using Promise.all.
42
42
43
-
Think about `promise.all` and using chaining of `.then`.
44
-
45
-
Here is an example of how the output should be:
46
-
47
-
48
-
49
-
hint: This task is difficult, so find someone to work with!
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.
50
44
51
45
## Shopping cart using Classes
52
46
Let's get a bit more into creating classes!
@@ -95,13 +89,15 @@ So we have two classes. `Product` represents products. `ShoppingCart` represents
95
89
### Part 1
96
90
Create the functionality for the `ShoppingCart` class.
97
91
-`addProduct` should add a product to the products array.
98
-
-`removeProduct` should remove a product from the products array.
99
-
-`getTotal` should get the total price of the products.
92
+
-`removeProduct` should remove a product from the products array. Hint look up indexOf
93
+
-`getTotal` should get the total price of the products in the `shoppingcart`.
100
94
-`renderProducts` should render the products to html. You decide what to show and how.
101
95
-`getUser` should return a promise with the data from this api: https://jsonplaceholder.typicode.com/users/1
102
96
103
97
### Part 2
104
-
Try and call the `addProduct` and the `removeProduct` functions. Call the `getUser` function to get a user. When the user has been fetched. Render the total price of the Shoppingcar, the username and the products in the shopping cart.
98
+
Try and create some products and call the `addProduct` and the `removeProduct` functions to see if they work.
99
+
100
+
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`.
105
101
106
102
### Part 3
107
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.
0 commit comments