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: JavaScript1/Week3/homework.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -158,7 +158,7 @@ Use this function to add some songs to your playlist!
158
158
#### Improving our application *optional*
159
159
What if there are multiple songs with the same name? Then we have problems in our `getSongByTitle` function! Instead of returning a song, return an array of songs that match the title parameter.
160
160
161
-
What is a user had multiple playlists? How could we accomodate that? Either describe how to fix this problem or make some code!
161
+
What if a user had multiple playlists? How could we accomodate that? Either describe how to fix this problem or make some code!
Copy file name to clipboardExpand all lines: JavaScript2/Week6/readme.md
+11-4Lines changed: 11 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -124,17 +124,24 @@ const fastCarBrands = cars
124
124
.map(car=>car.brand);
125
125
```
126
126
127
-
This part:
128
127
```js
129
128
constfastCars= cars
130
129
.filter(car=>car.speed>60);
130
+
131
+
// fastCars is an array! Arrays we can call .map on, so why not do it in one go!?
131
132
```
132
-
Returns an array of objects (that represent fast cars). We know that we can call filter on an array, doing that we get the chaining of methods.
133
+
Calling the `filter` function, returns an array (in our case an array of objects, that represent fast cars). We know that we can call `.map` on an array, doing that we get the chaining of methods.
133
134
134
135
The principal behind is exactly the same as in this example:
Copy file name to clipboardExpand all lines: JavaScript3/Week8/homework.md
+30-59Lines changed: 30 additions & 59 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,31 +7,21 @@ Since promises is becoming standard in javascript, new browser api's use promise
7
7
8
8
So lets learn some promises :)
9
9
10
-
## Warmup exercises
11
-
We will start with some **abstract tasks** first and then get into a concrete task in the end.
12
-
13
-
## Promise that resolves after set time
14
-
Create a function that has one parameter: `millisecondsToResolve`. **Calling this function** will **return a promise** that resolves after the millisecondsToResolve has passed.
15
-
16
-
Here is an example: `notThisFunctionName(3000)` will return a promise that resolves after 3000 milliseconds.
17
-
18
-
Use the `notThisFunctionName` to log out the string `I am called asynchronously` after 6000 milliseconds.
19
-
20
-
## Exercise 2
10
+
### Movies exercise
21
11
Fetch movies from this api: `https://gist.githubusercontent.com/pankaj28843/08f397fcea7c760a99206bcb0ae8d0a4/raw/02d8bc9ec9a73e463b13c44df77a87255def5ab9/movies.json`
22
12
23
13
1. Create an array called long movies that contain an array of long movies. A long movie has a running time of larger than 7000
24
-
1. Create an array called longMovieTitles. That contain only the titles of the long movies.
25
-
1. Log out an array of bad movies
26
-
1. Log out an array of bad movies since year 2000
27
-
1. only log the titles of the bad movies since year 2000
14
+
2. Create an array called longMovieTitles. That contain only the titles of the long movies.
15
+
3. Log out an array of bad movies
16
+
4. Log out an array of bad movies since year 2000
17
+
5. only log the titles of the bad movies since year 2000
28
18
29
-
## Fetching and waiting
30
-
Only using promises
31
-
1. Fetch some data from an api.
32
-
1. After that data has been fetched, wait 3 seconds
33
-
1. Log out the data from the api
34
-
1. Now do all of these things using chaining
19
+
## Promise that resolves after set time
20
+
Create a function that has one parameter: `resolveAfter`. **Calling this function** will **return a promise** that resolves after the `resolveAfter` seconds has passed.
21
+
22
+
Here is an example: `makeUpYourOwnFunctionName(3)` will return a promise that resolves after 3 seconds.
23
+
24
+
Use the `makeUpYourOwnFunctionName` to log out the string `I am called asynchronously` after 6 seconds.
35
25
36
26
## Rewrite time
37
27
Rewrite [setTimeout](https://developer.mozilla.org/ro/docs/Web/API/window.setTimeout) and [navigator.geolocation.getCurrentPosition](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API#JavaScript_Content) to promises. So instead of using [setTimeout](https://developer.mozilla.org/ro/docs/Web/API/window.setTimeout) and [navigator.geolocation.getCurrentPosition](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API#JavaScript_Content) with callbacks, use it as a promise.
@@ -55,57 +45,38 @@ getCurrentLocation()
55
45
});
56
46
```
57
47
58
-
## Thumbs up or thumbs down
59
-
Lets build a website where people can say thumbs up or thumbs down to diffeent things.
60
-
61
-
62
-
63
-
If you go into the [homework folder](homework) there is some html, css and some js. If you clone down the javascript repo, then you can simply copy the files into your hyf-homework js3 week 2 folder.
64
-
65
-
You will be working in the index.js file.
66
-
67
-
### Manually create functionality
68
-
What we want to happen when a button is clicked is the following:
69
-
1. The `li` in the top of the `ul` should get a `transform:translateX(1000px)`. That will translate the `li` to the right out of the window. This indicates that the user has given a thumbs up to what the `li` element contains. When the `li` has been translated out we dont see any `li`. Thats because the next `li` has `opacity: 0;`. Lets fix that in the next step.
70
-
1. Lets show the next `li`: The next `li` (the second `li` in the `ul`) should become visible. Do that by giving it the following css attributes: `opacity: 1; transform: scale(1);` This will animate the next `li` element into view.
71
-
72
-
Do these steps two **manually using the inspector** simply setting the style of the relevant elements. **Nothing to hand in here**, its just simply to give you a feeling for the application.
48
+
## Fetching and waiting
49
+
**Only using promises**
50
+
1. Fetch some data from an api.
51
+
2. After that data has been fetched, wait 3 seconds
52
+
3. Log out the data from the api
53
+
4. Now do all of these things using [chaining](readme.md#promise-chaining)
73
54
74
-
### Getting to js
75
-
Now we have a feeling for what should happen when the thumbs up button is clicked: **Animate `li` out, then animate next `li` into view**
55
+
##Visual promise
56
+
This task is about visually understanding the difference between Promise.all and calling a promise one at a time.
76
57
77
-
The very detail oriented students probably saw the keyword **then** in the previous sentence! Hmm that sound just like a promise:
78
-
- Do something (animate `li` out)
79
-
-**then** do something else (animate next `li` into view)
58
+
If you go into the [promise-visual homework folder](homework/promise-visual) there is some html, css and some js. If you clone down the javascript repo, then you can simply copy the files into your hyf-homework js3 week 2 folder. Dont modify move-box.js, only work in main.js!
80
59
81
-
Lets create a function called `animateLiOut`. This function should animate the `li` out and **return a promise** that resolves after the animation of the first `li` is done. (how long time does it take for the `li` to animate out?) What function can we use to wait for some given time in js?
60
+
There is a function available to you called `moveElement`. It moves an element to a new position and returns a promise. `moveElement` takes a `DOM element` and an `object` specifying the `x` and `y` of the new position. It then returns a `promise` that resolves after the `DOM element` has been moved.
// this callback function is first called when the li is out of view!
88
-
89
-
// Now lets animate the next li into view
90
-
animateNextLiIntoView();
65
+
console.log('Element has been moved');
91
66
});
92
67
```
93
68
94
-
### Improving the application
95
-
Now when we press the thumbs up button: the first `li` is animated out and the next one comes into view. But what about when we **press the button again**? Lets create the functionality that keeps animating the next `li` out, we now need some kind of index to keep track of which `li` has been animated out. And what if we **press the thumbs down button**, then the `li` should be animated out of view but **to the left not to the right**. Lets also create that functionality.
96
-
97
-
### Personalise the application
98
-
Right now the `li` elements just have the text Thing 1, Thing 2 which is super boring! Now you have to give it a **personal touch**!
69
+
Your task is to create two functions!
70
+
-`translateOneByOne` - Should translate the circles one at a time from their **random start position** to their **target**. Log something out **after each element has been moved**
71
+
-`translateAllAtOnce` - Should translate all the circles at the same time from their **random start position** to their **target**. Log out something **after all elements have been moved**
99
72
100
-
You decide what we are giving thumbs up or down to. Maybe its music tracks, food dishes, movies or danish traditions, **you decide!**
73
+
**One by one**
101
74
102
-
Create an `array` of `objects` in js that represents what we are interacting with. Using that `array` of `objects`, build the `li's` and insert them into the `ul`. The `li's` could contain a h1, a span, maybe an image, you decide here, as long as it is built from the `array` of `objects`.
75
+
<imgalt="One by one"src="assets/one-by-one.gif"width="300" />
103
76
104
-
### Improve improve imporve *optional*
105
-
- What if we instead of creating our own `array` of `objects` fetch some data from an [api](https://github.com/toddmotto/public-apis) and use that data to render our `li's`
106
-
- Interaction with the keyboard arrows
107
-
- Super duper hard mode: swipe the card
77
+
**All at one**
108
78
79
+
<imgalt="All at one"src="assets/all-at-once.gif"width="300" />
109
80
110
81
## Feedback giving time!
111
82
Find a student to give feedback using this site: https://hyf-peer-review.herokuapp.com/
0 commit comments