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
Copy file name to clipboardExpand all lines: Week3/MAKEME.md
+69-17Lines changed: 69 additions & 17 deletions
Original file line number
Diff line number
Diff line change
@@ -19,17 +19,12 @@ Let's continue exercising those programming muscles! Go through the following ex
19
19
20
20
> Inside of your `JavaScript3` fork and inside of the `Week3` folder, create a folder called `homework`. Inside of that folder, create a folder called `js-exercises`. For all the following exercises create a new `.js` file in that folder (3 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be `getName.js`.
21
21
22
-
**Exercise 1: **
22
+
**Exercise 1: Promise me to wait**
23
23
24
-
<!-- This exercise will be about practicing rewriting Promise syntax to async await -->
25
-
26
-
In this exercise you'll practice refactoring `Promise` syntax into `async/await` + `try/catch` syntax.
24
+
In this exercise you'll practice refactoring `Promise` syntax into `async/await` + `try/catch` syntax. Rewrite exercise A & B using `async/await` + `try/catch` syntax.
reject('Error: Not all items in the array are strings!');
47
+
}
48
+
});
49
+
resolve(capsArray);
50
+
});
51
+
};
52
+
53
+
makeAllCaps(arrayOfWords)
54
+
.then(result=>console.log(result))
55
+
.catch(error=>console.log(error));
56
+
```
57
+
58
+
**Exercise 2: Classify**
59
+
60
+
In this exercise you'll read a little story. It's your job to turn the characters in it into classes and instantiate the class into the characters you read about!
61
+
62
+
```md
63
+
# STORY
64
+
65
+
Abdulkareem is a 35 year old man, that lives in Riyadh. He has a wife and 3 children. As a day job he's a construction worker, that makes houses. He likes to eat dates and smoke water pipe.
66
+
67
+
Abdulkareem has a horse, named Adel. The horse is 15 years old and has the color brown. Usually the horse eats grass or helps transport materials for Abdulkareem.
68
+
69
+
And they lived happily ever after!
41
70
```
42
71
43
-
**Exercise 2: **
72
+
After reading this story, you have to:
73
+
74
+
- Create a class for Adbulkareem and Adel
75
+
- Instantiate those classes to create an Abdulkareem object and Adel object
76
+
77
+
**Exercise 3: Trivia time!**
44
78
45
-
<!-- This exercise will be about practicing creating and using classes -->
79
+
Don't you just love trivia games? Let's make our own!
46
80
47
-
**Exercise 3: **
81
+
In this exercise you'll make use of the [Open Trivia Database API](https://opentdb.com/). You are going to fetch 5 random trivia questions and then inject them into the DOM, inside of an accordion. It should behave similar to this:
48
82
49
-
<!-- This exercise will be about practicing -->
83
+
84
+
85
+
Here are the requirements:
86
+
87
+
- Create a folder called `trivia-app`, that includes an HTML, CSS and JavaScript file
88
+
- Link them all together in the HTML file
89
+
- Only provide the basic structure in the HTML file. All other DOM elements are to be created using JavaScript
90
+
- No CSS frameworks are allowed!
91
+
- Sometimes the strings you get back from the API contains HTML entities (like `"e;`). Find out a way to turn this into regular text
92
+
- Make use of the following endpoint: https://opentdb.com/api.php?amount=5
50
93
51
94
## **3. Code along**
52
95
53
-
In this weeks `code along` you'll be building a website that uses the YouTube API to fetch channel data and videos. You'll be creating a search form to change channels and use [OAuth2](https://www.youtube.com/watch?v=CPbvxxslDTU) to login and logout.
96
+
In this weeks `code along` you'll be building a Bookmarker application. It'll allow a user to add in URLs of their favorite websites in order to save it into a list.
54
97
55
98
Happy learning!
56
99
57
-
-[YouTube API Project with Authentication](https://www.youtube.com/watch?v=r-yxNNO1EI8)
@@ -80,21 +123,30 @@ Next to that you'll refactor your code using the software design principles you'
80
123
Here are the requirements:
81
124
82
125
- Create a separate `.js` for every function you create
83
-
- Import all top-level functions into the `script.js` file to execute
126
+
- Import all top-level functions into the `script.js` file to execute when the window has loaded
127
+
- Rewrite your logic to be as simple as possible. Use loops and logical operators when needed
128
+
- Rename your functions and variables to be as semantic as possible
129
+
- Store all your JavaScript files, besides `script.js` in a folder called `util` (short for utility functions)
130
+
131
+
> Utility functions are reusable functions that are made to solve common problems. They are regular functions that perform tasks like: performing a calculation, transform one data type into another or perform a DOM operation.
84
132
85
133
### 4.2 Add a feature: Pagination
86
134
87
-
You might have noticed that when a user selects a repository that has many contributors, the page's height becomes bigger and bigger (thus forcing the user to scroll down). Let's change that, by adding pagination!
135
+
You might have noticed that when a user selects a repository that has many contributors, the page's height becomes bigger and bigger (thus forcing the user to scroll down). Let's change that by adding pagination!
In the illustration, each number represents a page. You might have seen it before on websites like Amazon, when you're browsing through different products.
142
+
143
+
We'll replicate this functionality to allow a user to browse through different contributors without have to scroll incessantly.
94
144
95
145
Here are the requirements:
96
146
97
-
- Each "page" should contain at max 5 contributors. If the repository selected contains more than 5 contributors, it will get split up unto a different page
147
+
- Each "page" should contain at maximum 5 contributors. If the repository selected contains more than 5 contributors, it will get split up unto a different page (and thus create another addition)
148
+
- Slice the array into smaller parts and create a new page every time the maximum has been reached
149
+
- Allow a user to click from page to page by clicking on the number, or an arrow to go one page forward or backward
0 commit comments