|
12 | 12 |
|
13 | 13 | ### JS |
14 | 14 |
|
15 | | - |
16 | | -1. Extend your site 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. |
| 15 | +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. |
17 | 16 |
|
18 | 17 | 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. |
19 | 18 |
|
20 | | -3. Make a function which takes a single argument. The function should make an XHR request to `http://www.omdbapi.com/?s=[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. |
21 | | - |
22 | | - Look at the [documentation of the API](http://www.omdbapi.com/) and see which other query parameters they support. Mess around with this to see how changing (or adding) parameters modifies your results. |
23 | | - |
24 | | - Use the code below to make the request (change it if you need to): |
25 | | - |
26 | | -```js |
27 | | -function loadMovies(){ |
28 | | - //This function keeps track of changes to the xhr request |
29 | | - function processRequest() { |
30 | | - console.log(xhr.readyState); |
31 | | - if (xhr.readyState == 4){ |
32 | | - console.log("xhr request DONE SON"); |
33 | | - console.log(xhr.response); |
34 | | - // Call a function which renders the response |
35 | | - } |
36 | | - }; |
37 | | - |
38 | | - console.log("retrieving movie data request"); |
39 | | - var requestURL = 'http://www.omdbapi.com/?s=dog'; |
40 | | - var xhr = new XMLHttpRequest(); |
41 | | - |
42 | | - //Build an XHR request and then send it. |
43 | | - //Read this for more info: https://www.kirupa.com/html5/making_http_requests_js.htm |
44 | | - xhr.open('GET', requestURL, true); |
45 | | - xhr.send(); |
46 | | - xhr.onreadystatechange = processRequest; |
47 | | -}; |
48 | | -``` |
| 19 | +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. |
49 | 20 |
|
| 21 | + 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. |
50 | 22 |
|
51 | 23 | 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. |
52 | 24 |
|
53 | 25 | 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. |
54 | 26 |
|
55 | | -6. If you have any questions, ask them on slack in the class 9 channel. We want to see more questions as both you and we can learn from them, also try to help each other! |
| 27 | +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! |
56 | 28 |
|
57 | 29 |
|
58 | 30 | __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! |
|
0 commit comments