You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
| 1. | Document-Object Model (DOM), DOM manipulation |[Reading W1](/Week1/README.md)|[Homework W1](/Week1/MAKEME.md)|[Lesson Plan W1](/Week1/LESSONPLAN.md)|
38
-
| 2. | Synchronous vs. asynchronous, Event Loop, Callbacks |[Reading W2](/Week2/README.md)|[Homework W2](/Week2/MAKEME.md)|[Lesson Plan W2](/Week1/LESSONPLAN.md)|
39
-
| 3. | Scope, Hoisting, Closures|[Reading W3](/Week3/README.md)|[Homework W3](/Week3/MAKEME.md)|[Lesson Plan W3](/Week1/LESSONPLAN.md)|
| 1. | Document-Object Model (DOM), DOM manipulation |[Reading W1](/Week1/README.md)|[Homework W1](/Week1/MAKEME.md)|[Lesson Plan W1](/Week1/LESSONPLAN.md)|
40
+
| 2. | Synchronous vs. asynchronous, Event Loop, Callbacks |[Reading W2](/Week2/README.md)|[Homework W2](/Week2/MAKEME.md)|[Lesson Plan W2](/Week1/LESSONPLAN.md)|
41
+
| 3. | Scope, Hoisting, Closures, Thinking like a programmer II|[Reading W3](/Week3/README.md)|[Homework W3](/Week3/MAKEME.md)|[Lesson Plan W3](/Week1/LESSONPLAN.md)|
40
42
41
43
## Test
42
44
43
45
At the end of this module you'll be doing a formative test. It will be done on **paper** and will consist of **4 exercises** that will test your JavaScript1 and JavaScript2 knowledge.
44
46
45
-
Why on paper, you might ask? Fundamental understanding should become intuitive. Only after having learned and mastered a concept deeply will you be able to use it creatively. If you rely too much on others, on Google or your code editor to do your thinking you'll make it very hard to cultivate the habit to think for yourself.
46
-
47
-
Also important to note: this test is done for 2 reasons only.
48
-
49
-
(1) **HackYourFuture wants to know** what skill level you are at.
50
-
51
-
(2) The test will **give you an indication** of what skill level you are at.
47
+
Why on paper? Fundamental understanding should become intuitive. Only after having learned and mastered a concept deeply will you be able to use it creatively. If you rely too much on others, on Google or your code editor to do your thinking you'll make it very hard to cultivate the habit to think for yourself.
Copy file name to clipboardExpand all lines: Week1/MAKEME.md
+45-34Lines changed: 45 additions & 34 deletions
Original file line number
Diff line number
Diff line change
@@ -5,10 +5,12 @@
5
5
1. Practice the concepts
6
6
2. JavaScript exercises
7
7
3. Code along
8
-
4. PROJECT:
8
+
4. PROJECT: Random Quote Generator
9
9
10
10
## **1. Practice the concepts**
11
11
12
+
Before we head into the exercises, it might be nice to do some interactive exercises first! In the following resource you'll find some exercises that'll teach you the basics of the interaction between JavaScript and the DOM
@@ -20,7 +22,7 @@ I'd like to display my three favorite books inside a nice webpage!
20
22
```js
21
23
constbooks= [
22
24
{
23
-
title:'The Design of EveryDay Things',
25
+
title:'The Design of Everyday Things',
24
26
author:'Don Norman',
25
27
alreadyRead:false,
26
28
},
@@ -36,7 +38,7 @@ const books = [
36
38
2. For each book, create a p element with the book title and author and append it to the page.
37
39
3. Use an <ul> and <li> to display the books.
38
40
4. Add an <img> to each book that links to a URL of the book cover.
39
-
5. Change the style of the book depending on whether you have read it or not.
41
+
5. Change the style of the book depending on whether you have read it (green) or not (red).
40
42
41
43
### 2. About me
42
44
@@ -61,39 +63,31 @@ Start with this HTML and save it as "about_me.html":
61
63
</html>
62
64
```
63
65
64
-
Add a script tag to the bottom of the HTML body.
65
-
(In the JavaScript) Change the body tag's style so it has a font-family of "Arial, sans-serif".
66
-
(In the JavaScript) Replace each of the spans (nickname, fav-food, hometown) with your own information.
67
-
Iterate through each li and change the class to "list-item".
68
-
(In the HTML head) Add a style tag that sets a rule for .list-item to make the color red.
69
-
Create a new img element and set its src attribute to a picture of you. Append that element to the page.
66
+
1. Add a script tag to the bottom of the HTML body.
67
+
2. (In the JavaScript) Change the body tag's style so it has a font-family of "Arial, sans-serif".
68
+
3. (In the JavaScript) Replace each of the spans (nickname, fav-food, hometown) with your own information.
69
+
4. Iterate through each li and change the class to "list-item".
70
+
5. (In the HTML head) Add a style tag that sets a rule for .list-item to make the color red.
71
+
6. Create a new img element and set its src attribute to a picture of you. Append that element to the page.
72
+
73
+
### 3. The logo hijack
70
74
71
-
### 3. The Logo Hijack
75
+
No homepage is safe from the logo bandit! Everytime he sees a Google Logo he replaces it with a logo from HackYourfuture instead: https://www.hackyourfuture.dk/static/logo-dark.svg.
72
76
73
-
No homepage is safe from the logo bandit!
77
+
In this exercise you're expected to write a JavaScript function that can be executed in the console of the [Google website](https://www.google.com).
74
78
75
-
Open up www.google.com in Chrome or Firefox, and open up the console.
76
-
Find the Google logo and store it in a variable.
77
-
Modify the source of the logo IMG so that it's a Yahoo logo instead.
78
-
Find the Google search button and store it in a variable.
79
-
Modify the text of the button so that it says "Yahooo!" instead.
79
+
1. Inside a JavaScript file, called `hijackGoogleLogo.js`, create a function called hijackGoogleLogo
80
+
2. Find out how to select the element that contains the Google logo, and store it in a variable
81
+
3. Modify the source and sourceset of the logo so that it's replaced by the HackYourFuture logo instead
80
82
81
-
### 4.
83
+
### 4. What's the time?
82
84
83
-
Write the code necessary to do the following:
85
+
Why wear a watch when you can check the time, live in your webpage?
84
86
85
-
Select the section with an id of container without using querySelector.
86
-
Select the section with an id of container using querySelector.
87
-
Select all of the list items with a class of "second".
88
-
Select a list item with a class of third, but only the list item inside of the ol tag.
89
-
Give the section with an id of container the text "Hello!".
90
-
Add the class main to the div with a class of footer.
91
-
Remove the class main on the div with a class of footer.
92
-
Create a new li element.
93
-
Give the li the text "four".
94
-
Append the li to the ul element.
95
-
Loop over all of the lis inside the ol tag and give them a background color of "green".
96
-
Remove the div with a class of footer.
87
+
1. Create an empty HTML file, called `time.html`
88
+
2. Create a JavaScript file called `showCurrentTime.js` and include it in the HTML file
89
+
3. Inside the JS file, write a function that adds the current time to the webpage. Make sure it's written in the HH:MM:SS notation (hour, minute, second). Hint: use `setInterval()` to make sure the time stays current
90
+
4. Have the function execute when it's loading in the browser
97
91
98
92
### 5. The cat walk
99
93
@@ -117,16 +111,33 @@ Start with this webpage, which has a single img tag of an animated GIF of a cat
117
111
3. Change the style of the img to have a "left" of "0px", so that it starts at the left hand of the screens.
118
112
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.
119
113
5. Call that function every 50 milliseconds. Your cat should now be moving across the screen from left to right. Hurrah!
120
-
121
114
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.
122
-
123
115
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.
124
116
125
117
## **3. Code along**
126
118
119
+
In the following tutorial you'll learn how to make a small web application that allows a user to add new issues to a board. Included is practice with [Bootstrap](https://getbootstrap.com/).
120
+
127
121
-[Build an Issue Tracker](https://www.youtube.com/watch?v=NYq9J-Eur9U)
128
122
129
-
## **4. PROJECT: **
123
+
## **4. PROJECT: Random quote Generator**
124
+
125
+
> Every week ends with a project you have to build on your own. Instead of getting clear-cut instructions, you'll get a list of criteria that your project needs to measure up to.
126
+
127
+
In this week's project you'll be making a Random Quote Generator! It includes a text box and a simple button that, when clicked, take a random quote out of a set amount of quotes and show it in the page. Here's how it may look like:
Copy file name to clipboardExpand all lines: Week2/MAKEME.md
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -101,17 +101,17 @@ Follow these steps. Each step should build on the result of the previous step.
101
101
102
102
-[Build a Rock, Paper, Scissors Game](https://www.youtube.com/watch?v=WR_pWXJZiRY)
103
103
104
-
## **4. PROJECT:**
104
+
## **4. PROJECT:**
105
105
106
106
## **SUBMIT YOUR HOMEWORK!**
107
107
108
-
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.
109
-
110
-
Take a look at the following [guide](../hand-in-homework-guide.md) to see how it's done.
111
-
112
-
The homework that needs to be submitted is the following:
108
+
After you've finished your todo list it's time to show us what you got! The homework that needs to be submitted is the following:
113
109
114
110
1. JavaScript exercises
115
111
2. PROJECT:
116
112
113
+
Upload both to your forked JavaScript2 repository in GitHub. Make a pull request to the original repository.
114
+
115
+
> Forgotten how to upload your homework? Go through the [guide](../hand-in-homework-guide.md) to learn how to do this again.
Copy file name to clipboardExpand all lines: Week3/MAKEME.md
+65-71Lines changed: 65 additions & 71 deletions
Original file line number
Diff line number
Diff line change
@@ -11,38 +11,76 @@
11
11
12
12
## **2. JavaScript exercises**
13
13
14
-
##**3. Code along**
14
+
### Scope/closure exercises
15
15
16
-
-[Building a Real-World Application](https://www.youtube.com/watch?v=NYq9J-Eur9U)
16
+
**Exercise 1: Add six**
17
17
18
-
## **4. PROJECT:**
18
+
Write a function that would allow you to do this:
19
+
20
+
```js
21
+
constaddSix=createBase(6);
22
+
addSix(10); // returns 16
23
+
addSix(21); // returns 27
24
+
```
25
+
26
+
**Exercise 2: asds**
27
+
28
+
Write a function takes this array `['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c']` and returns an array which only has unique values in it (so it removes the duplicate ones). Make it a 'smart' algorithm that could do it for every array (only strings/number).
29
+
30
+
**Exercise 3: Guess the output**
19
31
20
-
# Homework Week 3
32
+
In this exercise you'll be presented with 3 code snippets. Your task to is guess the output and write out your reasoning, for each single one, in 50 words or less.
21
33
34
+
```js
35
+
let a =10;
36
+
constx= (function() {
37
+
a =12;
38
+
returnfunction() {
39
+
alert(a);
40
+
};
41
+
})();
42
+
43
+
x();
22
44
```
23
-
Topics discussed this week:
24
-
• Closures
25
-
• Scope
26
-
• Callbacks
45
+
46
+
```js
47
+
constx=9;
48
+
functionf1(val) {
49
+
val = val +1;
50
+
return val;
51
+
}
52
+
f1(x);
53
+
console.log(x);
54
+
55
+
consty= { x:9 };
56
+
functionf2(val) {
57
+
val.x=val.x+1;
58
+
return val;
59
+
}
60
+
f2(y);
61
+
console.log(y);
27
62
```
28
63
29
-
> [Here](https://github.com/HackYourFuture/JavaScript3/tree/master/Week1) you find the readings you have to complete before the first JavaScript3 lecture.
64
+
**Exercise 4: Make the sandwich**
30
65
31
-
## Step 1: Read
66
+
Mrs Potts the school dinner lady is tired of all the global sandwich variables getting under her feet and tripping her up all the time. She needs help cleaning her kitchen. Will you help her?
32
67
33
-
> Read:
68
+
She would like it very much if you would build a sandwich machine for her, but wrap it in a closure so as to keep everything neat.
- Everything you wanted to know about [JavaScript scope](https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/)
37
-
- JavaScript [Scoping and Hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html)
38
-
- 5 JavaScript [“Bad” Parts That Are Fixed In ES6](https://medium.freecodecamp.com/5-javascript-bad-parts-that-are-fixed-in-es6-c7c45d44fd81)
70
+
1. Create a self executing function
71
+
2. Within the closure, create three little functions to add the bread, spread the soya margarine and add the jam. These little methods should use console.log to write a string representing their action to the DOM, e.g. "Now spreading the jam!"
72
+
3. Assign makeSandwich to the global window object, thus smuggling it out of the closure.
73
+
4. Call makeSandwich from outside the closure
39
74
40
-
- More about [closures](https://www.reddit.com/r/learnjavascript/comments/1v6n8p/closure_explain_likei_am_in_high_school/?st=ixsp0mbe&sh=5526d150)
41
-
- A VERY popular [StackOverflow article](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work)
75
+
It should log to the console the following message:
42
76
43
-
## Step 2: JavaScript
77
+
```markdown
78
+
Adding bread
79
+
Now spreading the soya magarine
80
+
Spreading jam
81
+
```
44
82
45
-
_Deadline Wednesday_
83
+
**Exercise 5**
46
84
47
85
We learned a little bit about callbacks in JS. A callback is simply a function passed to another function that gets executed (run) after a potentially long running operation has completed. There is another function called `setTimeout` that will wait a specified period of time and then execute a function. For example:
> Note: The following assignments include some problems from _freeCodeCamp_. Note that some _freeCodeCamp_ examples still mention `var`. However you can safely replace them with `let` and `const` as appropriate.
102
140
103
-
**2.3** Please solve this problem:
104
-
105
-
> [Basic Algorithm Scripting: Repeat a String Repeat a String](https://www.freecodecamp.com/challenges/repeat-a-string-repeat-a-string)
106
-
107
-
_2.3.1_: with a `for` loop.
108
-
_2.3.2_: with a `while` loop.
109
-
_2.3.3_: with a `do...while` loop.
110
-
111
-
**2.4** Some practice with objects:
112
-
113
-
> [Object Oriented Programming: Define a Constructor Function](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/object-oriented-programming/define-a-constructor-function)<br> > [Object Oriented Programming: Use a Constructor to Create Objects](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/object-oriented-programming/use-a-constructor-to-create-objects)
114
-
115
141
**2.5** Nested loops
116
142
117
143
> [Basic JavaScript: Nesting For Loops
@@ -137,9 +163,6 @@ How would you flatten out all the items of an array with 2 dimensions into a one
137
163
constflattenedArr= [1, 2, 3, 4, 5, 6];
138
164
```
139
165
140
-
How about 3 dimensions? How about with _K_ dimensions?
141
-
What if you didn't know how deep the array was nested? (You don't have to write code for this but think about it.)
142
-
143
166
**2.7** Here are two functions that look like they do the something similar but they print different results. Please explain what's going on here.
144
167
145
168
```js
@@ -160,50 +183,21 @@ f2(y);
160
183
console.log(y);
161
184
```
162
185
163
-
If you are confused please run the code and then consult the Google for "javascript pass by value pass by reference"
164
-
165
-
## Step 3: Scope and Closures
166
-
167
-
_Deadline Saturday_
168
-
169
-
> Let's continue to learn a little more about scope and Closures.
170
-
171
-
Write a function that would allow you to do this:
172
-
173
-
```js
174
-
constaddSix=createBase(6);
175
-
addSix(10); // returns 16
176
-
addSix(21); // returns 27
177
-
```
178
-
179
-
**Bonus**: Write a function takes this array `['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c']` and returns an array which only has unique values in it (so it removes the duplicate ones). Make it a 'smart' algorithm that could do it for every array (only strings/number). Try to make it as fast as possible!
180
-
181
-
## Step 4: Run the unit tests
182
-
183
-
To run the unit test for the week 3 homework, open a terminal window in the `JavaScript2` folder and type
184
-
185
-
```
186
-
npm run test-week3
187
-
```
188
-
189
-
In case of errors, try and fix them. When done, run the tests again.
190
-
191
-
Repeat the previous step until all tests pass.
192
-
193
-
## Step 5: Read before next lecture
186
+
## **3. Code along**
194
187
195
-
_Deadline Sunday morning_
188
+
-[Build a Booklist App](https://www.youtube.com/watch?v=JaMCxVWtW58)
196
189
197
-
Go through the reading material in the [README.md](https://github.com/HackYourFuture/JavaScript3/tree/master/Week1) to prepare for your next class
190
+
## **4. PROJECT:**
198
191
199
192
## **SUBMIT YOUR HOMEWORK!**
200
193
201
-
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.
194
+
Finished? Good on you! The homework that needs to be submitted is the following:
202
195
203
-
Take a look at the following [guide](../hand-in-homework-guide.md) to see how it's done.
196
+
1. JavaScript exercises
197
+
2. PROJECT:
204
198
205
-
The homework that needs to be submitted is the following:
199
+
Upload both to your forked JavaScript2 repository in GitHub. Make a pull request to the original repository.
206
200
207
-
1. JavaScript exercises
201
+
> Forgotten how to upload your homework? Go through the [guide](../hand-in-homework-guide.md) to learn how to do this again.
0 commit comments