|
1 | | -# Homework Week 1 |
| 1 | +# Homework JavaScript2 Week 1 |
2 | 2 |
|
3 | | -``` |
4 | | -Topics discussed in class this week: |
5 | | -• Capturing user input |
6 | | -• Events |
7 | | -• Basic DOM manipulations (img src, innerHTML) |
8 | | -• Code debugging using the browser |
9 | | -• Code commenting |
10 | | -• Structuring code files |
11 | | -• Code formatting |
12 | | -• Handing in homework via PR |
13 | | -``` |
14 | | - |
15 | | -> [Here](/Week2/README.md) you find the readings you have to complete before the second lecture. |
16 | | -
|
17 | | -## Step 0: Make a small dance |
18 | | - |
19 | | -Give yourself (or your neighbor) a little tap on the shoulder, you've made it to JS2! :muscle: |
20 | | - |
21 | | -## Step 1: Custom DOM manipulation challenge :mortar_board: |
22 | | - |
23 | | -_Deadline Thursday evening_ |
24 | | - |
25 | | -Modify the (mostly empty) files in the `Week1/homework` folder for this step. |
26 | | - |
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 :)) |
28 | | - |
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.) |
| 3 | +## **Todo list** |
30 | 4 |
|
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 title 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). |
| 5 | +1. Practice the concepts |
| 6 | +2. JavaScript exercises |
| 7 | +3. Code along |
| 8 | +4. PROJECT: |
32 | 9 |
|
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 title you thought up in step 1.1 as a key, and at least the following properties: `title`, `language` and `author`. |
| 10 | +## **1. Practice the concepts** |
34 | 11 |
|
35 | | -**1.5** Now change the function from step 1.3 that you used to display the book title 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. |
| 12 | +## **2. JavaScript exercises** |
36 | 13 |
|
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. |
| 14 | +### 1. The book list |
38 | 15 |
|
39 | | -**1.7** Find and download book covers for each book and construct a new object which has as keys the book titles again, and as value the path to the image source (e.g. `{ harry_potter_blabla: './img/harry_potter_blabla.jpg', ... }`). |
| 16 | +I'd like to display my three favorite books inside a nice webpage! |
40 | 17 |
|
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._) |
42 | | - |
43 | | -### How to hand in your homework: |
44 | | - |
45 | | -Go over your homework one last time: |
46 | | - |
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)? |
49 | | -- Have you resolved all issues flagged by ESLint and the spell checker (no wavy red and green underlines in VSCode)? |
50 | | - |
51 | | -If the answer is 'yes' to all preceding questions you are ready to follow these instructions: |
52 | | - |
53 | | -- [Handing in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md) |
54 | | - |
55 | | -## Step 2: **FreeCodeCamp challenges:** |
| 18 | +```js |
| 19 | +const books = [ |
| 20 | + { |
| 21 | + title: 'The Design of EveryDay Things', |
| 22 | + author: 'Don Norman', |
| 23 | + alreadyRead: false, |
| 24 | + }, |
| 25 | + { |
| 26 | + title: 'The Most Human Human', |
| 27 | + author: 'Brian Christian', |
| 28 | + alreadyRead: true, |
| 29 | + }, |
| 30 | +]; |
| 31 | +``` |
56 | 32 |
|
57 | | -_Deadline Sunday morning_ |
| 33 | +1. Iterate through the array of books. |
| 34 | +2. For each book, create a p element with the book title and author and append it to the page. |
| 35 | +3. Use an <ul> and <li> to display the books. |
| 36 | +4. Add an <img> to each book that links to a URL of the book cover. |
| 37 | +5. Change the style of the book depending on whether you have read it or not. |
| 38 | + |
| 39 | +### 2. About me |
| 40 | + |
| 41 | +Start with this HTML and save it as "about_me.html": |
| 42 | + |
| 43 | +```html |
| 44 | +<!DOCTYPE html> |
| 45 | +<html> |
| 46 | + <head> |
| 47 | + <meta charset="utf-8" /> |
| 48 | + <title>About Me</title> |
| 49 | + </head> |
| 50 | + <body> |
| 51 | + <h1>About Me</h1> |
| 52 | + |
| 53 | + <ul> |
| 54 | + <li>Nickname: <span id="nickname"></span></li> |
| 55 | + <li>Favorite food: <span id="fav-food"></span></li> |
| 56 | + <li>Hometown: <span id="hometown"></span></li> |
| 57 | + </ul> |
| 58 | + </body> |
| 59 | +</html> |
| 60 | +``` |
58 | 61 |
|
59 | | -- [Build JavaScript Objects](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects) |
| 62 | +Add a script tag to the bottom of the HTML body. |
| 63 | +(In the JavaScript) Change the body tag's style so it has a font-family of "Arial, sans-serif". |
| 64 | +(In the JavaScript) Replace each of the spans (nickname, fav-food, hometown) with your own information. |
| 65 | +Iterate through each li and change the class to "list-item". |
| 66 | +(In the HTML head) Add a style tag that sets a rule for .list-item to make the color red. |
| 67 | +Create a new img element and set its src attribute to a picture of you. Append that element to the page. |
| 68 | + |
| 69 | +### 3. The Logo Hijack |
| 70 | + |
| 71 | +No homepage is safe from the logo bandit! |
| 72 | + |
| 73 | +Open up www.google.com in Chrome or Firefox, and open up the console. |
| 74 | +Find the Google logo and store it in a variable. |
| 75 | +Modify the source of the logo IMG so that it's a Yahoo logo instead. |
| 76 | +Find the Google search button and store it in a variable. |
| 77 | +Modify the text of the button so that it says "Yahooo!" instead. |
| 78 | + |
| 79 | +### 4. |
| 80 | + |
| 81 | +Write the code necessary to do the following: |
| 82 | + |
| 83 | +Select the section with an id of container without using querySelector. |
| 84 | +Select the section with an id of container using querySelector. |
| 85 | +Select all of the list items with a class of "second". |
| 86 | +Select a list item with a class of third, but only the list item inside of the ol tag. |
| 87 | +Give the section with an id of container the text "Hello!". |
| 88 | +Add the class main to the div with a class of footer. |
| 89 | +Remove the class main on the div with a class of footer. |
| 90 | +Create a new li element. |
| 91 | +Give the li the text "four". |
| 92 | +Append the li to the ul element. |
| 93 | +Loop over all of the lis inside the ol tag and give them a background color of "green". |
| 94 | +Remove the div with a class of footer. |
| 95 | + |
| 96 | +### 5. The cat walk |
| 97 | + |
| 98 | +Start with this webpage, which has a single img tag of an animated GIF of a cat walking. |
| 99 | + |
| 100 | +```html |
| 101 | +<!DOCTYPE html> |
| 102 | +<html> |
| 103 | + <head> |
| 104 | + <meta charset="utf-8" /> |
| 105 | + <title>Cat Walk</title> |
| 106 | + </head> |
| 107 | + <body> |
| 108 | + <img style="position:absolute;" src="http://www.anniemation.com/clip_art/images/cat-walk.gif" /> |
| 109 | + </body> |
| 110 | +</html> |
| 111 | +``` |
60 | 112 |
|
61 | | -Use a Constructor to Create Objects |
| 113 | +1. Add a script tag at the bottom of the page, where you'll put all your code. |
| 114 | +2. Create a variable to store a reference to the img. |
| 115 | +3. Change the style of the img to have a "left" of "0px", so that it starts at the left hand of the screens. |
| 116 | +4. Create a function called catWalk() that moves the cat 10 pixels to the right of where it started, by changing the "left" style property. |
| 117 | +5. Call that function every 50 milliseconds. Your cat should now be moving across the screen from left to right. Hurrah! |
62 | 118 |
|
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) |
| 119 | +6. When the cat reaches the right-hand of the screen, restart them at the left hand side ("0px"). So they should keep walking from left to right across the screen, forever and ever. |
65 | 120 |
|
66 | | -And just for fun ... [Sum All Numbers in a Range](https://www.freecodecamp.com/challenges/sum-all-numbers-in-a-range) |
| 121 | +7. When the cat reaches the middle of the screen, replace the img with an image of a cat dancing (use this URL: https://tenor.com/StFI.gif), keep it dancing for 10 seconds, and then replace the img with the original image and have it continue the walk. |
67 | 122 |
|
68 | | -## Step 3: Read before next lecture |
| 123 | +## **3. Code along** |
69 | 124 |
|
70 | | -_Deadline Sunday morning_ |
| 125 | +- [Item Lister](https://www.youtube.com/watch?v=wK2cBMcDTss) |
| 126 | +- [Building a Real-World Application](https://www.youtube.com/watch?v=NYq9J-Eur9U) |
71 | 127 |
|
72 | | -Go trough the reading material in the [README.md](/Week2/README.md) to prepare for your next class |
| 128 | +## **4. PROJECT: ** |
73 | 129 |
|
74 | | -## :boom: Bonus homework :boom: |
| 130 | +## **SUBMIT YOUR HOMEWORK!** |
75 | 131 |
|
76 | | -the Bonus homework for this week (for those of you want an extra challenge) do the following: |
| 132 | +After you've finished your todo list it's time to show us what you got! Starting from this week you'll be submitting all your homework through GitHub. What you'll be doing is upload all your files to a forked repository (a copy from the original, which in this case is the [JavaScript1](https://www.github.com/HackYourFuture/JavaScript1) repository) using GIT. |
77 | 133 |
|
78 | | -- Sign up on codewars.com |
79 | | -- In you account setting under “clan” write “Hack Your Future” |
80 | | -- Go do the challenges in the following playlist: https://www.codewars.com/collections/fun-fun-fundamentals |
| 134 | +Take a look at the following [guide](../hand-in-homework-guide.md) to see how it's done. |
81 | 135 |
|
82 | | -Codewars is really a lot of fun, and you can compete against each other who has the most points :trollface: |
83 | | -it’s a great way to really practice JavaScript a lot in various problems. |
| 136 | +The homework that needs to be submitted is the following: |
84 | 137 |
|
85 | | -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. |
| 138 | +1. JavaScript exercises |
| 139 | +2. Project: |
86 | 140 |
|
87 | | -Enjoy! |
| 141 | +_Deadline Saturday 23.59 CET_ |
0 commit comments