Skip to content

Commit c11ebca

Browse files
committed
Updated MAKEME Week5 for class 10
1 parent 8d81a33 commit c11ebca

1 file changed

Lines changed: 4 additions & 32 deletions

File tree

Week5/MAKEME.md

Lines changed: 4 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -12,47 +12,19 @@
1212

1313
### JS
1414

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.
1716

1817
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.
1918

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.
4920

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.
5022

5123
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.
5224

5325
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.
5426

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!
5628

5729

5830
__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

Comments
 (0)