Topics discussed this week:
• Object Oriented Programming
• this
• call
• apply
• bind
• Code flow (order of execution)
• Async VS Sync
Here you find the readings you have to complete before the eighth lecture.
Deadline Monday
Give feedback on the SPA (Github API) and git branching homework of one of you fellow students. Please provide the feedback in an issue.
- Solve all your Git issues. DO NO CLOSE AN ISSUE WITHOUT AN EXPLANATION OR CODE COMMIT REFERENCING THAT ISSUE.
- Fix the issues from the last week and make sure you explain how you fixed the issue in a comment (or commit message)
Deadline Saturday
Let's practice working with Objects and Arrays. Go to FreeCodeCamp and complete all challenges under "Object Oriented and Functional Programming" and the first four challenges under "Basic Algorithm Scripting", up until 'Find the longest word in a string.'
- Rewrite the code below to Async:
1.
let sum = calculateSum(2, 6);
console.log(sum);
2.
let results = $.getJSON('http://myapi.com');
showResults(results);
3.
let sum = calculateSum(2, 6);
if (sum > 8) {
console.log('larger than 8');
}
4.
let data = $.getJSON('http://myapi.com');
data = data.map(function (x) { return x * 8; });
writeDataToFile(data);Deadline Saturday
Make a website that fetches (= to get) data asynchronously.
-
Create a new website with external js file
-
Add a button (e.g. 'click me') that when clicked
console.logs'you clicked me!' -
Create a function that fetches from The Github API. For example from [this page] (https://api.github.com/orgs/HackYourFuture/repos) (the one we used last week). For help on this check this SO post
-
Display the data that you get from the Github API on your web page.
-
Now link the two together: When you click the button -> get the data from the Github API and display it on your website
-
Make all the repositories link their own page in Github. Use the value of the key:
nameto make this work (hint: Github urls always look like this https://api.github.com/repos/HackYourFuture/[repositoryName] where [repositoryName] would be replaced by the actualnameof the repository, for exampleCommandLine). Make sure the link opens in a new tab. -
BONUS: if you look at this:
https://api.github.com/repos/HackYourFuture/CommandLineYou can see CommandLine in the URL. These are called "query parameters" and let us specify in detail what we want from the API. Play around with this. For example you can make two buttons that either get data for a specific repository, JavaScript or Node.js. Or go even more crazy and make users type in a search box 'JavaScript' and then send that to the API by changing the repository.
Deadline Sunday morning
Go trough the reading material in the README.md to prepare for your next class
BONUS : Code Kata Race
If you haven't already join our clan: "Hack Your Future" in codewars
Solve the following problems:
Hints
- Hint for Q1: split your code into two parts, one part for the case that one of the two strings has an extra letter at the start or the end but is otherwise identical & one part for the case that the strings are the same length but one character is different in one of the strings
- Also for Q1 this function on strings might be useful: JavaScript String slice() method
- Also potentially useful: JavaScript String charAt() Method
- Hint for Q2 Also there are no sample tests, you need to use submit
Remember the person with the most kata points gets a prize from Gijs (and you can do exercises on this website without us assigning them - anything kyu 7 or kyu 8 you can try to do - kyu 6 or lower is probably too hard) -->
-MORE BONUS 💥
(watch in this order)
- Stacks/Queues (5 mins)
- JS Event Loops (26 mins, watch this one twice or until you understand it)
Create a new repository "hyf-javascript3". Also create a new folder "week1" inside this repository. Upload your homework files inside the week1 folder and write a description for this “commit”. Your hyf-javascript3/week1 should now contain the files of your homework. Place the link to your repository folder in Trello.