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

Skip to content
This repository was archived by the owner on May 14, 2024. It is now read-only.

Adds VSCode workspace settings + Eloquent JavaScript #5

Merged
merged 7 commits into from
May 2, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,18 @@
{
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.formatOnPaste": true,
"editor.detectIndentation": false,
"editor.tabSize": 2,
"cSpell.words": [
"Codewars",
"Debouncing",
"Maartje",
"Maartje's",
"blabla",
"roverjs"
"codewars",
"keyup",
"maartje's",
"roverjs",
"taalmap",
"trollface"
]
}
64 changes: 16 additions & 48 deletions Week1/MAKEME.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,85 +2,52 @@

```
Topics discussed in class this week:
• Capturing user input
• Basic DOM manipulations [img src, innerHTML]
• Code debugging using the browser
• Capturing user input
• Events
• Basic DOM manipulations (img src, innerHTML)
• Code debugging using the browser
• Code commenting
• Structuring code files
Scope
State
Code formatting
Handing in homework via PR
```

>[Here](/Week2/README.md) you find the readings you have to complete before the second lecture.

## Step 0: Make a small dance
Give yourself (or your neighbor) a little tap on the shoulder, you've made it to JS2! :muscle:

## Step 0: review
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No review?


Week 2

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

Week 3

- [Advanced data types (objects)](./../../../../fundamentals/blob/master/fundamentals/objects.md)
- [Conditional execution](./../../../../fundamentals/blob/master/fundamentals/conditional_execution.md) <br>
- [Statements vs Expressions](./../../../../fundamentals/blob/master/fundamentals/statements_expressions.md)<br>
- [Loops (for/while)](./../../../../fundamentals/blob/master/fundamentals/loops.md)
- [Functions](./../../../../fundamentals/blob/master/fundamentals/functions.md)
- [Scope](./../../../../fundamentals/blob/master/fundamentals/scope.md)

Week 4

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


## Step 1: Implement feedback

_Deadline Monday_

Your fellow students have provided you with feedback in Trello.
Your fellow students and teachers have provided you with feedback on your last JavaScript1 homework 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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hi Jim why did you move this out?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Maartje, I moved this out because I think checking the structure should be part of the homework review, at least, that's how I have done it. In the MAKEME there are specific instructions on how to set up the repo and we actually created the hyf-javascript1 repo on GitHub during the lecture. And of course, as of JS2 we expects student to fork an existing repo.


_Deadline Monday_

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:
## Step 2: Custom DOM manipulation challenge :mortar_board:

_Deadline Saturday_

> **Preparation**: Fork this repository and use the [Homework Pull Request Workflow](../../../../fundamentals/blob/master/fundamentals/homework_pr.md) to hand in your homework.

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

**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 :))
**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 :))

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

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

**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`.
**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`.

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

**3.6** Beautify your html page with css (use the `style.css` file for that), add sources and alts to each of the images.
**2.6** Beautify your html page with css (use the `style.css` file for that), add sources and alts to each of the images.

**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', ... }`).
**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', ... }`).

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

Expand All @@ -94,6 +61,7 @@ Go over your homework one last time:
- 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))?
- Have you resolved all issues flagged by ESLint and the spell checker (no wavy red and green underlines in VSCode)?

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

Expand Down
44 changes: 36 additions & 8 deletions Week1/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ In week one we will discuss the following topics:
• Events
• Code commenting
• Structuring code files
• Code formatting
• Handing in homework via PR
```

- Chrome DevTools [Debugging](https://developers.google.com/web/tools/chrome-devtools/)
Expand All @@ -20,16 +22,16 @@ Links to MDN (Mozilla Developer Network) topics:

## Review

Go through the topics of week 2-4.
Review through the topics of JavaScript1:

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ha it was in there twice

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👌

### Week 2
### JavaScript1 - Week 2

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

### Week 3
### JavaScript1 - Week 3

- [Advanced data types (objects)](./../../../../fundamentals/blob/master/fundamentals/objects.md)
- [Conditional execution](./../../../../fundamentals/blob/master/fundamentals/conditional_execution.md) <br>
Expand All @@ -38,15 +40,41 @@ Go through the topics of week 2-4.
- [Functions](./../../../../fundamentals/blob/master/fundamentals/functions.md)
- [Scope](./../../../../fundamentals/blob/master/fundamentals/scope.md)

### Week 4
### Required readings

- Capturing user input
- Events
(No reading material available at this time for the crossed-out topics)

- ~~Capturing user input~~
- ~~Events~~
- [Basic DOM manipulations (img src, innerHTML)](./../../../../fundamentals/blob/master/fundamentals/DOM_manipulation.md)
- Code debugging using the browser
- ~~Code debugging using the browser~~
- [Code commenting](./../../../../fundamentals/blob/master/fundamentals/code_commenting.md)
- Structuring code files
- ~~Structuring code~~
- [Code formatting](./../../../../fundamentals/blob/master/fundamentals/code_formatting.md)
- [Handing in homework via PR](../../..//fundamentals/blob/master/fundamentals/homework_pr.md)

### Recommended readings

These chapters from _Eloquent JavaScript_ give in-depth explanations of the topics that will be discussed during the lecture. Highly recommended (if time permits).

- Chapter 13: [JavaScript and the Browser](http://eloquentjavascript.net/13_browser.html)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

great thank you

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

_You can skip the following sections:_

- Moving through the tree

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also thoughtful of you

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

Notes: for the lectures and homework you only need to know about these events: `click`, `change`, `keyup` and `load`.

_You can skip the following sections (but come to these sections when doing the React module):_

- Touch events
- Scroll events
- Focus events
- Events and the Event Loop
- Debouncing

_Please go through the material and come to class prepared!_
4 changes: 3 additions & 1 deletion Week2/MAKEME.md
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ Follow these steps. Each step should build on the result of the previous step.

## Step 3: ROVER

Finish up to chapter 7: JSON on [roverjs.com](http://roverjs.com/)!
Finish up to chapter 7: JSON on [roverjs.com](http://roverjs.com/)! (Alternative site: [roverjs.taalmap.nl](http://roverjs.taalmap.nl/))

## Step 4: **Some freeCodeCamp challenges:**

Expand Down Expand Up @@ -135,6 +135,8 @@ Go over your homework one last time:
- 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))?
- Have you resolved all issues flagged by ESLint and the spell checker (no wavy red and green underlines in VSCode)?


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

Expand Down
32 changes: 12 additions & 20 deletions Week2/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,38 +11,30 @@ In week two we will discuss the following topics:
• Arrow functions
```

### Here are resources that we like you to read as a preparation for the coming lecture.
## Here are resources that we like you to read as a preparation for the coming lecture.

#### JSON
### JSON
- [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) (MDN)

#### Map and Filter
### Map and Filter
- :dizzy: [Fun fun functional](https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84) :dizzy: Check the first 3-4 videos.

#### Code conventions
- Code conventions: http://javascript.crockford.com/code.html
### Code conventions
- Code conventions: http://crockford.com/javascript/code.html

#### Array cardio
### Array cardio
- Wes Bos' awesome free tutorials. Just make a free account and do Array Cardio #1 [here](https://javascript30.com/)

#### More objects
- Objects continued: http://eloquentjavascript.net/06_object.html

### From _Eloquent JavaScript_

### Refresher:
Read your book ('A Smarter Way To Learn JavaScript')! If you don't do it on yourself, here's the chapters to read next for next week:
*Note: If you already know the material you are reading just take a glance over it and don't use too much time. Just be sure that you get everything! You may have already read about it, or used it in the previous classes. Note that this also has 'catch up' material in it, about functions and objects. If you did not take the time to read your book yet about these things please do so!*
- Objects continued: http://eloquentjavascript.net/06_object.html

* DOM (*may have known material, know how to select/search/append elements etc.!*):</br>
Chapters 58 - 68

* Reading/setting input fields:</br>
Chapters 49 - 50
## Recommended readings

* Functions (*if you think you need a bit more understanding of them read this*):</br>
Chapters 35 - 38
This chapter from _Eloquent JavaScript_ gives in-depth explanations of the topics that will be discussed during the lecture. Highly recommended (if time permits).

* Objects (*important to really understand them, read this if you are unsure! You may also read chapters 72, 73 and 74 if you have time and want to learn more*):</br>
Chapters 70-71, 75
- Chapter 3 - [Functions](http://eloquentjavascript.net/03_functions.html)
- Chapter 5 - [Higher-Order Functions](http://eloquentjavascript.net/05_higher_order.html)

_Please go through the material and come to class prepared!_
1 change: 1 addition & 0 deletions Week3/MAKEME.md
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,7 @@ Go over your homework one last time:
- 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))?
- Have you resolved all issues flagged by ESLint and the spell checker (no wavy red and green underlines in VSCode)?

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

Expand Down
8 changes: 5 additions & 3 deletions Week3/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@ In week three we will discuss the following topics:
• Callbacks
```

### Here are resources that we like you to read as a preparation for the coming lecture:
## Here are resources that we like you to read as a preparation for the coming lecture:

### Closures

#### Closures
- [Closures](http://javascriptissexy.com/understand-javascript-closures-with-ease/)
- [MDN Closures](https://developer.mozilla.org/en/docs/Web/JavaScript/Closures)

#### Design patterns
### Design patterns

- [Learning JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailnamespacing) up to and including chapter 3

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