Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit ca89410

Browse files
committed
Merge branch 'master' into class07
2 parents f4219ef + 09c43a9 commit ca89410

File tree

18 files changed

+136
-510
lines changed

18 files changed

+136
-510
lines changed

JavaScript3/Week7/homework.md

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
# Homework Week 7
22

3-
>[Here](/Week7/README.md) you find the readings you have to complete before the eighth lecture.
4-
53
## Step 1: Map, filter, reduce, and =>
64

75
1. Say you would like to write a program that doubles the odd numbers in an array and throws away the even number.
@@ -32,28 +30,31 @@
3230
1. Count the number of movies made between 1980-1989 (including both the years).
3331
3432
## Step 2: Continuing with the previous exercise
35-
Note: Most of you have not completed the homework from last week, so this task will be difficult
3633
3734
- Add map, filter, reduce to your existing app to build an application that loads data from github, filters out based on certain value, map->reduces to a data object and render that object to the dom (using map again).
3835
- For example you can try to use map, filter and reduce to show the most and the least forked repositories, watched repositories. And the total number of forks for all repo's. Also you can work with the data provided about the amount of commits or contributers.
3936
- Add a readme to your repo explaining what your app does and how to use your app. Here's a [template](https://gist.github.com/jxson/1784669) and here you can see how to make [your readme awesome](https://gist.github.com/rrgayhart/91bba7bb39ea60136e5c).
4037
41-
## Step 2: **Some freeCodeCamp challenges:**
38+
## Step 3: **Some freeCodeCamp challenges:**
4239
4340
1. [Comparisons with the Logical And Operator](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator/)
4441
4542
2. [Record Collection](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/record-collection/)
4643
4744
3. [Iterate over Arrays with map](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/functional-programming/use-the-map-method-to-extract-data-from-an-array)
4845
49-
## To watch before the next lecture:
50-
51-
(watch in this order)
52-
53-
1. [Stacks/Queues](https://www.youtube.com/watch?v=wjI1WNcIntg) (5 mins)
54-
2. [JS Event Loops](https://www.youtube.com/watch?v=8aGhZQkoFbQ) (26 mins, watch this one twice or until you understand it)
55-
56-
>Create a new repository "hyf-javascript3". Also create a new folder "week1" inside this repository.
57-
Upload your homework files inside the week1 folder and write a description for this “commit”.
58-
Your hyf-javascript3/week1 should now contain the files of your homework.
59-
Place the link to your repository folder in Trello.
46+
## Step 4: Hand in Homework:
47+
Go over your homework one last time:
48+
49+
- Does every file run without errors and with the correct results?
50+
- Have you used `const` and `let` and avoided `var`?
51+
- Do the variable, function and argument names you created follow the [Naming Conventions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md)?
52+
- Is your code well-formatted (see [Code Formatting](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md))?
53+
![](https://media.giphy.com/media/l4EpblDY4msVtKAOk/giphy.gif)
54+
If you can answer yes to the above questions then you are ready to hand in the homework:<br/>
55+
- 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
56+
- Add your homework files in the Javascript/javascript3/week7 folder
57+
- To finish the homework post the link for your repo and the rendered index.html on your classes slack channel
58+
---
59+
60+
🎉

JavaScript3/Week7/preparation.md

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,8 @@
11
# Preparation
22

3-
```
4-
In week seven we will discuss the following topics:
5-
• Map, filter, reduce
6-
• Arrow functions
7-
```
3+
- Check the first 3-4 [Videos](https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84). (30 min)
4+
- https://flaviocopes.com/javascript-arrow-functions/ (15 min)
85

9-
### Here are resources that we like you to read as a preparation for the coming lecture:
10-
11-
Some nice resources about map, filter, reduce
12-
- :dizzy: [Fun fun functional](https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84) :dizzy: Check the first 3-4 videos.
13-
- https://flaviocopes.com/javascript-arrow-functions/
6+
![Studying](https://media.giphy.com/media/l0HlAgJTVaAPHEGdy/giphy.gif)
147

158
_Please go through the material and come to class prepared!_

JavaScript3/Week7/readme.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Learning Goals
22
- [ ] Map
3-
- [ ] reduce
4-
- [ ] filter
3+
- [ ] Reduce
4+
- [ ] Filter
55
- [ ] Arrow functions
66

77
# Relevant links

JavaScript3/Week8/homework.md

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
# Homework Week 8
22

3-
>[Here](https://github.com/HackYourFuture-CPH/JavaScript/blob/master/JavaScript3/Week8/README.md) you find the readings you have to complete before the ninth lecture.
4-
53
## Step 1: Closure
64

75
>Revise before attempting: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
@@ -47,35 +45,29 @@ We have an array with the numbers from 1 to 1000. Now we are interested in all n
4745
console.log("Amount of numbers divisible by 21: ",divisbleBy21.length);
4846
```
4947

50-
Your task is now, to implement a closure (a function factory), that generates functions which allow us to determine all numbers that are divisible by "WHAT EVER NUMBER".
51-
52-
>Hint: Use `map`, `filter` and `reduce`. Think about the sizes of your arrays and then choose whether you need `map`, `filter` or `reduce`
48+
## Part 1
49+
Your task is now, to implement a closure (a function factory), that generates functions which allow us to determine if a number is divisible by some other number. The return of the inner function will be a boolean.
5350

51+
So just like with our adder function we want to use it like this:
5452
```js
55-
let arr = [];
56-
for( let i=1; i<=1000;i++){
57-
arr.push(i);
58-
}
59-
console.log(arr);
60-
61-
// here please start your solution
62-
// using closures, functions and (map,filter,reduce)
63-
const divisibleFactory = function(z){
64-
65-
}
66-
67-
// apply your function
68-
// const divisbleByWHATEVERNUMBER = arr ... WHATEVERNUMBER ... ;
53+
const divisibilityCheckerFive = divisibilityChecker(3);
54+
console.log(divisibilityCheckerFive(2)) // logs out false
6955
```
7056

71-
Once you have the factory function above working well for 3, 10 and 21, create an array which uses this factory above to calculate the number of item in `arr` above which are divisible by numbers between 1-30 i.e. your array will contain 30 items and looks something like this:
72-
57+
## Part 2
58+
Create an array where the first element in that array is equal to the number of numbers (in ```arr```) that are divisible 1. The second element should be equal to the number of numbers that are divisible by 2. And so on. Use the divisibilityChecker function you created in part 1.
59+
This is how the resulting array should look:
7360
```js
7461
[1000, 500, 333, 250, 200, 166, 142, 125, 111, 100, 90, 83, 76, 71, 66, 62, 58, 55, 52, 50, 47, 45, 43, 41, 40, 38, 37, 35, 34, 33, 32]
7562

7663
// 1000 items are divisible by 1, 500 by 2 and son on...
7764
```
7865

66+
> Hint: Use `map`, `filter` and `reduce`. Think about the sizes of your arrays and then choose whether you need `map`, `filter` or `reduce`. A good old `forEach` would also be fine.
67+
68+
69+
![](https://media.giphy.com/media/jz0oM9Els8bHa/giphy.gif)
70+
7971
## Step 2: Continuing with data loading, processing and rendering
8072

8173
>Revise before attempting: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
@@ -88,8 +80,22 @@ Using [the movies json file from the previous exercise](https://gist.githubuserc
8880
1. Add 4 radio buttons for each tag + All tag (All, Good, Average, Bad) and filter the movies based on the tag selected.
8981
1. Display only the movies in the list which match the two filter criterion above.
9082
1. Display the average rating of the movies being filtered and displayed.
83+
1. **Extra task:** For every movie you render add a button somewhere that says "Get poster".
84+
When clicking this button it gets the poster for the movie using this api: http://www.omdbapi.com/. You first need to get an api key! See if you can figure out how it works by yourself. If not you are always welcome to ask :)
85+
86+
You could also add the actors from the movie. And if you wanna go really crazy add their portrait from this api: https://www.themoviedb.org
87+
88+
Remember to use the promises, map, filter and reduce!
89+
90+
## Step 3: Hand in Homework:
91+
Go over your homework one last time:
9192

92-
Remember to use the following to help with your code:
93+
- Does every file run without errors and with the correct results?
94+
- Have you used `const` and `let` and avoided `var`?
95+
- Do the variable, function and argument names you created follow the [Naming Conventions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md)?
96+
- Is your code well-formatted (see [Code Formatting](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md))?
9397

94-
1. Promises to simplify data loading, [covered in this lecture](./classwork/new-ajax.js).
95-
1. Filter, map, reduce functions + Arrow functions, [covered in last lecture](../Week7/classwork/demonstration.js).
98+
If you can answer yes to the above questions then you are ready to hand in the homework:
99+
* 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
100+
* Add your homework files in the Javascript/javascript3/week8 folder
101+
* To finish the homework post the link for your repo and the rendered index.html on your classes slack channel

JavaScript3/Week8/preparation.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
# Preparation
22

3-
Some nice resources about promises :ring:
4-
- [Googles post about Promises](https://developers.google.com/web/fundamentals/getting-started/primers/promises)
5-
- [A nice article from David Walsh](https://davidwalsh.name/promises)
6-
- [A real life example](https://github.com/mdn/js-examples/blob/master/promises-test/index.html)
7-
- [stackoverflow]http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript
3+
## Promises
4+
- [A cartoon explaining promises](https://kosamari.com/notes/the-promise-of-a-burger-party) (10 min)
5+
- [A nice article from David Walsh](https://davidwalsh.name/promises) (15 min)
86

9-
- [Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)
10-
- [Why closures are helpful with async code](http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript)
7+
## Closures
8+
- [Closures](https://tech.io/playgrounds/6516/closures-in-javascript-for-beginners) (10 min)
9+
- [Youtube video](https://www.youtube.com/watch?v=yiEeiMN2Khs) (4 min)
10+
- A VERY popular [StackOverflow article](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work) (10 min)
1111

12-
The last one about [promises](https://www.youtube.com/watch?v=WBupia9oidU)...
12+
![You can do it!](https://media.giphy.com/media/yoJC2K6rCzwNY2EngA/giphy.gif)

JavaScript3/Week8/readme.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
# Learning Goals
2-
- [ ] Rewriting data structures (in JSON)
32
- [ ] Closures
43
- [ ] Promises
54

JavaScript3/Week9/More-homework/MAKEME.md

Lines changed: 0 additions & 57 deletions
This file was deleted.

JavaScript3/Week9/More-homework/classwork-V2/users.html

Lines changed: 0 additions & 9 deletions
This file was deleted.

JavaScript3/Week9/More-homework/classwork-V2/users.js

Lines changed: 0 additions & 103 deletions
This file was deleted.

JavaScript3/Week9/More-homework/last-homework-V2/solution.html

Lines changed: 0 additions & 9 deletions
This file was deleted.

0 commit comments

Comments
 (0)