Skip to content

Commit 7e6eab1

Browse files
committed
Update homework for week 1.
1 parent 292afd3 commit 7e6eab1

1 file changed

Lines changed: 39 additions & 30 deletions

File tree

‎Week1/MAKEME.md‎

Lines changed: 39 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
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
@@ -22,32 +22,53 @@ Give yourself (or your neighbor) a little tap on the shoulder, you've made it to
2222

2323
_Deadline Monday_
2424

25-
Your fellow students and teachers have provided you with feedback on your last JavaScript1 homework in Trello.
25+
Your fellow students and teachers have provided you with feedback on your last JavaScript1 homework in Trello.
2626

2727
- Implement both feedback from Trello and Github.
2828
- 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".
2929

30-
## Step 2: Custom DOM manipulation challenge :mortar_board:
30+
## Step 2: Custom IMDB scraper
3131

3232
_Deadline Saturday_
3333

34+
> **Preparation**: Open this link and accept the assignment: <https://classroom.github.com/a/_Ei0SDeE>. This will create your own repo where you can commit in.
35+
36+
Your goal is to parse the page `index.html` and print the name of each actor and their role in the console. Because there is a lot of noise in the console from scripts that fail to load, we will only print the names [on key press](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent).
37+
38+
**2.1** Review the code for the [web scraper](https://github.com/HackYourFutureBelgium/JavaScript2/tree/master/Projects/web-scraper). Note that we first select the correct `table` element. Then, for each row in the table, we extract the actor and their character role. Then we print both to the console.
39+
40+
**2.2** Now it's up to you! Clone your custom repository to your local computer:
41+
42+
git clone https://github.com/HackYourFutureBelgium/javascript-2-scraper-YOUR_NAME_HERE.git
43+
44+
Replace `YOUR_NAME_HERE` with your GitHub username.
45+
46+
**2.3** Open `index.html` in your browser and edit `scrape.js`. First, try a simple `console.log('hello')` to check if everything's working. Then, start adapting the code from the scraper we built in class. Print out the result of `document.querySelector` to check if you've selected the table correctly.
47+
48+
**2.4** If you get stuck, refer to the original code.
49+
50+
51+
## Step 3: (Optional) Custom DOM manipulation challenge :mortar_board:
52+
53+
_This is an optional assignment that will set you up for next week! If you still feel unsure about the DOM, this is an excellent introduction._
54+
3455
> **Preparation**: Fork this repository and use the [Homework Pull Request Workflow](../../../../fundamentals/blob/master/fundamentals/homework_pr.md) to hand in your homework.
3556
3657
Modify the (mostly empty) files in the `Week1/homework` folder for this step.
3758

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 :))
59+
**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 :))
60+
61+
**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.)
3962

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.)
63+
**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).
4164

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).
65+
**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`.
4366

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`.
67+
**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.
4568

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.
69+
**3.6** Beautify your html page with css (use the `style.css` file for that), add sources and alts to each of the images.
4770

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

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

@@ -63,38 +84,26 @@ Go over your homework one last time:
6384
- Is your code well-formatted (see [Code Formatting](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md))?
6485
- Have you resolved all issues flagged by ESLint and the spell checker (no wavy red and green underlines in VSCode)?
6586

66-
If the answer is 'yes' to all preceding questions you are ready to follow these instructions:
87+
If the answer is 'yes' to all preceding questions you are ready to commit and push your repo. This is a GitHub classroom assignment so we will automatically see your changes if you push them to your repo.
6788

68-
- [Handing in homework](../../../../fundamentals/blob/master/fundamentals/homework_pr.md)
69-
70-
## Step 4: **FreeCodeCamp challenges:**
89+
## Step 4: Read before next lecture
7190

7291
_Deadline Sunday morning_
7392

74-
- https://www.freecodecamp.com/challenges/declare-javascript-objects-as-variables
75-
- https://www.freecodecamp.com/challenges/make-instances-of-objects-with-a-constructor-function
76-
- https://www.freecodecamp.com/challenges/make-unique-objects-by-passing-parameters-to-our-constructor
77-
- https://www.freecodecamp.com/challenges/make-object-properties-private
78-
79-
80-
And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in-a-range
81-
82-
## Step 5: Read before next lecture
83-
84-
_Deadline Sunday morning_
93+
Make sure you have read [The Document Object Model](http://eloquentjavascript.net/14_dom.html) and [Handling Events](http://eloquentjavascript.net/15_event.html) from Eloquent JavaScript!
8594

86-
Go trough the reading material in the [README.md](/Week2/README.md) to prepare for your next class
95+
Go trough the reading material in the [README.md](/Week2/README.md) to prepare for your next class.
8796

8897
## :boom: Bonus homework :boom:
8998
the Bonus homework for this week (for those of you want an extra challenge) do the following:
9099

91100
- Sign up on codewars.com
92-
- In you account setting under “clan” write “Hack Your Future”
101+
- In you account setting under “clan” write “Hack Your Future”
93102
- Go do the challenges in the following playlist: https://www.codewars.com/collections/fun-fun-fundamentals
94103

95104
Codewars is really a lot of fun, and you can compete against each other who has the most points :trollface:
96105
it’s a great way to really practice JavaScript a lot in various problems.
97106

98107
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.
99108

100-
Enjoy!
109+
Enjoy!

0 commit comments

Comments
 (0)