Skip to content

Commit 768590d

Browse files
authored
Rewrote the homework
Added a custom challenge that focuses on DOM manipulation
1 parent 5fbcd5d commit 768590d

1 file changed

Lines changed: 9 additions & 118 deletions

File tree

‎Week3/MAKEME.md‎

Lines changed: 9 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,19 @@
11
# Homework Week 3
22

33
## Read:
4-
- https://en.wikipedia.org/wiki/Object-oriented_programming
5-
- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this
6-
- https://developer.mozilla.org/en-US/docs/Glossary/Scope
7-
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions
4+
- https://github.com/HackYourFuture/JavaScript/blob/laurens_thomas/Week3/README.md
85

96
## Challenges:
107
- https://www.freecodecamp.com/challenges/declare-javascript-objects-as-variables
118
- https://www.freecodecamp.com/challenges/make-instances-of-objects-with-a-constructor-function
129
- https://www.freecodecamp.com/challenges/make-unique-objects-by-passing-parameters-to-our-constructor
1310
- https://www.freecodecamp.com/challenges/make-object-properties-private
1411

15-
And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in-a-range
16-
17-
Loops practice - https://www.freecodecamp.com/challenges/iterate-with-javascript-for-loops
18-
https://www.freecodecamp.com/challenges/iterate-with-javascript-while-loops
19-
https://developer.mozilla.org/en/docs/Web/JavaScript/Closures
20-
21-
22-
### Refresher
23-
https://forum.freecodecamp.com/t/javascript-callback-functions/14658/2
24-
25-
http://www.learn-js.org/en/Callbacks
26-
27-
### Homework
28-
29-
1.
30-
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:
31-
32-
```
33-
function doIt() {
34-
console.log('I am done');
35-
}
36-
setTimeout(doIt, 5000)
37-
```
38-
If you run the above code it will wait 5 seconds and print `I am done`. Please read something about setTimeout on MDN. The first argument to the `setTimeout` call is the callback (`doIt`)
39-
40-
You must write a function that takes 4 arguments.
41-
- A start value
42-
- An end value
43-
- A callback to call if the number is divisible by 3
44-
- A callback to use if the number is divisible by 5
45-
46-
The function should generate an array containing values from start value to end value (inclusive).
47-
48-
Then the function should itereate over the array and call the second argument if the array value is divisible by 3
49-
50-
The function should call the second argument if the array value is divisible by 5
51-
52-
Both functions should be called if the array value is divisible by both 3 and 5
53-
54-
```
55-
THIS IS FAKE CODE
56-
function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) {
57-
// make array
58-
// start at beginning of array and check if you should call threeCallback or fiveCallback or go on to next
59-
}
60-
threeFive(10, 15, sayThree, sayFive);
61-
62-
// Should create an array [10,11,12,13,14,15]
63-
// and call sayFive, sayThree, sayThree, sayFive - please make sure you see why these calls are made before you start coding
64-
```
65-
66-
67-
2.
68-
Please solve this problem using:
69-
https://www.freecodecamp.com/challenges/repeat-a-string-repeat-a-string
70-
1. A for loop
71-
2. A while loop
72-
3. A do loop
73-
74-
3.
75-
Some practice with objects
76-
https://www.freecodecamp.com/challenges/construct-javascript-objects-with-functions
77-
78-
4.
79-
Nested loops
80-
https://www.freecodecamp.com/challenges/nesting-for-loops
81-
82-
83-
5.
84-
We did some work with arrays - `var arr = [1,2,3]`
85-
We can also nest arrays inside arrays like this `var arr2d = [[1,2], [3,4], [5,6]]` (for math people you can think of this as a matrix)
86-
How would you print all the items of an array with 3 dimensions?
87-
How about with K dimensions?
88-
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)
89-
90-
6.
91-
Here are two functions that look like they do the something similar but they print different results. Please explain what's going on here.
92-
93-
```
94-
var x = 9;
95-
function f1(val) {
96-
val = val+1;
97-
return val;
98-
}
99-
f1(x);
100-
console.log(x);
101-
102-
103-
var y = { x: 9 };
104-
function f2(val) {
105-
val.x = val.x + 1;
106-
return val;
107-
}
108-
f2(y);
109-
console.log(y);
110-
```
111-
If you are confused please run the code and then consult the Google for "javascript pass by value pass by reference"
112-
113-
7.
114-
Next time we're going to cover the following Javascript topics:
115-
- Immediately Invoked Function Execution (IIFE) and anonymous functions
116-
- The this variable
117-
- Scope and closures
118-
- Promises (callbacks part 2)
119-
- Using APIs
120-
121-
Please read up on these topics
122-
123-
124-
125-
126-
127-
128-
12+
And a custom DOM manipulation challenge :mortar_board:
13+
1. Make a list of >= 10 books you've read, store it in an array, log the array
14+
2. Create a basic html file called inxed.html and use it to load the js file, confirm the console.log show the lists
15+
3. Generate a `ul` with a `li` for each book in the array using a forloop and a function
16+
4. Use a forloop to generate objects for each book, then add at least the following properties to each object: title, language, author. Change the function generating the `ul` so that it now generates a section for each object.
17+
5. Fill each section with the details you have for each book using a function. Make sure you choose the right html elements for each piece of info, for instance, a heading for the title.
18+
6. Download book covers for each book, give each book object a property storing the location of the cover image for that book. write a function that uses a query selector to select each of the previously generated sections and insert a generated `img` element that shows the books cover.
19+
7. Beautify your html page with css, add sources and alts to each of the images.

0 commit comments

Comments
 (0)