Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit c9f42e1

Browse files
authored
Merge pull request HackYourFuture#202 from HackYourFuture/unit-test
Add Travis CI, ESLint, Prettier, unit tests for homework in preparation for class 19 I need this before the lecture, therefore merging myself.
2 parents bcf127e + d0eeb07 commit c9f42e1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+7083
-315
lines changed

.eslintrc

Lines changed: 0 additions & 47 deletions
This file was deleted.

.eslintrc.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"extends": ["airbnb", "prettier"],
3+
"plugins": ["prettier"],
4+
"env": {
5+
"browser": true,
6+
"jest": true
7+
},
8+
"rules": {
9+
"prettier/prettier": ["error"],
10+
"strict": "off",
11+
"func-names": "off",
12+
"import/no-dynamic-require": "off",
13+
"no-console": "off",
14+
"no-param-reassign": "off",
15+
"no-plusplus": "off",
16+
"no-restricted-syntax": "off",
17+
"object-shorthand": "off",
18+
"operator-assignment": "off",
19+
"prefer-arrow-callback": "off",
20+
"prefer-destructuring": "off",
21+
"prefer-template": "off",
22+
"trailing-comma": "off"
23+
}
24+
}

.travis.yml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
language: node_js
2+
node_js:
3+
- '10'
4+
5+
script:
6+
- npm run lint

.vscode/settings.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"codewars",
1212
"keyup",
1313
"maartje's",
14+
"maartjes",
1415
"roverjs",
1516
"taalmap",
1617
"trollface"

Week1/MAKEME.md

Lines changed: 27 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,95 +2,81 @@
22

33
```
44
Topics discussed in class this week:
5-
• Capturing user input
5+
• Capturing user input
66
• Events
77
• Basic DOM manipulations (img src, innerHTML)
8-
• Code debugging using the browser
8+
• Code debugging using the browser
99
• Code commenting
1010
• Structuring code files
1111
• Code formatting
1212
• Handing in homework via PR
1313
```
1414

15-
>[Here](/Week2/README.md) you find the readings you have to complete before the second lecture.
15+
> [Here](/Week2/README.md) you find the readings you have to complete before the second lecture.
1616
1717
## Step 0: Make a small dance
18-
Give yourself (or your neighbor) a little tap on the shoulder, you've made it to JS2! :muscle:
19-
20-
21-
## Step 1: Implement feedback
22-
23-
_Deadline Monday_
24-
25-
Your fellow students and teachers have provided you with feedback on your last JavaScript1 homework in Trello.
2618

27-
- Implement both feedback from Trello and Github.
28-
- 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".
29-
30-
## Step 2: Custom DOM manipulation challenge :mortar_board:
19+
Give yourself (or your neighbor) a little tap on the shoulder, you've made it to JS2! :muscle:
3120

32-
_Deadline Saturday_
21+
## Step 1: Custom DOM manipulation challenge :mortar_board:
3322

34-
> **Preparation**: Fork this repository and use the [Homework Pull Request Workflow](../../../../fundamentals/blob/master/fundamentals/homework_pr.md) to hand in your homework.
23+
_Deadline Thursday evening_
3524

3625
Modify the (mostly empty) files in the `Week1/homework` folder for this step.
3726

38-
**2.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 :))
27+
**1.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 :))
3928

40-
**2.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.)
29+
**1.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.)
4130

42-
**2.3** Remove the temporary `console.log` from step 2.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).
31+
**1.3** Remove the temporary `console.log` from step 1.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).
4332

44-
**2.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 2.1 as a key, and at least the following properties: `title`, `language` and `author`.
33+
**1.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 1.1 as a key, and at least the following properties: `title`, `language` and `author`.
4534

46-
**2.5** Now change the function from step 2.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.
35+
**1.5** Now change the function from step 1.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.
4736

48-
**2.6** Beautify your html page with css (use the `style.css` file for that), add sources and alts to each of the images.
49-
50-
**2.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', ... }`).
37+
**1.6** Beautify your html page with css (use the `style.css` file for that), add sources and alts to each of the images.
5138

52-
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._)
39+
**1.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', ... }`).
5340

41+
**1.8** 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._)
5442

5543
### How to hand in your homework:
5644

5745
Go over your homework one last time:
5846

59-
- Does every file run without errors and with the correct results when you run them with Node?
60-
- Does every file start with `'use strict';`?
61-
- Have you used `const` and `let` and avoided `var`?
62-
- Do the variable, function and argument names you created follow the [Naming Conventions](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md)?
63-
- Is your code well-formatted (see [Code Formatting](../../../../fundamentals/blob/master/fundamentals/code_formatting.md))?
47+
- Does your JavaScript file start with `'use strict';`?
48+
- Do the variable, function and argument names you created follow the [Naming Conventions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md)?
6449
- Have you resolved all issues flagged by ESLint and the spell checker (no wavy red and green underlines in VSCode)?
6550

6651
If the answer is 'yes' to all preceding questions you are ready to follow these instructions:
6752

68-
- [Handing in homework](../../../../fundamentals/blob/master/fundamentals/homework_pr.md)
53+
- [Handing in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md)
6954

70-
## Step 4: **FreeCodeCamp challenges:**
55+
## Step 2: **FreeCodeCamp challenges:**
7156

7257
_Deadline Sunday morning_
7358

74-
-[Build JavaScript Objects](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects)
75-
- Use a Constructor to Create Objects
76-
- https://www.freecodecamp.com/challenges/make-instances-of-objects-with-a-constructor-function
77-
- https://www.freecodecamp.com/challenges/make-unique-objects-by-passing-parameters-to-our-constructor
78-
- https://www.freecodecamp.com/challenges/make-object-properties-private
59+
- [Build JavaScript Objects](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects)
7960

61+
Use a Constructor to Create Objects
8062

81-
And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in-a-range
63+
- [Define a Constructor Function](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/object-oriented-programming/define-a-constructor-function)
64+
- [Extend Constructors to Receive Argument](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/object-oriented-programming/extend-constructors-to-receive-arguments)
8265

83-
## Step 5: Read before next lecture
66+
And just for fun ... [Sum All Numbers in a Range](https://www.freecodecamp.com/challenges/sum-all-numbers-in-a-range)
67+
68+
## Step 3: Read before next lecture
8469

8570
_Deadline Sunday morning_
8671

8772
Go trough the reading material in the [README.md](/Week2/README.md) to prepare for your next class
8873

8974
## :boom: Bonus homework :boom:
75+
9076
the Bonus homework for this week (for those of you want an extra challenge) do the following:
9177

9278
- Sign up on codewars.com
93-
- In you account setting under “clan” write “Hack Your Future”
79+
- In you account setting under “clan” write “Hack Your Future”
9480
- Go do the challenges in the following playlist: https://www.codewars.com/collections/fun-fun-fundamentals
9581

9682
Codewars is really a lot of fun, and you can compete against each other who has the most points :trollface:

Week1/README.md

Lines changed: 45 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -12,26 +12,47 @@ In week one we will discuss the following topics:
1212
• Handing in homework via PR
1313
```
1414

15-
- Chrome DevTools [Debugging](https://developers.google.com/web/tools/chrome-devtools/)
15+
## Software installation for the JavaScript 2 Module
1616

17-
### A Refresher from some previous covered topics:
17+
**_To save time, please do these preparations at home before coming to the first lecture._**
1818

19-
Links to MDN (Mozilla Developer Network) topics:
19+
1. Install the following extensions in VSCode (you may have installed some of them already):
2020

21-
- [Strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)
21+
- Code Spell Checker
22+
- ESLint
23+
- Prettier - Code formatter
24+
- open in browser
25+
- Live Server
26+
- Bracket Pair Colorizer
27+
28+
2. Install the ESLint tool globally by issuing the following command from the command line:
29+
30+
```
31+
npm install -g eslint
32+
```
33+
34+
3. Fork this repository (i.e., **JavaScript2**) and clone your fork to your laptop.
35+
36+
4. Open the `JavaScript2` folder from the cloned repository in VSCode.
37+
38+
5. Open a terminal window in VSCode and type the following command:
2239

23-
## Review
40+
```
41+
npm install
42+
```
2443

25-
Review through the topics of JavaScript1:
44+
## Review of JavaScript1
2645

27-
### JavaScript1 - Week 2
46+
As a refresher, go through the topics of JavaScript1:
47+
48+
### Week 2
2849

2950
- [Variables (var, let, const)](./../../../../fundamentals/blob/master/fundamentals/variables.md)
3051
- [Basic Data types (Strings, Numbers, Arrays, Booleans)](./../../../../fundamentals/blob/master/fundamentals/values.md)
3152
- [Operators](./../../../../fundamentals/blob/master/fundamentals/operators.md)
3253
- [Naming conventions](./../../../../fundamentals/blob/master/fundamentals/naming_conventions.md)
3354

34-
### JavaScript1 - Week 3
55+
### Week 3
3556

3657
- [Advanced data types (objects)](./../../../../fundamentals/blob/master/fundamentals/objects.md)
3758
- [Conditional execution](./../../../../fundamentals/blob/master/fundamentals/conditional_execution.md) <br>
@@ -40,7 +61,7 @@ Review through the topics of JavaScript1:
4061
- [Functions](./../../../../fundamentals/blob/master/fundamentals/functions.md)
4162
- [Scope](./../../../../fundamentals/blob/master/fundamentals/scope.md)
4263

43-
### Required readings
64+
## Required readings for the first lecture
4465

4566
(No reading material available at this time for the crossed-out topics)
4667

@@ -53,6 +74,11 @@ Review through the topics of JavaScript1:
5374
- [Code formatting](./../../../../fundamentals/blob/master/fundamentals/code_formatting.md)
5475
- [Handing in homework via PR](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md)
5576

77+
Extras:
78+
79+
- [Strict mode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)
80+
- [Chrome DevTools Debugging](https://developers.google.com/web/tools/chrome-devtools/)
81+
5682
### Recommended readings
5783

5884
These chapters from _Eloquent JavaScript_ give in-depth explanations of the topics that will be discussed during the lecture. Highly recommended (if time permits).
@@ -61,20 +87,20 @@ These chapters from _Eloquent JavaScript_ give in-depth explanations of the topi
6187

6288
- Chapter 14: [The Document Object Model](http://eloquentjavascript.net/14_dom.html)
6389

64-
_You can skip the following sections:_
90+
_You can skip the following sections:_
6591

66-
- Moving through the tree
92+
- Moving through the tree
6793

6894
- Chapter 15: [Handling Events](http://eloquentjavascript.net/15_event.html)
6995

70-
Notes: for the lectures and homework you only need to know about these events: `click`, `change`, `keyup` and `load`.
71-
72-
_You can skip the following sections (but come to these sections when doing the React module):_
96+
Notes: for the lectures and homework you only need to know about these events: `click`, `change`, `keyup` and `load`.
97+
98+
_You can skip the following sections (but come to these sections when doing the React module):_
7399

74-
- Touch events
75-
- Scroll events
76-
- Focus events
77-
- Events and the Event Loop
78-
- Debouncing
100+
- Touch events
101+
- Scroll events
102+
- Focus events
103+
- Events and the Event Loop
104+
- Debouncing
79105

80106
_Please go through the material and come to class prepared!_

Week1/homework/app.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
'use strict';
2+
23
{
34
const bookTitles = [
45
// Replace with your own book titles
56
'harry_potter_chamber_secrets'
67
];
78

8-
99
// Replace with your own code
1010
console.log(bookTitles);
1111
}

0 commit comments

Comments
 (0)