|
2 | 2 |
|
3 | 3 | ```
|
4 | 4 | Topics discussed in class this week:
|
5 |
| -• Capturing user input |
| 5 | +• Capturing user input |
6 | 6 | • Events
|
7 | 7 | • Basic DOM manipulations (img src, innerHTML)
|
8 |
| -• Code debugging using the browser |
| 8 | +• Code debugging using the browser |
9 | 9 | • Code commenting
|
10 | 10 | • Structuring code files
|
11 | 11 | • Code formatting
|
12 | 12 | • Handing in homework via PR
|
13 | 13 | ```
|
14 | 14 |
|
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. |
16 | 16 |
|
17 | 17 | ## 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. |
26 | 18 |
|
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: |
31 | 20 |
|
32 |
| -_Deadline Saturday_ |
| 21 | +## Step 1: Custom DOM manipulation challenge :mortar_board: |
33 | 22 |
|
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_ |
35 | 24 |
|
36 | 25 | Modify the (mostly empty) files in the `Week1/homework` folder for this step.
|
37 | 26 |
|
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 :)) |
39 | 28 |
|
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.) |
41 | 30 |
|
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). |
43 | 32 |
|
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`. |
45 | 34 |
|
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. |
47 | 36 |
|
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. |
51 | 38 |
|
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', ... }`). |
53 | 40 |
|
| 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._) |
54 | 42 |
|
55 | 43 | ### How to hand in your homework:
|
56 | 44 |
|
57 | 45 | Go over your homework one last time:
|
58 | 46 |
|
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)? |
64 | 49 | - Have you resolved all issues flagged by ESLint and the spell checker (no wavy red and green underlines in VSCode)?
|
65 | 50 |
|
66 | 51 | If the answer is 'yes' to all preceding questions you are ready to follow these instructions:
|
67 | 52 |
|
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) |
69 | 54 |
|
70 |
| -## Step 4: **FreeCodeCamp challenges:** |
| 55 | +## Step 2: **FreeCodeCamp challenges:** |
71 | 56 |
|
72 | 57 | _Deadline Sunday morning_
|
73 | 58 |
|
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) |
79 | 60 |
|
| 61 | +Use a Constructor to Create Objects |
80 | 62 |
|
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) |
82 | 65 |
|
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 |
84 | 69 |
|
85 | 70 | _Deadline Sunday morning_
|
86 | 71 |
|
87 | 72 | Go trough the reading material in the [README.md](/Week2/README.md) to prepare for your next class
|
88 | 73 |
|
89 | 74 | ## :boom: Bonus homework :boom:
|
| 75 | + |
90 | 76 | the Bonus homework for this week (for those of you want an extra challenge) do the following:
|
91 | 77 |
|
92 | 78 | - 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” |
94 | 80 | - Go do the challenges in the following playlist: https://www.codewars.com/collections/fun-fun-fundamentals
|
95 | 81 |
|
96 | 82 | Codewars is really a lot of fun, and you can compete against each other who has the most points :trollface:
|
|
0 commit comments