From 632247ed612269cd04b1b76928140718a29b2978 Mon Sep 17 00:00:00 2001 From: Jim Cramer Date: Sat, 21 Apr 2018 10:51:02 +0200 Subject: [PATCH 1/3] implements pull request workflow for homework --- .eslintrc | 47 +++++++ .gitignore | 61 ++++++++++ .vscode/settings.json | 9 ++ LICENSE | 3 + README.md | 2 + Week1/MAKEME.md | 35 +++--- Week1/README.md | 2 +- Week1/code_examples/Closures (class 10).md | 70 ----------- Week1/code_examples/closure1.js | 21 ---- Week1/code_examples/closure2.js | 19 --- Week1/code_examples/equal.js | 43 ------- Week1/code_examples/object.js | 15 --- Week1/homework/app.js | 11 ++ Week1/homework/index.html | 0 Week1/homework/style.css | 0 Week2/MAKEME.md | 135 +++++++++++---------- Week2/homework/maartjes_work.js | 47 +++++++ Week2/homework/map_filter.js | 5 + Week3/MAKEME.md | 113 +++++++++-------- Week3/homework/step3-1.js | 11 ++ Week3/homework/step3-2.js | 8 ++ Week3/homework/step3-3-1.js | 8 ++ Week3/homework/step3-3-2.js | 8 ++ Week3/homework/step3-3-3.js | 8 ++ Week3/homework/step3-3-7.js | 28 +++++ Week3/homework/step4-bonus.js | 10 ++ Week3/homework/step4.js | 8 ++ 27 files changed, 426 insertions(+), 301 deletions(-) create mode 100644 .eslintrc create mode 100644 .gitignore create mode 100644 .vscode/settings.json create mode 100644 LICENSE delete mode 100644 Week1/code_examples/Closures (class 10).md delete mode 100644 Week1/code_examples/closure1.js delete mode 100644 Week1/code_examples/closure2.js delete mode 100644 Week1/code_examples/equal.js delete mode 100644 Week1/code_examples/object.js create mode 100644 Week1/homework/app.js create mode 100644 Week1/homework/index.html create mode 100644 Week1/homework/style.css create mode 100644 Week2/homework/maartjes_work.js create mode 100644 Week2/homework/map_filter.js create mode 100644 Week3/homework/step3-1.js create mode 100644 Week3/homework/step3-2.js create mode 100644 Week3/homework/step3-3-1.js create mode 100644 Week3/homework/step3-3-2.js create mode 100644 Week3/homework/step3-3-3.js create mode 100644 Week3/homework/step3-3-7.js create mode 100644 Week3/homework/step4-bonus.js create mode 100644 Week3/homework/step4.js diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 000000000..ae8189517 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,47 @@ +{ + "env": { + "browser": true, + "commonjs": true, + "es6": true, + "node": true + }, + "parserOptions": { + "ecmaVersion": 2017, + "ecmaFeatures": { + "jsx": true + }, + "sourceType": "module" + }, + "extends": [ + "eslint:recommended" + ], + "rules": { + "no-const-assign": "warn", + "no-this-before-super": "warn", + "no-undef": "warn", + "no-unreachable": "warn", + "no-unused-vars": "warn", + "constructor-super": "warn", + "valid-typeof": "warn", + "no-var": "warn", + "prefer-const": "warn", + "no-multiple-empty-lines": "warn", + "eol-last": [ + "error", + "always" + ], + "no-console": "off", + "camelcase": "warn", + "eqeqeq": [ + "error", + "always", + { + "null": "ignore" + } + ], + "semi": [ + "warn", + "always" + ] + } +} \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..6c589c2f8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,61 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Typescript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + +.netlify +dist/ diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..993370338 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,9 @@ +{ + "cSpell.words": [ + "Codewars", + "Maartje", + "Maartje's", + "blabla", + "roverjs" + ] +} \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 000000000..79285a5eb --- /dev/null +++ b/LICENSE @@ -0,0 +1,3 @@ +This work is licensed under the Creative Commons Attribution 4.0 International License. +To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/ +or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA. \ No newline at end of file diff --git a/README.md b/README.md index 95d6abbb0..343dbf32b 100644 --- a/README.md +++ b/README.md @@ -19,3 +19,5 @@ We expect you to __always__ come prepared to the class on Sunday. A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](../../../fundamentals/blob/master/fundamentals/README.md) and research/ ask for help (Slack!) with the concepts that are not entirely clear. *The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)* + +Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 5ce9b3d60..a651744ea 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -54,29 +54,35 @@ Your fellow students have provided you with feedback in Trello. - Implement both feedback from Trello and Github. - Check on one of your fellow students code and issues and see if her or she implemented their feedback correctly. If there are some things that can be improved make an issue suggesting further improvements. If you think that the feedback has been implemented correctly create a issue saying something like: "nice work you can clear your issues". -## Step 2: Reorganize your Github +## Step 2: Reorganize your GitHub _Deadline Monday_ -Your Github should contain two repositories called `hyf-javascript1` and `hyf-javascript2`. Inside the JavaScript repositories you should have three folders, called week1, week2, and week3 (or something similar). Inside these folders you should have the different assignments (a file per exercises). Try and find proper names for the exercises that reflect somehow what is going on in the code. Avoid using spaces in your file names, this makes it harder to "run" you files. Also make sure that all your JavaScript files have a `.js` extension. +Your Github should contain a repository called `hyf-javascript1`. Inside this JavaScript repository you should have three folders, called week1, week2, and week3 (or something similar). Inside these folders you should have the different assignments (a file per exercises). Try and find proper names for the exercises that reflect somehow what is going on in the code. Avoid using spaces in your file names, this makes it harder to "run" you files. Also make sure that all your JavaScript files have a `.js` extension. ## Step 3: Custom DOM manipulation challenge :mortar_board: _Deadline Saturday_ -1. Open a new js file and start by declaring an array that contains 10 strings. These strings should be of book titles you have read (or made up) and be lowercase without spaces or special characters so that you can use these later as Id's. (Example: Harry Potter's - The Chamber of Secrets -> `harry_potter_chamber_secrets`). +> **Preparation**: Fork this repository and use the [Homework Pull Request Workflow](../../../../fundamentals/blob/master/fundamentals/homework_pr.md) to hand in your homework. -2. Create a basic html file called index.html and use it to load the js file, confirm the console.log show the array. (This is for debugging and making sure everything is in order. Delete it later when you're done :)) +Modify the (mostly empty) files in the `Week1/homework` folder for this step. -3. Make a function (or functions) that generate a `ul` with `li` elements for each book ID in the array using a for loop. +**3.1** Open the `apps.js` and start by declaring an array that contains 10 strings. These strings should be of book titles you have read (or made up) and be lowercase without spaces so that you can use these later as HTML `id` attributes. (Example: _Harry Potter's - The Chamber of Secrets_ -> `harry_potter_chamber_secrets`). Add a console.log statement to output this array to console. (This is for debugging and making sure everything is in order. Delete it later when you're done :)) -4. Make an object containing information for each book. Each item (object) in this object should have the book ID you thought up in point 1 as a key, and it should have at least the following fields: title, language and author. +**3.2** Open the empty `index.html` and add the required HTML to load the `app.js` file. Open `index.html` in the browser and confirm that the `console.log` statement shows the array. (Open the Chrome Developer Tools and inspect the console.) -5. Now change the function you used to display the book ID's in a list to take the actual information about the book from the object and display that. Make sure you choose the right html elements for each piece of info, for instance, a heading for the title. +**3.3** Remove the temporary `console.log` from step 3.1. Make a function (or functions) that generate a `ul` with `li` elements for each book ID in the array using a `for` loop. Make sure that the function names you choose are an accurate reflection of what they do. As a reminder, here are the recommended [Naming Conventions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md). -6. Beautify your html page with css, add sources and alts to each of the images. +**3.4** Make an object (_not an array!_) containing information for each book. Each property of this object should be another (i.e., nested) object with the book ID you thought up in step 3.1 as a key, and at least the following properties: `title`, `language` and `author`. + +**3.5** Now change the function from step 3.3 that you used to display the book ID's in a list to take the actual information about the book from the object and display that. Make sure you choose the correct HTML elements for each piece of info, for instance, a heading for the title. + +**3.6** Beautify your html page with css (use the `style.css` file for that), add sources and alts to each of the images. -7. Download book covers for each book, construct a new Object which has as keys the bookId's again, and as value the path to the image source (e.g. `{"harry_potter_blabla": "./img/harry_potter_blabla.jpg", ...}`). Now loop over these entries (_hint: `Object.keys(objectName)` gives you an array containing the keys_). Then write a function which places an image at the corresponding `li` element. Remember that Objects are not ordered, so you cannot guarantee that the first key is the first `li` element. (_Hint: you could give each `li` item an `id` tag by modifying the function you made before_) +**3.7** Find and download book covers for each book and construct a new object which has as keys the book IDs again, and as value the path to the image source (e.g. `{ harry_potter_blabla: './img/harry_potter_blabla.jpg', ... }`). + +Loop over these entries (_hint: `Object.keys(objectName)` gives you an array containing the keys_). Then write a function which places an image at the corresponding `li` element. Remember that objects are not ordered, so you cannot guarantee that the first key is the first `li` element. (_Hint: you could give each `li` item an `id` tag by modifying the function you made before._) ``` How to hand in your homework: @@ -116,13 +122,4 @@ it’s a great way to really practice JavaScript a lot in various problems. Please note, there are various challenges all sorted on difficultly called KIU. Kiu 8 is the easiest, Kiu 1 is the hardest, we expect you to do challenges around level 8, 7 maybe. -enjoy! - -:octocat: -``` -How to hand in your homework: -• Create a new repository "hyf-javascript2". 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-javascript2/week1 should now contain the files of your homework. -• Place the link to your repository folder in Trello. -``` +Enjoy! \ No newline at end of file diff --git a/Week1/README.md b/Week1/README.md index c1f7f5e83..1ced4da3e 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -10,7 +10,7 @@ In week one we will discuss the following topics: • Structuring code files ``` -- Chrome DevTools [Debugging](https://developers.google.com/web/tools/chrome-devtools/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3) +- Chrome DevTools [Debugging](https://developers.google.com/web/tools/chrome-devtools/) ### A Refresher from some previous covered topics: diff --git a/Week1/code_examples/Closures (class 10).md b/Week1/code_examples/Closures (class 10).md deleted file mode 100644 index 6f9adc881..000000000 --- a/Week1/code_examples/Closures (class 10).md +++ /dev/null @@ -1,70 +0,0 @@ -# Closures - -Below is a stripped down, simplified version of the first closure example we used during the lecture. - -```js -function greetPerson(name) { - function innerFunction(greeting) { - return greeting + ', ' + name; - }; - return innerFunction; -} - -const greetTimir = greetPerson('Timir'); -const timirGreeting = greetTimir('Good morning'); -console.log(timirGreeting); -``` - -## Description - -The `greetPerson` function (the "outer" function) contains an enclosed function, named `innerFunction`. This inner function has access to the `name` argument of its enclosing function `greetPerson`, as well as to its own `greeting` argument. - -When we later call `greetPerson` passing `'Timir'` as its parameter, the `greetPerson` function sets its `name` argument to `'Timir'` and returns its inner function. This inner function **retains access to the `name` argument** and its value `'Timir'`, even after `greetPerson` exits. (Note that `greetPerson` doesn't call its inner function; it just returns it.) - -The returned inner function is subsequently assigned to the variable `greetTimir`. - -> A closure is an inner function that has access to the outer (enclosing) function’s variables and arguments. - -With `greetTimir('Good morning')` we are effectively calling the inner function and passing it the string `'Good morning'`. Because the inner function still has access to `name` it can produce the output as printed by the `console.log`: - -``` -Good morning, Timir -``` - -## Alternative implementation - -We could have obtained the same result by scrapping all lines except the last two and replace them with an equivalent, custom made `greetTimir` function as shown below. We wouldn't be able to tell the difference from just looking at the output produced. - -```js -function greetTimir(greeting) { - const name = 'Timir'; - return greeting + ', ' + name; -} - -const timirGreeting = greetTimir('Good morning'); -console.log(timirGreeting); -``` - -However, with that custom made `greetTimir` we can only greet Timir. In contrast, with `greetPerson` we can easily produce functions to greet any person we like (or don't like :wink:), e.g.: - -```js -const greetMaartje = greetPerson('Maartje'); -const maartjeGreeting = greetMaartje('Hi there'); -console.log(maartjeGreeting); - -const greetHasan = greetPerson('Hasan'); -const hasanGreeting = greetHasan('Have a good day'); -console.log(hasanGreeting); -``` - -## Recommended further reading - -- [Eloquent JavaScript - Chapter 3: Functions](http://eloquentjavascript.net/03_functions.html) - (Press Ctrl+F in your browser and search for the word 'closure') - -- [Understand JavaScript Closures With Ease](http://javascriptissexy.com/understand-javascript-closures-with-ease/) - - - - - diff --git a/Week1/code_examples/closure1.js b/Week1/code_examples/closure1.js deleted file mode 100644 index 62963ffa1..000000000 --- a/Week1/code_examples/closure1.js +++ /dev/null @@ -1,21 +0,0 @@ -'use strict'; -/** - * Closure returning a function - */ -function greetPerson(name) { - const defaultGreeting = 'Hello'; - const innerFunction = function (greeting) { - greeting = greeting || defaultGreeting; - return greeting + ', ' + name; - }; - return innerFunction; -} - -const greetTimir = greetPerson('Timir'); -const timirGreeting = greetTimir('Good morning'); -console.log(timirGreeting); - -const greetMaartje = greetPerson('Maartje'); -const maartjeGreeting = greetMaartje('Hi there'); -console.log(maartjeGreeting); - diff --git a/Week1/code_examples/closure2.js b/Week1/code_examples/closure2.js deleted file mode 100644 index 3324f2618..000000000 --- a/Week1/code_examples/closure2.js +++ /dev/null @@ -1,19 +0,0 @@ -'use strict'; -/** - * Closure returning an object - */ -function someoneNamed(name) { - var obj = { - getName: function() { - return name; - }, - getNameUpper: function() { - return name.toUpperCase(); - } - }; - return obj; -} - -var someOtherGuy = someoneNamed('Hasan'); -var thisGuy = someoneNamed("jim"); -console.log('Hey, ' + someOtherGuy.getName() + '... Are you there ' + someOtherGuy.getNameUpper() + '?'); diff --git a/Week1/code_examples/equal.js b/Week1/code_examples/equal.js deleted file mode 100644 index 25bb07bc6..000000000 --- a/Week1/code_examples/equal.js +++ /dev/null @@ -1,43 +0,0 @@ -const obj1 = { - a: '1', - b: 'this is the letter b', - f: { - foo: 'what is a foo anyway', - bar: [1, 5, '3', 4] - } -}; - -const obj2 = { - a: 1, - b: 'this is the letter b', - f: { - foo: 'what is a foo anyway', - bar: [1, 5, 3, 4] - } -}; - -function equal(a, b, mode) { - const eq = mode === 'strict' ? a === b : a == b; - if (eq) { - return true; - } - - if (a && b && - typeof a === 'object' && - typeof b === 'object' && - Object.keys(a).length === Object.keys(b).length) { - - for (const key of Object.keys(a)) { - if (!b.hasOwnProperty(key) || !equal(a[key], b[key], mode)) { - return false; - } - } - - return true; - } - - return false; -}; - -console.log('objects are equal: ' + equal(obj1, obj2)); -console.log('objects are strictly equal: ' + equal(obj1, obj2, 'strict')); diff --git a/Week1/code_examples/object.js b/Week1/code_examples/object.js deleted file mode 100644 index 986a850f6..000000000 --- a/Week1/code_examples/object.js +++ /dev/null @@ -1,15 +0,0 @@ -// 'use strict'; -/** - * An object with methods for use with `new` - */ -function Person(name) { - this.name = name || 'unknown'; -} - -Person.prototype.getName = function () { - return this.name; -}; - -var someGuy = new Person('Jim'); -var anotherGuy = new Person('Hasan'); -console.log('Hi, ' + someGuy.getName()); diff --git a/Week1/homework/app.js b/Week1/homework/app.js new file mode 100644 index 000000000..ffef836dc --- /dev/null +++ b/Week1/homework/app.js @@ -0,0 +1,11 @@ +'use strict'; +{ + const bookTitles = [ + // Replace with your own book titles + 'harry_potter_chamber_secrets' + ]; + + + // Replace with your own code + console.log(bookTitles); +} diff --git a/Week1/homework/index.html b/Week1/homework/index.html new file mode 100644 index 000000000..e69de29bb diff --git a/Week1/homework/style.css b/Week1/homework/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index be42375ff..a7c725572 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -21,82 +21,89 @@ Go through the `html-css`, `javascript1` and `javascript2` Github repositories o _Deadline Wednesday_ -1. Say you would like to write a program that doubles the odd numbers in an array and throws away the even number. +**2.1** Say you would like to write a program that doubles the odd numbers in an array and throws away the even number. - Your solution could be something like this: - ```js - let numbers = [1, 2, 3, 4]; - let newNumbers = []; +Your solution could be something like this: - for(let i = 0; i < numbers.length; i++) { - if(numbers[i] % 2 !== 0) { - newNumbers.push(numbers[i] * 2); - } - } +```js +const numbers = [1, 2, 3, 4]; +const newNumbers = []; + +for (let i = 0; i < numbers.length; i++) { + if (numbers[i] % 2 !== 0) { + newNumbers.push(numbers[i] * 2); + } +} - console.log("The doubled numbers are", newNumbers); // [2, 6] +console.log('The doubled numbers are', newNumbers); // ==> [2, 6] - ``` +``` - Rewrite the above program using `map` and `filter` don't forget to use `=>` +Rewrite the above program using `map` and `filter` don't forget to use `=>`. +--- -Underneath you see a very interesting small insight in Maartje's work: +**2.2** Underneath you see a very interesting small insight in Maartje's work: ```js -let monday = [ - { - name : 'Write a summary HTML/CSS', - duration : 180 - }, - { - name : 'Some web development', - duration : 120 - }, - { - name : 'Fix homework for class10', - duration : 20 - }, - { - name : 'Talk to a lot of people', - duration : 200 - } - ]; - -let tuesday = [ - { - name : 'Keep writing summary', - duration : 240 - }, - { - name : 'Some more web development', - duration : 180 - }, - { - name : 'Staring out the window', - duration : 10 - }, - { - name : 'Talk to a lot of people', - duration : 200 - }, - { - name : 'Look at application assignments new students', - duration : 40 - } - ]; - -let tasks = monday.concat(tuesday); +const monday = [ + { + name: 'Write a summary HTML/CSS', + duration: 180 + }, + { + name: 'Some web development', + duration: 120 + }, + { + name: 'Fix homework for class10', + duration: 20 + }, + { + name: 'Talk to a lot of people', + duration: 200 + } +]; + +const tuesday = [ + { + name: 'Keep writing summary', + duration: 240 + }, + { + name: 'Some more web development', + duration: 180 + }, + { + name: 'Staring out the window', + duration: 10 + }, + { + name: 'Talk to a lot of people', + duration: 200 + }, + { + name: 'Look at application assignments new students', + duration: 40 + } +]; + +const tasks = monday.concat(tuesday); ``` -2. Write a program that does the following below. Use `map` and `filter`. You will also need a `forEach` or a `for` loop for the 'summing up' part. +_Note: the durations are specified in minutes._ + +Write a program that computes how much Maartje has earned by completing these tasks, using `map` and `filter`. For the 'summing part' you can try your luck with `reduce`; alternatively, you may use `forEach` or a `for` loop. + +Follow these steps. Each step should build on the result of the previous step. + +- Map the tasks to durations in hours. +- Filter out everything that took less than two hours (i.e., remove from the collection) +- Multiply the each duration by a per-hour rate for billing (you can decide yourself what Maartje should earn per hour) and sum it all up. +- Output a formatted Euro amount, rounded to Euro cents, e.g: `€ 12.34`. +- Choose variable and parameters names that most accurately describe their contents or purpose. When naming an array, use a plural form, e.g. `durations`. For a single item, use a singular form, e.g. `duration`. For details, see [Naming Conventions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md). +- Don't forget to use `=>`. -- Collect two days' worth of tasks. -- Convert the task durations to hours, instead of minutes. -- Filter out everything that took two hours or more (remove from the collection) -- Multiply the each duration by a per-hour rate for billing (you can decide yourself what Maartje should make per hour) and sum it all up. -- Output a formatted Euro amount. -- Don't forget to use `=>` ## Step 3: ROVER diff --git a/Week2/homework/maartjes_work.js b/Week2/homework/maartjes_work.js new file mode 100644 index 000000000..0b451d122 --- /dev/null +++ b/Week2/homework/maartjes_work.js @@ -0,0 +1,47 @@ +'use strict'; + +const monday = [ + { + name: 'Write a summary HTML/CSS', + duration: 180 + }, + { + name: 'Some web development', + duration: 120 + }, + { + name: 'Fix homework for class10', + duration: 20 + }, + { + name: 'Talk to a lot of people', + duration: 200 + } +]; + +const tuesday = [ + { + name: 'Keep writing summary', + duration: 240 + }, + { + name: 'Some more web development', + duration: 180 + }, + { + name: 'Staring out the window', + duration: 10 + }, + { + name: 'Talk to a lot of people', + duration: 200 + }, + { + name: 'Look at application assignments new students', + duration: 40 + } +]; + +const tasks = monday.concat(tuesday); + +// Add your code here diff --git a/Week2/homework/map_filter.js b/Week2/homework/map_filter.js new file mode 100644 index 000000000..b6af22631 --- /dev/null +++ b/Week2/homework/map_filter.js @@ -0,0 +1,5 @@ +'use strict'; + +const numbers = [1, 2, 3, 4]; + +// Add your code here diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 916f976e9..85ceb8096 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -30,101 +30,116 @@ Give feedback on `step 2` of `week 5` to one of your fellow students (do this by _Deadline Wednesday_ -0\. We learned a little bit about callbacks in JS. A callback is simply a function passed to another function that gets executed (run) after a potentially long running operation has completed. There is another function called `setTimeout` that will wait a specified period of time and then execute a function. For example: +We learned a little bit about callbacks in JS. A callback is simply a function passed to another function that gets executed (run) after a potentially long running operation has completed. There is another function called `setTimeout` that will wait a specified period of time and then execute a function. For example: ```js function doIt() { - console.log('I am done'); + console.log('I am done'); } -setTimeout(doIt, 5000) +setTimeout(doIt, 5000); ``` ->if you run the above code it will wait 5 seconds and print `I am done`. Please read something about setTimeout on MDN. The first argument to the `setTimeout` call is the callback (`doIt`) +>If you run the above code it will wait 5 seconds and then print `I am done`. Please read something about setTimeout on MDN. The first argument to the `setTimeout` call is the callback (`doIt`). -1\.We saw that we can pass functions as arguments to other functions. Your task is to write a function that takes another function as an argument and runs it. +**3.1** We saw that we can pass functions as arguments to other functions. Your task is to write a function that takes another function as an argument and runs it. ```js function foo(func) { - // What to do here? + // What to do here? } - + function bar() { - console.log('Hello, I am bar!'); + console.log('Hello, I am bar!'); } foo(bar); ``` - - - +**3.2** You must write a function that takes 4 arguments. -2\. You must write a function that takes 4 arguments. - - A start value - - An end value - - A callback to call if the number is divisible by 3 - - A callback to use if the number is divisible by 5 +- A start value +- An end value +- A callback to call if the number is divisible by 3 +- A callback to use if the number is divisible by 5 -The function should generate an array containing values from start value to end value (inclusive). +The function should first generate an array containing values from start value to end value (inclusive). -Then the function should iterate over the array and call the first callback if the array value is divisible by 3 +Then the function should take the newly created array and iterate over it, and calling the first callback if the array value is divisible by 3. -The function should call the second callback if the array value is divisible by 5 +The function should call the second callback if the array value is divisible by 5. -Both functions should be called if the array value is divisible by both 3 and 5 +Both functions should be called if the array value is divisible by both 3 and 5. ```js -THIS IS FAKE CODE function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { - // make array - // start at beginning of array and check if you should call threeCallback or fiveCallback or go on to next + const values = []; + // make array + // start at beginning of array and check if you should call threeCallback or fiveCallback or go on to next } + threeFive(10, 15, sayThree, sayFive); // Should create an array [10,11,12,13,14,15] -// and call sayFive, sayThree, sayThree, sayFive - please make sure you see why these calls are made before you start coding +// and call sayFive, sayThree, sayThree, sayFive +// please make sure you see why these calls are made before you start coding ``` +> Note: The following assignments include some problems from _freeCodeCamp_. While we normally ask you to use more modern `const` and `let` keywords to declare variables, currently _freeCodeCamp_ does not give you that option and expects you to use the older `var` keyword. + +**3.3** Please solve this problem: + +> https://www.freecodecamp.com/challenges/repeat-a-string-repeat-a-string + +_3.3.1_: with a `for` loop. +_3.3.2_: with a `while` loop. +_3.3.3_: with a `do...while` loop. + +**3.4** Some practice with objects: + +> https://www.freecodecamp.com/challenges/construct-javascript-objects-with-functions -3\. Please solve this problem using: -https://www.freecodecamp.com/challenges/repeat-a-string-repeat-a-string -3\.1 A for loop. -3\.2 A while loop. -3\.3 A do loop. +**3.5** Nested loops -4\. Some practice with objects -https://www.freecodecamp.com/challenges/construct-javascript-objects-with-functions +> https://www.freecodecamp.com/challenges/nesting-for-loops -5\. Nested loops -https://www.freecodecamp.com/challenges/nesting-for-loops +**3.6** We did some work with arrays: + +```js +const arr = [1, 2, 3]; +``` +We can also nest arrays inside arrays like this: + +```js +const arr2d = [[1, 2], [3, 4], [5, 6]]; +```` + +(for math people you can think of this as a matrix) -6\. We did some work with arrays - `var arr = [1,2,3]` -We can also nest arrays inside arrays like this `var arr2d = [[1,2], [3,4], [5,6]]` (for math people you can think of this as a matrix) How would you print all the items of an array with 3 dimensions? -How about with K dimensions? -What if you didn't know how deep the array was nested? (You don't have to write code for this but think about it) +How about with _K_ dimensions? +What if you didn't know how deep the array was nested? (You don't have to write code for this but think about it.) -7\. Here are two functions that look like they do the something similar but they print different results. Please explain what's going on here. +**3.7** Here are two functions that look like they do the something similar but they print different results. Please explain what's going on here. ```js -let x = 9; -function f1(val) { - val = val+1; - return val; +const x = 9; +function f1(val) { + val = val + 1; + return val; } f1(x); console.log(x); - -let y = { x: 9 }; +const y = { x: 9 }; function f2(val) { - val.x = val.x + 1; - return val; + val.x = val.x + 1; + return val; } f2(y); console.log(y); ``` -If you are confused please run the code and then consult the Google for "javaScript pass by value pass by reference" + +If you are confused please run the code and then consult the Google for "javascript pass by value pass by reference" ## Step 4: Scope and Closures @@ -133,10 +148,10 @@ _Deadline Saturday_ > Let's continue to learn a little more about scope and Closures. +Write a function that would allow you to do this: -1. Write a function that would allow you to do this: ```js -let addSix = createBase(6); +const addSix = createBase(6); addSix(10); // returns 16 addSix(21); // returns 27 ``` diff --git a/Week3/homework/step3-1.js b/Week3/homework/step3-1.js new file mode 100644 index 000000000..bee3be0a0 --- /dev/null +++ b/Week3/homework/step3-1.js @@ -0,0 +1,11 @@ +'use strict'; + +function foo(func) { + // What to do here? +} + +function bar() { + console.log('Hello, I am bar!'); +} + +foo(bar); diff --git a/Week3/homework/step3-2.js b/Week3/homework/step3-2.js new file mode 100644 index 000000000..777ca2038 --- /dev/null +++ b/Week3/homework/step3-2.js @@ -0,0 +1,8 @@ +'use strict'; + +function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { + const values = []; + // Add your code here +} + +threeFive(10, 15, sayThree, sayFive); diff --git a/Week3/homework/step3-3-1.js b/Week3/homework/step3-3-1.js new file mode 100644 index 000000000..bfa65786a --- /dev/null +++ b/Week3/homework/step3-3-1.js @@ -0,0 +1,8 @@ +'use strict'; + +function repeatStringNumTimes(str, num) { + // use a 'for' loop + return str; +} + +repeatStringNumTimes('abc', 3); diff --git a/Week3/homework/step3-3-2.js b/Week3/homework/step3-3-2.js new file mode 100644 index 000000000..4a972cb46 --- /dev/null +++ b/Week3/homework/step3-3-2.js @@ -0,0 +1,8 @@ +'use strict'; + +function repeatStringNumTimes(str, num) { + // use a 'while' loop + return str; +} + +repeatStringNumTimes('abc', 3); diff --git a/Week3/homework/step3-3-3.js b/Week3/homework/step3-3-3.js new file mode 100644 index 000000000..426e6d742 --- /dev/null +++ b/Week3/homework/step3-3-3.js @@ -0,0 +1,8 @@ +'use strict'; + +function repeatStringNumTimes(str, num) { + // use a 'do...while' loop + return str; +} + +repeatStringNumTimes('abc', 3); diff --git a/Week3/homework/step3-3-7.js b/Week3/homework/step3-3-7.js new file mode 100644 index 000000000..82ab2ea99 --- /dev/null +++ b/Week3/homework/step3-3-7.js @@ -0,0 +1,28 @@ +'use strict'; + +const x = 9; +function f1(val) { + val = val + 1; + return val; +} + +f1(x); + +console.log(x); + + +const y = { x: 9 }; +function f2(val) { + val.x = val.x + 1; + return val; +} + +f2(y); + +console.log(y); + +/* +Add your explanation as a comment here: + + +*/ diff --git a/Week3/homework/step4-bonus.js b/Week3/homework/step4-bonus.js new file mode 100644 index 000000000..4e89b29e7 --- /dev/null +++ b/Week3/homework/step4-bonus.js @@ -0,0 +1,10 @@ +'use strict'; + +const values = ['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c']; + +// Add your function here. Try and come up with a good name for this function + +// Replace `yourFunction` with the name of the function you just created +const uniqueValues = yourFunction(values); + +console.log(uniqueValues); diff --git a/Week3/homework/step4.js b/Week3/homework/step4.js new file mode 100644 index 000000000..e38d43447 --- /dev/null +++ b/Week3/homework/step4.js @@ -0,0 +1,8 @@ +'use strict'; + +// Add your code here + +const addSix = createBase(6); + +addSix(10); // returns 16 +addSix(21); // returns 27 From cb7b387fc5edbb5b5727f69c4fb0e9d357ec309a Mon Sep 17 00:00:00 2001 From: Jim Cramer Date: Mon, 30 Apr 2018 13:30:11 +0200 Subject: [PATCH 2/3] minor updates to enable homework via PR --- Week1/homework/index.html | 1 + Week1/homework/style.css | 1 + Week2/MAKEME.md | 2 -- Week3/homework/{step3-1.js => 1-step3.js} | 0 Week3/homework/{step3-2.js => 2-step3.js} | 0 Week3/homework/3-step3.js | 25 +++++++++++++++++++++ Week3/homework/4-step3.js | 2 ++ Week3/homework/5-step3.js | 2 ++ Week3/homework/6-step3.js | 6 +++++ Week3/homework/{step3-3-7.js => 7-step3.js} | 5 +---- Week3/homework/step3-3-1.js | 8 ------- Week3/homework/step3-3-2.js | 8 ------- Week3/homework/step3-3-3.js | 8 ------- 13 files changed, 38 insertions(+), 30 deletions(-) rename Week3/homework/{step3-1.js => 1-step3.js} (100%) rename Week3/homework/{step3-2.js => 2-step3.js} (100%) create mode 100644 Week3/homework/3-step3.js create mode 100644 Week3/homework/4-step3.js create mode 100644 Week3/homework/5-step3.js create mode 100644 Week3/homework/6-step3.js rename Week3/homework/{step3-3-7.js => 7-step3.js} (81%) delete mode 100644 Week3/homework/step3-3-1.js delete mode 100644 Week3/homework/step3-3-2.js delete mode 100644 Week3/homework/step3-3-3.js diff --git a/Week1/homework/index.html b/Week1/homework/index.html index e69de29bb..b22147cd1 100644 --- a/Week1/homework/index.html +++ b/Week1/homework/index.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Week1/homework/style.css b/Week1/homework/style.css index e69de29bb..bab13ec23 100644 --- a/Week1/homework/style.css +++ b/Week1/homework/style.css @@ -0,0 +1 @@ +/* add your styling here */ \ No newline at end of file diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index a7c725572..9598f975c 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -104,8 +104,6 @@ Follow these steps. Each step should build on the result of the previous step. - Choose variable and parameters names that most accurately describe their contents or purpose. When naming an array, use a plural form, e.g. `durations`. For a single item, use a singular form, e.g. `duration`. For details, see [Naming Conventions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md). - Don't forget to use `=>`. - - ## Step 3: ROVER Finish up to chapter 7: JSON on [roverjs.com](http://roverjs.com/)! diff --git a/Week3/homework/step3-1.js b/Week3/homework/1-step3.js similarity index 100% rename from Week3/homework/step3-1.js rename to Week3/homework/1-step3.js diff --git a/Week3/homework/step3-2.js b/Week3/homework/2-step3.js similarity index 100% rename from Week3/homework/step3-2.js rename to Week3/homework/2-step3.js diff --git a/Week3/homework/3-step3.js b/Week3/homework/3-step3.js new file mode 100644 index 000000000..75200818b --- /dev/null +++ b/Week3/homework/3-step3.js @@ -0,0 +1,25 @@ +'use strict'; + +// use a 'for' loop +function repeatStringNumTimesWithFor(str, num) { + // add your code here + return str; +} + +console.log('for', repeatStringNumTimesWithFor('abc', 3)); + +// use a 'while' loop +function repeatStringNumTimesWithWhile(str, num) { + // add your code here + return str; +} + +console.log('while', repeatStringNumTimesWithWhile('abc', 3)); + +// use a 'do...while' loop +function repeatStringNumTimesWithDoWhile(str, num) { + // add your code here + return str; +} + +console.log('while', repeatStringNumTimesWithDoWhile('abc', 3)); diff --git a/Week3/homework/4-step3.js b/Week3/homework/4-step3.js new file mode 100644 index 000000000..52a0e9d74 --- /dev/null +++ b/Week3/homework/4-step3.js @@ -0,0 +1,2 @@ +'use strict'; +// paste your freeCodeCamp solutions in here diff --git a/Week3/homework/5-step3.js b/Week3/homework/5-step3.js new file mode 100644 index 000000000..52a0e9d74 --- /dev/null +++ b/Week3/homework/5-step3.js @@ -0,0 +1,2 @@ +'use strict'; +// paste your freeCodeCamp solutions in here diff --git a/Week3/homework/6-step3.js b/Week3/homework/6-step3.js new file mode 100644 index 000000000..89076b078 --- /dev/null +++ b/Week3/homework/6-step3.js @@ -0,0 +1,6 @@ +'use strict'; + +const arr2d = [[1, 2], [3, 4], [5, 6]]; +const arr3d = [[[1, 2], [3, 4]], [[5, 6], [7, 8]]]; + +// add your solution here, or add a comment on how you would tackle this problem diff --git a/Week3/homework/step3-3-7.js b/Week3/homework/7-step3.js similarity index 81% rename from Week3/homework/step3-3-7.js rename to Week3/homework/7-step3.js index 82ab2ea99..af1712faf 100644 --- a/Week3/homework/step3-3-7.js +++ b/Week3/homework/7-step3.js @@ -21,8 +21,5 @@ f2(y); console.log(y); -/* -Add your explanation as a comment here: +// Add your explanation as a comment here - -*/ diff --git a/Week3/homework/step3-3-1.js b/Week3/homework/step3-3-1.js deleted file mode 100644 index bfa65786a..000000000 --- a/Week3/homework/step3-3-1.js +++ /dev/null @@ -1,8 +0,0 @@ -'use strict'; - -function repeatStringNumTimes(str, num) { - // use a 'for' loop - return str; -} - -repeatStringNumTimes('abc', 3); diff --git a/Week3/homework/step3-3-2.js b/Week3/homework/step3-3-2.js deleted file mode 100644 index 4a972cb46..000000000 --- a/Week3/homework/step3-3-2.js +++ /dev/null @@ -1,8 +0,0 @@ -'use strict'; - -function repeatStringNumTimes(str, num) { - // use a 'while' loop - return str; -} - -repeatStringNumTimes('abc', 3); diff --git a/Week3/homework/step3-3-3.js b/Week3/homework/step3-3-3.js deleted file mode 100644 index 426e6d742..000000000 --- a/Week3/homework/step3-3-3.js +++ /dev/null @@ -1,8 +0,0 @@ -'use strict'; - -function repeatStringNumTimes(str, num) { - // use a 'do...while' loop - return str; -} - -repeatStringNumTimes('abc', 3); From 62e9aedf3358d5843454f88926d3ec516cb5705a Mon Sep 17 00:00:00 2001 From: Jim Cramer Date: Mon, 30 Apr 2018 13:41:49 +0200 Subject: [PATCH 3/3] Added instructions on how to hand in homework via PR --- README.md | 2 +- Week1/MAKEME.md | 21 ++++++++++++++------- Week2/MAKEME.md | 23 +++++++++++++---------- Week3/MAKEME.md | 20 +++++++++++++------- 4 files changed, 41 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 343dbf32b..1a2ad63d9 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ Here you can find course content and homework for the JavaScript2 module |Week|Topic|Read|Homework| |----|-----|----|--------| -|1.|• Capturing user input
• Events
• [Basic DOM manipulations (img src, innerHTML)](../../../fundamentals/blob/master/fundamentals/DOM_manipulation.md)
• Code debugging using the browser
• [Code commenting](../../../fundamentals/blob/master/fundamentals/code_commenting.md)
• Structuring code files
• [Code formatting](../../../fundamentals/blob/master/fundamentals/code_formatting.md) |[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)| +|1.|• Capturing user input
• Events
• [Basic DOM manipulations (img src, innerHTML)](../../../fundamentals/blob/master/fundamentals/DOM_manipulation.md)
• Code debugging using the browser
• [Code commenting](../../../fundamentals/blob/master/fundamentals/code_commenting.md)
• Structuring code files
• [Code formatting](../../../fundamentals/blob/master/fundamentals/code_formatting.md)
• [Handing in homework via PR](../../..//fundamentals/blob/master/fundamentals/homework_pr.md) |[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)| |2.|• Functions + JSON/Arrays
• [Array Manipulations](../../../fundamentals/blob/master/fundamentals/array_manipulation.md)
• JSON
• [Map and filter](../../../fundamentals/blob/master/fundamentals/map_filter.md)
• Arrow functions |[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)| |3.|• [Closures](../../../fundamentals/blob/master/fundamentals/scope_closures_this.md)
• Callbacks|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)| diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index a651744ea..5e28511ce 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -84,13 +84,20 @@ Modify the (mostly empty) files in the `Week1/homework` folder for this step. Loop over these entries (_hint: `Object.keys(objectName)` gives you an array containing the keys_). Then write a function which places an image at the corresponding `li` element. Remember that objects are not ordered, so you cannot guarantee that the first key is the first `li` element. (_Hint: you could give each `li` item an `id` tag by modifying the function you made before._) -``` -How to hand in your homework: -• Upload your homework in your "hyf-javascript2" Github repository. Make sure to create a new folder "week1" first. -• Upload your homework files inside the week1 folder and write a description for this “commit”. -• Your hyf-javascript2/week1 should now contain an index.html, main.css and a script.js file (and the images folder) -• Place the link to your repository folder in Trello. -``` + +### How to hand in your homework: + +Go over your homework one last time: + +- Does every file run without errors and with the correct results when you run them with Node? +- Does every file start with `'use strict';`? +- Have you used `const` and `let` and avoided `var`? +- Do the variable, function and argument names you created follow the [Naming Conventions](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md)? +- Is your code well-formatted (see [Code Formatting](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md))? + +If the answer is 'yes' to all preceding questions you are ready to follow these instructions: + +- [Handing in homework](../../../../fundamentals/blob/master/fundamentals/homework_pr.md) ## Step 4: **FreeCodeCamp challenges:** diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 9598f975c..7621044d4 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -126,13 +126,16 @@ _Deadline Sunday morning_ Go trough the reading material in the [README.md](/Week3/README.md) to prepare for your next class -``` -How to hand in your homework: -• Clone your existing "hyf-javascript2" Github repository. -• Create a new folder "week2" USING THE COMMAND LINE -• Save your homework files inside this folder. -• When you are done with your homework use add/commit and push to upload your homework. -• Write a description for your “commit”. -• Your hyf-javascript2/week2 should now contain all your homework files. -Place the link to your repository folder in Trello. -``` +### How to hand in your homework: + +Go over your homework one last time: + +- Does every file run without errors and with the correct results when you run them with Node? +- Does every file start with `'use strict';`? +- Have you used `const` and `let` and avoided `var`? +- Do the variable, function and argument names you created follow the [Naming Conventions](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md)? +- Is your code well-formatted (see [Code Formatting](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md))? + +If the answer is 'yes' to all preceding questions you are ready to follow these instructions: + +- [Handing in homework](../../../../fundamentals/blob/master/fundamentals/homework_pr.md) diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 85ceb8096..386ccbec0 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -166,10 +166,16 @@ _Deadline Sunday morning_ Go trough the reading material in the [README.md](https://github.com/HackYourFuture/JavaScript3/tree/master/Week1) to prepare for your next class -``` -How to hand in your homework: -• Upload your homework in your "hyf-javascript2" Github repository. Make sure to create a new folder "week3" first. -• Upload your homework files inside the week3 folder and write a description for this “commit”. -• Your hyf-javascript2/week3 should now contain an index.html, main.css and a script.js file (and the images folder) -• Place the link to your repository folder in Trello. -``` +### How to hand in your homework: + +Go over your homework one last time: + +- Does every file run without errors and with the correct results when you run them with Node? +- Does every file start with `'use strict';`? +- Have you used `const` and `let` and avoided `var`? +- Do the variable, function and argument names you created follow the [Naming Conventions](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md)? +- Is your code well-formatted (see [Code Formatting](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md))? + +If the answer is 'yes' to all preceding questions you are ready to follow these instructions: + +- [Handing in homework](../../../../fundamentals/blob/master/fundamentals/homework_pr.md)