From b437373e5404f09c2271cc1b005b70b8f544a428 Mon Sep 17 00:00:00 2001 From: Kelley van Evert Date: Sun, 26 Jan 2020 11:24:18 +0100 Subject: [PATCH 01/24] Fixing style guide intro text --- README.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 34103e174..80355b424 100644 --- a/README.md +++ b/README.md @@ -37,19 +37,17 @@ If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯ ## Before you start -In the following weeks we will be using a `styleguide` to help you write _"clean code"_. What is a styleguide? Simply put, it's a set of design standards put in one collection. Companies create and use them to define their public identity (their "brand"). Watch the following to get a better idea: +In the following weeks we will be using a "style guide" to help you write _"clean code"_. Because code is not only meant to be run by computers, but also to be read by humans (your colleagues, and the future version of you), it's best to make your code good. If your code is readable and nicely formatted, you're doing your colleages (and future you) a great server. The idea of a "style guide" comes from visual design, where companies often have a "visual style". For example, watch the following video to get an idea of this: - [Creating Your Company's Style Guide](https://www.youtube.com/watch?v=gv_wrrY70E0) -A styleguide is made by designers. In the case of website design, this styleguide is then handed over to developers to use when styling the frontend. - -The styleguide we'll be using is the one from Airbnb: +Similarl to how designers have style guides for their design work, programmers often have "programming style guides". This is set of rules to follow when writing/formatting your code. The styleguide we'll be using is the one from Airbnb: - [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) While you do not need to read this guide in detail, it is recommended that you look at sections 1-8, 12-13, 15-21 and 23. -The required packages you need to install in order to write code according to the styleguide are the following: +We also have tools that can automatically check whether your code is correctly formatted according to a style guide. These tools are called "linters". We will be using the JavaScript linter called "ESLint". The following packages are already added to this repository's `package.json`: ```json "eslint" @@ -60,7 +58,7 @@ The required packages you need to install in order to write code according to th "prettier" ``` -They are already in this repository's `package.json` so all you have to do now to prepare is to execute the following command in your command line: +All you have to do now to prepare is to execute the following command in your command line: ```md npm install From 2e5759adad2fe8838878085cac572ae54fbf79d3 Mon Sep 17 00:00:00 2001 From: Noer Paanakker Date: Wed, 11 Mar 2020 11:40:13 +0100 Subject: [PATCH 02/24] Updated hand in homework guide --- hand-in-homework-guide.md | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/hand-in-homework-guide.md b/hand-in-homework-guide.md index e8629dff6..35070caec 100644 --- a/hand-in-homework-guide.md +++ b/hand-in-homework-guide.md @@ -10,30 +10,26 @@ Follow the walkthrough to learn how to submit your homework for each week: ONE TIME ONLY (START OF EVERY MODULE) -1. Create a [fork](https://help.github.com/en/articles/fork-a-repo) of the original module repository. You do this by using the `fork` option on the top right -2. Navigate to the URL of the cloned repository (it should be in your personal GitHub account, under "repositories") +1. Create a [fork](https://help.github.com/en/articles/fork-a-repo) of the following repository: [HackYourHomework/JavaScript3](https://www.github.com/hackyourhomework/javascript3). You do this by using the `fork` option on the top right +2. Navigate to the URL of the forked repository (it should be in your personal GitHub account, under "repositories", under the name `/JavaScript3`) 3. Clone the repository, using SSH, to your local machine. You can do this by typing in `git clone ` in the command line 4. On your local machine, navigate to the folder using the command line -5. Make sure you've cloned it correctly by running `git status` from the command line. +5. Make sure you've cloned it correctly by running `git status` and `git remote -v` from the command line EVERY WEEK 1. Create a new branch for each week you have homework. For example, for the week 1 homework for JavaScript3 create a branch called `week-1-homework-YOUR_NAME` -2. Inside the correct week folder, create another folder called `homework`. Make your homework files in there, while on the correct branch -3. Once you're finished, add and commit everything. Make the commit message meaningful, for example `finished project for homework week1` -4. Push the branch to your forked repository -5. On the GitHub page of your forked repository, click on the `create pull request` button. Make sure the `base repository` is the original, on branch master +2. Inside the week folder, create another folder called `homework`. Create your homework files in there, while on the correct branch +3. Once you're finished, `add` and `commit` everything. Make the commit message meaningful, for example `finished project for homework week1` +4. Push the branch to your forked repository (`/JavaScript3`) +5. On the GitHub page of this repository, click on the `create pull request` button. Make sure the `base repository` is `HackYourHomework/JavaScript3`, on branch master 6. Give the pull request a title in the following format: ```markdown Homework week 1 ``` -7. Submit the pull request from your forked repository branch into the `master` branch of the original repository +7. Submit the pull request from your forked repository branch into the `master` branch of the original repository (`HackYourHomework/JavaScript3`) 8. Do a little victory dance because you did it! Good job! -For a visual walkthrough the steps please watch the following video one of our teachers, Unmesh Joshi, has made: - -- [GitHub Homework flow](https://www.youtube.com/watch?v=2qJPAVTiKPE) - If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack! From 7ce55f80de3524ccfc71ee07f9df721b961a852c Mon Sep 17 00:00:00 2001 From: Noer Date: Tue, 24 Mar 2020 13:15:07 +0100 Subject: [PATCH 03/24] Update test.md --- test.md | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/test.md b/test.md index 1afa49ec8..1ef2d3b98 100644 --- a/test.md +++ b/test.md @@ -37,14 +37,14 @@ Advice on how to optimally prepare: ## During the test Advise on how to make a test: -- Look for low hanging fruit. Which of the assignments is easiest for you to do? Tackle that one first. -- When writing your code, write small chunks at a time, testing each time before continuing. Use temporary console.log statements to show intermediate results (remove when no longer needed). Don't continue until the code written sofar is working correctly. If you write a whole bunch of code without intermediate testing it becomes difficult to pinpoint where issues occur. -- If you get stuck in an assignment, move on to the next one. You can always come back later if time permits. -- When writing code for the browser, always open the Chrome Developer Tools. Watch out for error messages in the browser console. Inspect the network tab to examine the data returned from a remote API. -- Don't over-deliver. If styling is not required by the assignment, skip it. If time permits, you can do it later. The same goes for handling fetch errors. Focus on delivering a minimum working version that meets the requirement. Ticking off a working version again reduces your stress level. Come back later, if time permits, to embellish your solutions. -- Don't use Google as a replacement for common sense. -- After finishing an assignment, read the question again to make sure you actually gave an answer to the question. -- Before handing in the test, read it all over again to pick out the small mistakes. +- **Look for low hanging fruit**. Which of the assignments is easiest for you to do? Tackle that one first. +- **When writing your code, write small chunks at a time, testing each time before continuing**. Use temporary console.log statements to show intermediate results (remove when no longer needed). Don't continue until the code written sofar is working correctly. If you write a whole bunch of code without intermediate testing it becomes difficult to pinpoint where issues occur. +- **If you get stuck in an assignment, move on** to the next one. You can always come back later if time permits. +- When writing code for the browser, **always open the Chrome Developer Tools**. Watch out for error messages in the browser console. Inspect the network tab to examine the data returned from a remote API. +- **Don't over-deliver**. If styling is not required by the assignment, skip it. If time permits, you can do it later. The same goes for handling fetch errors. Focus on delivering a minimum working version that meets the requirement. Ticking off a working version again reduces your stress level. Come back later, if time permits, to embellish your solutions. +- **Don't use Google as a replacement for common sense.** +- After finishing an assignment, read the question again to **make sure you actually gave an answer to the question.** +- Before handing in the test, read it all over again to **pick out the small mistakes.** ## Sample questions @@ -53,6 +53,5 @@ Advise on how to make a test: 2. Make an API call using the Fetch API or the regular XMLHttpRequest (whichever one you're more comfortable with). Use the following API: https://reqres.in/api/users Parse the response and then display the "first_name" and "last_name" of the first three users within the DOM (inside an unordered list) - If there’s anything unclear please let us know. Also, if any of you need additional support, now is the moment to let us know as we could pair you up with someone to answer any questions you may have. From 6c8db60473512a15a80b4d54f0158228f4ee5447 Mon Sep 17 00:00:00 2001 From: Andrej Date: Mon, 30 Mar 2020 22:25:56 +0200 Subject: [PATCH 04/24] Javascript3 - Week2 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Based on feedback from lecture reverted some changes that I made simplified examples added a video link for promises that is super helpful for students added exercise simplified and trimmed down this part, especially confusing part with classes 😤 --- Week2/LESSONPLAN.md | 302 +++++++++++++++++++------------------------- 1 file changed, 127 insertions(+), 175 deletions(-) diff --git a/Week2/LESSONPLAN.md b/Week2/LESSONPLAN.md index 6efdf5ea6..59587c5f4 100644 --- a/Week2/LESSONPLAN.md +++ b/Week2/LESSONPLAN.md @@ -15,27 +15,30 @@ FIRST HALF (12.00 - 13.30) ## 1. Promises ### Explanation +- JS versions https://www.w3schools.com/js/js_versions.asp + - the javascript language evolves, new things are added and some thing become obsolete - It's a way to introduce asynchronicity to your application - Makes asynchronous code read like it's synchronous -### Example + In the examples `setTimeout` is used to illustrate asynchronous code. In the real world there will be some code doing useful work here, for example `fetch`. **Callback** ```javascript +let didFinishHomework = true; let doHomeWork = function (cb) { setTimeout(function () { - if ( true ) - cb(); // homework done + if ( didFinishHomework ) + cb(null); // call callback function with NO error and no data else - cb('homework not done, too lazy'); + cb(new Error('homework not done, too lazy')); // call callback function with error }, 1000); } doHomeWork(function (err) { if ( err ) - console.warn(err); + console.warn(err.message); else console.log('home work is done now'); }) @@ -43,12 +46,13 @@ doHomeWork(function (err) { **Promise** ```javascript +let didFinishHomework = true; let promiseToDoHomeWork = new Promise(function (resolve, reject) { setTimeout(function () { - if ( true ) - resolve(); // homework done + if ( didFinishHomework ) + resolve(); // goto then else - reject('homework not done, too lazy'); + reject(new Error('homework not done, too lazy')); // goto catch and pass the error }, 1000); }); @@ -57,33 +61,41 @@ promiseToDoHomeWork .catch(function (err) { console.warn(err); }) ``` + +**!!! Students should watch this video !!!** +- https://youtu.be/RvYYCGs45L4 + + +### Example + #### Nested callback/promises example ```javascript let attendClass = function (cb) { setTimeout(function () { if ( true ) - cb(null, 'I attend the class'); + cb(null, 'I attend the class'); // call the callback function with no Error and some data else - cb('class not attended, stayed home'); + cb(new Error('class not attended, stayed home')); // call the callback function with an Error }, 1000); } +let didFinishHomework = true; let doTheHomeWork = function (message, cb) { setTimeout(function () { - if ( true ) - cb(null, message + ' then I did the homework'); + if ( didFinishHomework ) + cb(null, message + ' then I did the homework'); // call the callback function with no Error and some data else - cb('homework not done, was lazy'); + cb(new Error('homework not done, was lazy')); // call the callback function with an Error }, 1000); } let submitHomeWork = function (message, cb) { setTimeout(function () { if ( true ) - cb(null, message + ' so I submit my homework'); + cb(null, message + ' so I submit my homework'); // call the callback function with no Error and some data else - cb('homework not submited, github is down'); + cb(new Error('homework not submited, github is down')); // call the callback function with an Error }, 1000); } @@ -91,15 +103,15 @@ let submitHomeWork = function (message, cb) { attendClass(function (err, data) { if ( err ) - console.warn(err); + console.warn(err.message); else doTheHomeWork(data, function (err1, data1) { if ( err1 ) - console.warn(err1); + console.warn(err1.message); else submitHomeWork(data1, function (err2, data2) { if ( err2 ) - console.warn(err2); + console.warn(err2.message); else console.log(data2) }); @@ -107,7 +119,7 @@ attendClass(function (err, data) { }) ``` Mention how this nested structure is hard to understand and read. Multiple variables with similar names and error handling is all over the place. -Simulate an error in doTheHomeWork by replacing `if ( true )` with `if ( false )`. +Simulate an error in doTheHomeWork by setting `didFinishHomework = false` and run the example again ```javascript @@ -115,20 +127,21 @@ let attendClass = function () { return new Promise(function (resolve, reject) { setTimeout(function () { if ( true ) - resolve('I attend the class'); + resolve('I attend the class'); // goto then and pass the data else - reject('class not attended, stayed home'); + reject(new Error('class not attended, stayed home')); // goto catch and pass the error }, 1000); }); } +let didFinishHomework = true; let doTheHomeWork = function (message) { return new Promise(function (resolve, reject) { setTimeout(function () { if ( true ) - resolve(message + ' then I did the homework'); + resolve(message + ' then I did the homework'); // goto then and pass the data else - reject('homework not done, was lazy'); + reject(new Error('homework not done, was lazy')); // goto catch and pass the error }, 1000); }); } @@ -137,9 +150,9 @@ let submitHomeWork = function (message) { return new Promise(function (resolve, reject) { setTimeout(function () { if ( true ) - resolve(message + ' so I submit my homework'); + resolve(message + ' so I submit my homework'); // goto then and pass the data else - reject('homework not submited, github is down'); + reject(new Error('homework not submited, github is down')); // goto catch and pass the error }, 1000);; }); } @@ -154,24 +167,28 @@ attendClass() .then(function (result) { console.log(result); }) - .catch(function (error) { - console.warn(error); + .catch(function (error) { // catches all errors + console.warn(error.message); }); ``` -Simulate an error in doTheHomeWork by replacing `if ( true )` with `if ( false )` and run the example again. +Simulate an error in doTheHomeWork by setting `didFinishHomework = false` and run the example again. - Promise.all +Imagine that you are cleaning your house. If you are going to to it alone then it will take you the whole day. However if you ask your friend to help then you can be done in half the time. + ```javascript -Promise.all([attendClass(), doTheHomeWork(), submitHomework()]).then(function ([res1, res2, res3]) { console.log('all finished') }); +Promise.all([cleanKitchen("Me"), cleanBathroom("friend")]).then(function ([res1, res2]) { console.log('all finished') }); ``` - Promise.race +Sometimes I get really hungry. Then I want to eat as soon as possible. So I order a pizza. But I never know how long it will take for the pizza to arrive. And I am really hungry. So I start frying some potatotes. When at one of them is ready either the pizza has arrived or the frites are done then I will eat and I do not have to wait for the other one. + ```javascript -Promise.race([attendClass(), doTheHomeWork(), submitHomework()]).then(function (result) { console.log('one of them finished') }); +Promise.race([fryPotatoes(), orderPizza()]).then(function (food) { console.log('I am eating: '+food) }); ``` ### Exercise @@ -193,10 +210,10 @@ function fetchResourceAsCallback(url, cb) { const response = JSON.parse(this.response); if (response.code >= 400) { // error - cb("Failed to get because:"+response); + cb(new Error("Failed to get because:"+response));/´// call callback function with an error } else { //success - cb(null, response); + cb(null, response); // call callback function with NO error and pass the response } }); } @@ -204,7 +221,7 @@ function fetchResourceAsCallback(url, cb) { fetchResourceAsCallback(WEATHER_URL, function (err, data) { if ( err ) - console.warn(err); + console.warn(err.message); else console.log(data); } @@ -214,11 +231,12 @@ function fetchResourceAsPromise(url) { // your code goes in here } -fetchResourceAsPromise(WEATHER_URL).then(function (result) { +fetchResourceAsPromise(WEATHER_URL) +.then(function (result) { console.log(result); }) .catch(function (err) { - console.warn(err); + console.warn(err.message); }); } @@ -306,205 +324,139 @@ SECOND HALF (14.00 - 16.00) - By default, “this” refers to global object which is `global` in case of NodeJS and `window` object in case of browser ### Example -#### “this” refers to global object -```javascript -// Immediately Invoked Function Expression (IIFE) -(function () { - // First Example - function foo() { - console.log("Simple function call"); - console.log(this === window); - } - -foo(); //prints true on console -console.log(this === window) //Prints true on console. - -})(); -``` - -As you see in the example, the `foo()` function is called based on `window`, this makes the default `this` inside this `foo` function get the value `window` - -> Note: we say a function is called based on window when there's no object calling it, like `obj.foo()`, but calling `foo()` acts if it was `window.foo()` - -> Note: If `strict mode` is enabled for any function then the value of “this” will be “undefined” as in strict mode, global object refers to undefined in place of windows object. - -``` -function foo() { - 'use strict'; - console.log("Simple function call") - console.log(this === window); -} - -foo(); //prints false on console as in “strict mode” value of “this” in global execution context is undefined. -``` #### this refers to new instance (constructors) ```javascript -function Person(fn, ln) { - this.first_name = fn; - this.last_name = ln; - - this.displayName = function () { - console.log(`Name: ${this.first_name} ${this.last_name}`); - } +function logColor() { + // this inside the function refers to the calling javascript object + console.log('This refers to: ',this); + console.log('Color of this is: '+this.color); } +let dog = { age: 5, color: 'brown', logColor: logColor}; +let car = { model: 'bmw', color: 'orange', logColor: logColor }; -let person = new Person("John", "Reed"); -person.displayName(); // Prints Name: John Reed -let person2 = new Person("Paul", "Adams"); -person2.displayName(); // Prints Name: Paul Adams +console.log('log color called with dog') +dog.logColor(); +console.log('log color called with car') +car.logColor(); ``` - In Javascript, property of an object can be a method or a simple value. - When an Object’s method is invoked then “this” refers to the object which contains the method being invoked. -```javascript - -function foo() { - 'use strict'; - console.log("Simple function call") - console.log(this === window); -} -let user = { - count: 10, - foo: foo, - foo1: function () { - console.log(this === window); - } +#### “this” refers to global object +```javascript +function logColor() { + // this inside the function refers to the calling javascript object + console.log('This refers to: ',this); + console.log('Color of this is: '+this.color); } -user.foo() // Prints false because now “this” refers to user object instead of global object. -let fun1 = user.foo1; -fun1() // Prints true as this method is invoked as a simple function. -user.foo1() // Prints false on console as foo1 is invoked as a object’s method +console.log('log color called with no object') +logColor(); // no calling object so "this" refers to window by default ``` - > Note: the value of “this” depends on how a method is being invoked as well. #### “this” with call, apply methods - These methods can be used to set custom value of `this` to the execution context of function, also they can pass arguments/parameters to the function -``` -function Person(fn, ln) { - this.first_name = fn; - this.last_name = ln; - - this.displayName = function (prefix) { - console.log(`Name: ${prefix} ${this.first_name} ${this.last_name}`); - } +```javascript +function logColor() { + // this inside the function refers to the calling javascript object + console.log('This refers to: ',this); + console.log('Color of this is: '+this.color); } - -let person = new Person("John", "Reed"); -person.displayName(); // Prints Name: John Reed -let person2 = new Person("Paul", "Adams"); -person2.displayName(); // Prints Name: Paul Adams - -person.displayName.call(person2, 'Mr'); // Here we are setting value of this to be person2 object -person.displayName.call(person2, ['Mr']); // Here we are setting value of this to be person2 object - +let cat = { likes: 'milk', color: 'white'}; +logColor.call(cat); // calls the logColor function with cat as "this" ``` #### “this” with bind method `bind` only create a copy of the function with the binded `this` inside without calling the function. ``` -function Person(fn, ln) { - this.first_name = fn; - this.last_name = ln; - - this.displayName = function () { - console.log(`Name: ${this.first_name} ${this.last_name}`); - } +function callAfterOneSecond(cb) { + setTimeout(function () { + cb(); + }, 1000); } +function logColor() { + // this inside the function refers to the calling javascript object + console.log('This refers to: ',this); + console.log('Color of this is: '+this.color); +} +let cat = { likes: 'milk', color: 'white'}; +let boundLogColor = logColor.bind(cat); // returns a function that can be executed later +console.log(boundLogColor); +// a few lines later +boundLogColor(); // executes logColor with cat as "this" -let person = new Person("John", "Reed"); -person.displayName(); // Prints Name: John Reed -let person2 = new Person("Paul", "Adams"); -person2.displayName(); // Prints Name: Paul Adams - -let person2Display = person.displayName.bind(person2); // Creates new function with value of “this” equals to person2 object -person2Display(); // Prints Name: Paul Adams +// callAfterOneSecond(boundLogColor); ``` -### Excercise -### Essence -## 4. Arrow functions and JS versions +> Note: If `strict mode` is enabled for any function then the value of “this” will be “undefined” as in strict mode, global object refers to undefined in place of windows object. -### Explanation -- JS versions https://www.w3schools.com/js/js_versions.asp -- Arrow functions can’t be used as constructors as other functions can. -- If you attempt to use new with an arrow function, it will throw an error. -- To create class-like objects in JavaScript, you should use the new ES6 classes instead +``` +function foo() { + 'use strict'; + console.log("Simple function call") + console.log(this === window); +} -The this keyword works differently in arrow functions. +foo(); //prints false on console as in “strict mode” value of “this” in global execution context is undefined. +``` +#### “this” in arrow functions - The `this` value inside the arrow function gets binded and calculated and assigned based on its wrapper/container/parent `this` value. - The methods call(), apply(), and bind() will not change the value of this in arrow functions -### Example -```javascript -// ES5 -var multiplyES5 = function (x, y) { - return x * y; -}; -// ES6 -const multiplyES6 = (x, y) => { return x * y }; -``` -#### “this” with fat arrow function -```javascript -function Person(fn, ln) { - this.first_name = fn; - this.last_name = ln; +Students will learn mroe about this when learning about classes in javascript. - this.displayName = () => { - console.log(this === window); - console.log(`Name: ${this.first_name} ${this.last_name}`); - } -} -let person1 = new Person('Nouran', 'Mhmoud'); -person1.displayName(); // this doesn't equal window, because it gets `this` that is inside Person() constructor function. -``` +### Excercise +In this excercise, let the students guess the result and then go line by line as if you were an interpreter and execute the code. Or use the debugger tools on devtools to execute line by line. -In the following example, the foo1() gets the `window` as `this` value, because on interpretation time, the interpreter assign the `this` immediately based on the surrounding execution context which is `window` in the case of simple literal object. ```javascript let user = { - count: 10, - foo1: () => { - console.log(this === window); + a: 2, + b: 3, + print: function () { + console.log(multiply(this.a, this.b)); } } - -let user1 = user.foo1() // this equals window +user.a = 5; +user.print(); +user.b = 10; +function multiply(p, q) { + return p * q; +} ``` -### Excercise -In this excercise, let the students guess the result and then go line by line as if you were an interpreter and execute the code. Or use the debugger tools on devtools to execute line by line. +Variant two (if students find variant one too easy) ```javascript -function multiply(p, q, callback) { - callback(p * q); -} - let user = { a: 2, b: 3, - findMultiply: function () { + print: function () { multiply(this.a, this.b, function (total) { console.log(total); - console.log(this === window); + console.log(this.a * this.b); }) } } - -user.findMultiply(); -//Prints 6 -//Prints true +user.a = 5; +user.print() +user.b = 10; +function multiply(p, q, callback) { + callback(p * q); +} ``` + ### Essence +this is special keyword in javascript. this refers to different things depending on how a function is called. From 855a9b1097da4e48b784227e4ece91bfd3b7f165 Mon Sep 17 00:00:00 2001 From: Chris Owen Date: Mon, 27 Apr 2020 16:16:22 +0100 Subject: [PATCH 05/24] Update MAKEME.md --- Week1/MAKEME.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 7b3cb47b8..9dfd4ce98 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -32,10 +32,10 @@ Write a function that makes an API call to `https://www.randomuser.me/api` Who knew programmers could be funny? -Write an function that makes an API call to `https://xkcd.com/info.0.json` +Write an function that makes an API call to `https://xkcd.now.sh/?comic=latest` - Inside the same file write two programs: one with `XMLHttpRequest`, and the other with `axios` -- Each function should make an API call to the given endpoint: `https://xkcd.com/info.0.json` +- Each function should make an API call to the given endpoint: `https://xkcd.now.sh/?comic=latest` - Log the received data to the console - Render the `img` property into an `` tag in the DOM - Incorporate error handling From b3462015b9707ce6dc6d84d6bc2bf2a6b0990e49 Mon Sep 17 00:00:00 2001 From: Noer Paanakker Date: Tue, 19 May 2020 09:52:57 +0200 Subject: [PATCH 06/24] adjusted content test readme --- test.md | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/test.md b/test.md index 1ef2d3b98..49ce67e2c 100644 --- a/test.md +++ b/test.md @@ -3,19 +3,25 @@ You’ll be doing a final JavaScript test. It will be about all the JavaScript you’ve learned, from JavaScript 1 to JavaScript 3. ## Practical information -- The test will start at **10.30 until 11.30**. The door will open at 10.15. **Be on time!** -- It will be done online and you can use google, so please bring your laptop. + +- The test will last **2 hours**. +- It will be done on the computer. - You can’t use your old code. -- There will be 5 or 6 questions. +- There will be 6 or 7 questions. ## Purpose of the test + The purpose of this exam is to test your comprehension of JavaScript + - The goal for us is to know how solid your knowledge is and if you need any extra assistance throughout the program. - The goal for you is to test how well enough you master the material so far. + Like the homework you will get feedback and are expected to improve upon your weak points. ## Test material + The test will be about all main JavaScript concepts we have discussed for the past weeks of JS. The following are the most important that will be tested: + - `Functions & Variables` - `Scope` - `Loops` @@ -28,7 +34,9 @@ The test will be about all main JavaScript concepts we have discussed for the pa - `Try…catch` ## Preparation + Advice on how to optimally prepare: + - Find out 2 things about each concepts listed above: (1) how does the basic structure look and (2) what is the most common use case. - Ask questions through Slack to your teachers and/or your classmates. - Practice for understanding (why something is the case), NOT just for repetition shake (and hoping ‘you will understand it one day’). @@ -36,14 +44,16 @@ Advice on how to optimally prepare: - After you prepared try to make the sample questions that are in this file. ## During the test + Advise on how to make a test: -- **Look for low hanging fruit**. Which of the assignments is easiest for you to do? Tackle that one first. + +- **Look for low hanging fruit**. Which of the assignments is easiest for you to do? Tackle that one first. - **When writing your code, write small chunks at a time, testing each time before continuing**. Use temporary console.log statements to show intermediate results (remove when no longer needed). Don't continue until the code written sofar is working correctly. If you write a whole bunch of code without intermediate testing it becomes difficult to pinpoint where issues occur. - **If you get stuck in an assignment, move on** to the next one. You can always come back later if time permits. - When writing code for the browser, **always open the Chrome Developer Tools**. Watch out for error messages in the browser console. Inspect the network tab to examine the data returned from a remote API. - **Don't over-deliver**. If styling is not required by the assignment, skip it. If time permits, you can do it later. The same goes for handling fetch errors. Focus on delivering a minimum working version that meets the requirement. Ticking off a working version again reduces your stress level. Come back later, if time permits, to embellish your solutions. - **Don't use Google as a replacement for common sense.** -- After finishing an assignment, read the question again to **make sure you actually gave an answer to the question.** +- After finishing an assignment, read the question again to **make sure you actually gave an answer to the question.** - Before handing in the test, read it all over again to **pick out the small mistakes.** ## Sample questions @@ -51,7 +61,6 @@ Advise on how to make a test: 1. Using JavaScript only (adding HTML to index.html is NOT allowed), create a button element (with text "click me!") and an empty image element and add it to the document. When the button is clicked, insert an image URL into the tag and remove the button. Use the following image URL: https://thehub.dk/files/5ad4b4a9f9ac4aa13c3d2d58/logo_upload-6d537cf7e5de664db275b32b3c6ae12d.png 2. Make an API call using the Fetch API or the regular XMLHttpRequest (whichever one you're more comfortable with). Use the following API: https://reqres.in/api/users -Parse the response and then display the "first_name" and "last_name" of the first three users within the DOM (inside an unordered list) + Parse the response and then display the "first_name" and "last_name" of the first three users within the DOM (inside an unordered list) If there’s anything unclear please let us know. Also, if any of you need additional support, now is the moment to let us know as we could pair you up with someone to answer any questions you may have. - From cb42b037fa74e1718079a9c23a16f6dec361ed3a Mon Sep 17 00:00:00 2001 From: Noer Paanakker Date: Thu, 4 Jun 2020 16:53:37 +0200 Subject: [PATCH 07/24] updated links/readings week 1 --- README.md | 41 +++++++++------ Week1/MAKEME.md | 26 +++++----- Week1/README.md | 89 +++++++++++++++++++++++---------- Week2/README.md | 28 +++++------ assets/API.png | Bin 0 -> 42325 bytes assets/homework-submission.png | Bin 0 -> 1058691 bytes hand-in-homework-guide.md | 4 +- test.md | 4 +- 8 files changed, 120 insertions(+), 72 deletions(-) create mode 100644 assets/API.png create mode 100644 assets/homework-submission.png diff --git a/README.md b/README.md index 536101727..98be18cdf 100644 --- a/README.md +++ b/README.md @@ -9,19 +9,19 @@ Welcome to JavaScript3! Congratulations on making it this far. You're well on yo A big part of being a programmer means moving data from one place to another. It also means working with other people's software. In this module you'll be learning about one of the core things of what makes a web developer: working with APIs! -On top of that you'll also learn how to think differently about how you write your programs. Like in any field, once you've mastered a particular way of doing things you start thinking about how it could be done differently. In programming we call these `paradigms` and in this module you'll learn one such paradigm: Object-Oriented Programming! +On top of that you'll also learn how to think differently about _how_ you write your programs. Like in any field, once you've mastered a particular way of doing things you start thinking about how it could be done in a smarter, different way. In programming we call these `paradigms` and in this module you'll learn one such paradigm: Object-Oriented Programming! ## Learning goals In order to successfully complete this module you will need to master the following: -- Learn what an API is -- Catch up on the history of JavaScript -- Understand how to write more readable asynchronous JavaScript -- Connect with different public APIs -- Build a Single Page Application (SPA) +- Learn what an `Application Programming Interface` (API) is +- Catch up on the `history of JavaScript` +- Understand how to write more readable `asynchronous JavaScript` +- Connect with different `public APIs` +- Build a `Single Page Application` (SPA) - Work with pre-existing code -- Learn about Object-Oriented Programming +- Learn about `Object-Oriented Programming` ## How to use this repository @@ -37,19 +37,19 @@ If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯ ## Before you start -In the following weeks we will be using a `styleguide` to help you write _"clean code"_. What is a styleguide? Simply put, it's a set of design standards put in one collection. Companies create and use them to define their public identity (their "brand"). Watch the following to get a better idea: +### Setup Style Guide -- [Creating Your Company's Style Guide](https://www.youtube.com/watch?v=gv_wrrY70E0) +In the following weeks we will be using a front-end `style guide` to help you write _"clean code"_. What is a style guide? Simply put, it's a set of coding standards put into one collection. -A styleguide is made by designers. In the case of website design, this styleguide is then handed over to developers to use when styling the frontend. +- [Front-end Style Guides](https://fronteers.nl/congres/2015/sessions/front-end-style-guides-anna-debenham) -The styleguide we'll be using is the one from Airbnb: +The style guide we'll be using is the one from Airbnb: - [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) While you do not need to read this guide in detail, it is recommended that you look at sections 1-8, 12-13, 15-21 and 23. -The required packages you need to install in order to write code according to the styleguide are the following: +The required packages you need to install before you write code according to the style guide are the following: ```json "eslint" @@ -60,13 +60,26 @@ The required packages you need to install in order to write code according to th "prettier" ``` -They are already in this repository's `package.json` so all you have to do now to prepare is to execute the following command in your command line: +They are already in this repository's `package.json` so all you have to do now to prepare is to execute the following command at the root of this module directory: ```md npm install ``` -With this out of the way we can get started! +### Forking the right repository + +Before you start with the homework, make sure you've made a fork of the right repository: [HackYourHomework/JavaScript3](https://www.github.com/hackyourhomework/javascript3)). Once you've cloned it to your computer you can proceed by making GIT branches for each week. Start at the `master` branch and execute the following (note that they're 3 different commands): + +```bash +foo@bar:~$ git branch week1-YOURNAME +foo@bar:~$ git branch week2-YOURNAME +foo@bar:~$ git branch week3-YOURNAME +``` + +Then execute `git checkout week1` and you can get started! + +If you have any questions or if something is not entirely clear ¯\_(ツ)\_/¯, please ask/comment on Slack! + ## Planning diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 9dfd4ce98..d17665390 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -15,49 +15,49 @@ This week's concepts can be challenging, therefore let's get an easy introductio ## **2. JavaScript exercises** -> Inside of your `JavaScript3` fork and inside of the `Week1` folder, create a folder called `homework`. Inside of that folder, create a folder called `js-exercises`. For all the following exercises create a new `.js` file in that folder (3 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be placeKitten.js. +> Inside of your `JavaScript3` fork and inside of the `Week1` folder, create a folder called `homework`. Inside of that folder, create a folder called `js-exercises`. For all the following exercises create a new `.js` file in that folder (3 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be `getRandomUser.js`. **Exercise 1: Who do we have here?** Wouldn't it cool to make a new friend with just the click of a button? -Write a function that makes an API call to `https://www.randomuser.me/api` +Write a function that makes a HTTP Request to `https://www.randomuser.me/api` -- Inside the same file write two functions: one with `XMLHttpRequest`, and the other with `axios` -- Each function should make an API call to the given endpoint: `https://www.randomuser.me/api` +- Inside the JavaScript file write two functions: one with `XMLHttpRequest`, and the other with `axios` +- Each function should make a HTTP Request to the given endpoint: `https://www.randomuser.me/api` - Log the received data to the console -- Incorporate error handling +- Incorporate error handling: log to the console the error message **Exercise 2: Programmer humor** Who knew programmers could be funny? -Write an function that makes an API call to `https://xkcd.now.sh/?comic=latest` +Write a function that makes a HTTP Request to `https://xkcd.now.sh/?comic=latest` - Inside the same file write two programs: one with `XMLHttpRequest`, and the other with `axios` -- Each function should make an API call to the given endpoint: `https://xkcd.now.sh/?comic=latest` +- Each function should make a HTTP Request to the given endpoint: `https://xkcd.now.sh/?comic=latest` - Log the received data to the console - Render the `img` property into an `` tag in the DOM -- Incorporate error handling +- Incorporate error handling: log to the console the error message **Exercise 3: Dog photo gallery** Let's make a randomized dog photo gallery! -Write a function that makes an API call to `https://dog.ceo/api/breeds/image/random`. It should trigger after clicking a button in your webpage. Every time the button is clicked it should append a new dog image to the DOM. +Write a function that makes a HTTP Request to `https://dog.ceo/api/breeds/image/random`. It should trigger after clicking a button in your webpage. Every time the button is clicked it should append a new dog image to the DOM. - Create an `index.html` file that will display your random image - Add 2 `