|
2 | 2 |
|
3 | 3 | >[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week5/README.md) you find the readings you have to complete before the fourth lecture. |
4 | 4 |
|
5 | | -### Git |
| 5 | +### Step 0 |
| 6 | +All share a video or a resource (this can be a drawing, article or a pod cast) that was helpful for you the last few weeks with learning JavaScript. Please share this in the channel of your class in Slack. Also write as small note about what the resource i about and why you think it's so helpful (you can share more than one if you like). |
6 | 7 |
|
7 | | -1. Create a branch called `MyBranch` in the repository `MyFirst`. |
8 | | - |
9 | | -2. Create the files `leaf1.txt`, `leaf2.txt`, `flower.txt` and `fruit.txt` and write some content in them. |
10 | | - |
11 | | -3. Create a corresponding remote tracking branch on GitHub and push this branch to the Github remote you just created. |
12 | | - |
13 | | -4. Merge `MyBranch` with the `master` branch |
14 | | - |
15 | | -### JS |
16 | | -We are going to continue our github-repo page from last week. |
17 | | - |
18 | | -1. For each repository, show (in the right column) who the contributers are. You will need to use the `contributors_url` for this. |
19 | | -2. Make all the repositories link their own page in Github. Use the value of the key: `name` to make this work (hint: Github urls always look like this https://api.github.com/repos/HackYourFuture/[repositoryName] where [repositoryName] would be replaced by the actual `name` of the repository, for example `CommandLine`). Make sure the link opens in a new tab. |
20 | | - |
21 | | ->TODO |
22 | | -
|
23 | | -<!-- 1. Extend the `hyf-movies` app with an input element. This is so the user will be able to type in text which will be later used to search the movie database for corresponding movies. |
24 | | -
|
25 | | -2. Also place a button near the input element. Capture the click even for this button and couple it to a function which grabs the user input from the text field and which initially logs the user input. |
26 | | -
|
27 | | -3. Make a function which takes a single argument. The function should make an XHR request to `localhost:3000/movies?q=[SEARCH_TERM]` where the search term will be the argument. This argument will be the input the user has given you, so make sure that when the user clicks the button you call this function with the argument. |
28 | | -
|
29 | | - Look at the [documentation of the API](https://github.com/typicode/json-server) and see which other query parameters `json-server` support. Mess around with this to see how changing (or adding) parameters modifies your results. |
30 | | -
|
31 | | -4. Use the code from your previous assignment to render the new results. If you have already displayed previous results make sure you clear them (hint: `someElement.removeChild(someChild)`). Make sure you style these results, use a style sheet for this! Also make sure you do not use JavaScript to construct static elements. This way you can handle the positioning of elements easier. |
32 | | -
|
33 | | -5. Change the layout of the page so that you only show a list of movie titles on the left side of your page. When the user hovers over a link (or maybe with a click) you want to show the additional information about the movie (poster, year etc.) on the right column. |
34 | | -
|
35 | | -6. If you have any questions, ask them on slack in the class 10 channel. We want to see more questions as both you and we can learn from them, also try to help each other! |
36 | | -
|
37 | | -
|
38 | | -__Bonus__: Write a function takes this array `['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c']` and returns an array which only has unique values in it (so it removes the duplicate ones). Make it a 'smart' algorithm that could do it for every array (only strings/number). Try to make it as fast as possible! |
39 | | - --> |
40 | | - |
41 | | -### More homework |
| 8 | +### Step 1 |
42 | 9 |
|
43 | 10 | 1. We learned a little bit about callbacks in JS. A callback is simply a function passed to another function that gets executed (run) after a potentially long running operation has completed. There is another function called `setTimeout` that will wait a specified period of time and then execute a function. For example: |
44 | 11 |
|
@@ -115,12 +82,46 @@ function f2(val) { |
115 | 82 | f2(y); |
116 | 83 | console.log(y); |
117 | 84 | ``` |
118 | | -If you are confused please run the code and then consult the Google for "javascript pass by value pass by reference" |
| 85 | +If you are confused please run the code and then consult the Google for "javaScript pass by value pass by reference" |
| 86 | +
|
| 87 | +### Step 3: Feedback |
| 88 | +Give feedback on step 2 of the homework to one of your fellow classmates. |
| 89 | +
|
| 90 | +### Step 4: continue your Custom challenge :boom: |
| 91 | +
|
| 92 | +We are going to continue our github-repo page from last week. |
| 93 | +
|
| 94 | +1. For each repository, show (in the right column) who the contributers are. You will need to use the `contributors_url` for this. |
| 95 | +2. Make all the repositories link their own page in Github. Use the value of the key: `name` to make this work (hint: Github urls always look like this https://api.github.com/repos/HackYourFuture/[repositoryName] where [repositoryName] would be replaced by the actual `name` of the repository, for example `CommandLine`). Make sure the link opens in a new tab. |
| 96 | +
|
| 97 | +>TODO |
| 98 | +
|
| 99 | +<!-- 1. Extend the `hyf-movies` app with an input element. This is so the user will be able to type in text which will be later used to search the movie database for corresponding movies. |
| 100 | +
|
| 101 | +2. Also place a button near the input element. Capture the click even for this button and couple it to a function which grabs the user input from the text field and which initially logs the user input. |
| 102 | +
|
| 103 | +3. Make a function which takes a single argument. The function should make an XHR request to `localhost:3000/movies?q=[SEARCH_TERM]` where the search term will be the argument. This argument will be the input the user has given you, so make sure that when the user clicks the button you call this function with the argument. |
| 104 | +
|
| 105 | + Look at the [documentation of the API](https://github.com/typicode/json-server) and see which other query parameters `json-server` support. Mess around with this to see how changing (or adding) parameters modifies your results. |
| 106 | +
|
| 107 | +4. Use the code from your previous assignment to render the new results. If you have already displayed previous results make sure you clear them (hint: `someElement.removeChild(someChild)`). Make sure you style these results, use a style sheet for this! Also make sure you do not use JavaScript to construct static elements. This way you can handle the positioning of elements easier. |
| 108 | +
|
| 109 | +5. Change the layout of the page so that you only show a list of movie titles on the left side of your page. When the user hovers over a link (or maybe with a click) you want to show the additional information about the movie (poster, year etc.) on the right column. |
| 110 | +
|
| 111 | +6. If you have any questions, ask them on slack in the class 10 channel. We want to see more questions as both you and we can learn from them, also try to help each other! |
| 112 | +
|
| 113 | +
|
| 114 | +__Bonus__: Write a function takes this array `['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c']` and returns an array which only has unique values in it (so it removes the duplicate ones). Make it a 'smart' algorithm that could do it for every array (only strings/number). Try to make it as fast as possible! |
| 115 | + --> |
| 116 | +
|
119 | 117 |
|
120 | 118 | ``` |
121 | 119 | How to hand in your homework: |
122 | | -• Upload your homework in your "hyf-javascript2" Github repository. Make sure to create a new folder "week2" first. |
123 | | -• Upload your homework files inside the week2 folder and write a description for this “commit”. |
| 120 | +• Clone your existing "hyf-javascript2" Github repository. |
| 121 | +• Create a new folder "week2" USING THE COMMAND LINE |
| 122 | +• Save your homework files inside this folder. |
| 123 | +• When you are done with your homework use add/commit and push to upload your homework. |
| 124 | +• Write a description for your “commit”. |
124 | 125 | • Your hyf-javascript2/week2 should now contain all your homework files. |
125 | 126 | Place the link to your repository folder in Trello. |
126 | 127 | ``` |
|
0 commit comments