[Make these assignments](https://github.com/HackYourFuture/Git/blob/master/Lecture-3.md)

- Finish last week's assignment

- Solve all your Git issues. DO NO CLOSE AN ISSUE WITHOUT AN EXPLANATION OR CODE COMMIT REFERENCING THAT ISSUE

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

- Add polling to your app so that it checks every minute or so if a new repo has been made and if it has, adds it to the DOM without reloading the page.

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

This week you will work on finishing your application so it's actually useful!!

[Read this](https://github.com/HackYourFuture/JavaScript/tree/master/Week8/README.md)

Make this

- Check if you have met all the requirements from the previous 2 weeks of homework

- Resolve your Github issues (DO NOT CLOSE AN ISSUE WITHOUT AN EXPLANATION OF BY REFERENCING IT FROM A COMMIT)

- Make sure you have implemented map, filter, reduce. If you lack inspiration, ask on Slack.

- Implement promises in your XHR

- Add polling to your SPA and make sure new info is loaded every 60 seconds. It's probably not a good idea to do a lot of requests every time so maybe just check if a user has new repos.

- Add a local data structure in which you ONLY store the info your app needs. So all the properties of your object should be used somewhere in your app. Don't reference the response of the XHR anymore, just reference your own data structure.

- Make sure you only have one request function that accepts a url parameter and a callback function

- Implement a loader icon like in [my codepen](https://codepen.io/Razpudding/pen/BRGqJw) for each xhr response the user has to wait for.

- Add correct HTML/CSS

If you get stuck, remember we have Slack and you can ask questions. On Slack there's also the list of repos of other students so you can check how they did it.

Some nice resources about promises :ring:

- [Googles post about Promises](https://developers.google.com/web/fundamentals/getting-started/primers/promises)

- [A nice article from David Walsh](https://davidwalsh.name/promises)

- [A real life example](https://github.com/mdn/js-examples/blob/master/promises-test/index.html)

- [Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)

http://conceptf1.blogspot.nl/2013/11/javascript-closures.html https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/ http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html https://medium.freecodecamp.com/5-javascript-bad-parts-that-are-fixed-in-es6-c7c45d44fd81

https://www.reddit.com/r/learnjavascript/comments/1v6n8p/closure_explain_likei_am_in_high_school/?st=ixsp0mbe&sh=5526d150 A VERY popular StackOverflow article: http://stackoverflow.com/questions/111102/how-do-javascript-closures-work

1. Let's continue to learn a little more about scope and Closures.

2. What will be the output of the following code - and more importantly - WHY?

for (var i = 0; i < 3; i++) {

setTimeout(function() { alert(i); }, 1000 + i);

}

3. Write a function that would allow you to do this:

var addSix = createBase(6);

addSix(10); // returns 16

addSix(21); // returns 27

4. You will need to create an HTML document out of the below snippet to run the below code. A hint - the code is syntactically correct but doesn't do what you would expect. Can you see why and fix it?

Don't cheat - but if you get stuck ... http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example

```html

<button id="btn-0">Button 1!</button>

<button id="btn-1">Button 2!</button>

<button id="btn-2">Button 3!</button>

<script type="text/javascript">

</script>

Rewrite to Async:

var sum = calculateSum(2, 6);

console.log(sum);

var results = $.getJSON('http://myapi.com');

showResults(results);

var sum = calculateSum(2, 6);

if (sum > 8) {

console.log('larger than 8');

}

var data = $.getJSON('http://myapi.com');

data = data.map(function (x) { return x * 8; });

writeDataToFile(data);

4. You will need to create an HTML document out of the below snippet to run the below code. A hint - the code is syntactically correct but doesn't do what you would expect. Can you see why and fix it?

TODO !!!

Choose two "GET" API endpoints from http://reqres.in

Use $.getJSON to load data from those two endpoints

Display the data on your web page.

It should not matter which endpoint is loaded first, the data should always look the same (you can add "?delay=" after the endpoint to simulate a delay).

• Create at least 1 issue (bug / feature / code improvement) on another students github repository. Do this in pairs.

• solve the issue proposed by another student in your github repo. More info [here](https://hackyourfuture.slack.com/files/michahell/F31BX1XT6/Merging_a_local_branch_into_master)