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: README.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ Welcome to JavaScript3! Congratulations on making it this far. You're well on yo
9
9
10
10
A big part of being a programmer means moving data from one place to another. It also means working with other people's software. In this module you'll be learning about one of the core things of what makes a web developer: working with APIs!
11
11
12
-
On top of that you'll also learn how to think differently about how you write your programs. Like in any field, once you've mastered a particular way of doing things you start thinking about how it could be done differently. In programming we call these `paradigms` and in this module you'll one such paradigm: Object-Oriented Programming!
12
+
On top of that you'll also learn how to think differently about how you write your programs. Like in any field, once you've mastered a particular way of doing things you start thinking about how it could be done differently. In programming we call these `paradigms` and in this module you'll learn one such paradigm: Object-Oriented Programming!
Copy file name to clipboardExpand all lines: Week1/MAKEME.md
+43-21Lines changed: 43 additions & 21 deletions
Original file line number
Diff line number
Diff line change
@@ -24,6 +24,7 @@ Who doesn't love kittens on their screen?
24
24
Write an function that makes an API call to https://wwww.placekitten.com/api
25
25
26
26
- Inside the same file write two programs: one with `XMLHttpRequest`, and the other with `Axios`
27
+
- Each function should make an API call to the given endpoint: `https://wwww.placekitten.com/api`
27
28
- Log the received data to the console
28
29
- Incorporate error handling
29
30
@@ -33,7 +34,8 @@ Wouldn't it cool to make a new friend with just the click of a button?
33
34
34
35
Write a function that makes an API call to https://www.randomuser.me/api
35
36
36
-
- Inside the same file write two programs: one with `XMLHttpRequest`, and the other with `Axios`
37
+
- Inside the same file write two functions: one with `XMLHttpRequest`, and the other with `Axios`
38
+
- Each function should make an API call to the given endpoint: `https://www.randomuser.me/api`
37
39
- Log the received data to the console
38
40
- Incorporate error handling
39
41
@@ -45,7 +47,8 @@ Write a function that makes an API call to https://picsum.photos/400
45
47
46
48
- Create an `index.html` file that will display your random image
47
49
- Write two programs: one with `XMLHttpRequest`, and the other with `Axios`
48
-
- After receiving the data, render it to the page in a `<li>`
50
+
- Each function should make an API call to the given endpoint: `https://picsum.photos/400`
51
+
- After receiving the data, render it to the page in a `<img>`
49
52
- Incorporate error handling
50
53
51
54
## **3. Code along**
@@ -60,22 +63,20 @@ Enjoy!
60
63
61
64
## **4. PROJECT: Hack Your Repo I**
62
65
63
-
> In this assignment you will built upon some existing code that is already pre-written by your teachers. Your homework consist of writing the code to make the application work as requested per week.
64
-
65
66
In the following three weeks you are going to write a _Single Page Application_ (SPA) that makes use of the [GitHub API](https://developer.github.com/v3/guides/getting-started/).
66
67
67
-
Figure 1 below shows an example of what your application could look like.
68
+
Figure 1 below shows an example of what your application will look like.
68
69
69
70
70
71
71
-
This application serves 2 purpose:
72
+
This application does 2 things:
72
73
73
74
1. It makes connection to the GitHub API and retrieves all the repositories found in the [HackYourFuture account](https://www.github.com/hackyourfuture).
74
75
2. It displays those repositories in an alphabetically-oreded list. When a user clicks on any of the repository names it will show more details about it.
75
76
76
77
### Getting an overview
77
78
78
-
For this week you're expected to build upon the pre-existing code, found in the folder `homework`. Here's what you'll find:
79
+
For this week you're expected to build upon pre-existing code, found in the folder `homework`. Here's what you'll find:
> This URL is special, as it gives us data in JSON format. This type of URL is also known as an `endpoint`, an address that we can use to send a request to in order to get data. Learn more about endpoints [here](https://smartbear.com/learn/performance-monitoring/api-endpoints/).
128
+
This URL is special, as it gives us data in JSON format (Try it out in your browser!). This type of URL is also known as an `endpoint`, an address that we can use to send a request to in order to get data. Learn more about endpoints [here](https://smartbear.com/learn/performance-monitoring/api-endpoints/).
129
+
130
+
Note the query string `?per_page=100` in the above URL. If you don't specify this `query string` you will only get the first 30 repositories (the default `per_page` is 30, which we know because it says so in the [API documentation](https://developer.github.com/v3/#pagination)).
131
+
132
+
## Week 1 Assignment:
133
+
134
+
The assignment for this week is to produce a functional application that looks similar to Figure 1:
135
+
136
+
137
+
138
+
Functionally, the application should do the following:
139
+
140
+
1. Make an API call to the endpoint: https://api.github.com/orgs/HackYourFuture/repos?per_page=100
141
+
2. Display the first 10 items in the HTML file (write JavaScript to add element to the DOM)
142
+
3. Show feedback when an error has happened
143
+
144
+
Modify the following files:
145
+
146
+
**1. `index.js`**
147
+
148
+
- Add new functions and modify function `main()` as you see fit.
149
+
- Render network errors to the DOM (see Figure 2 below for an example). Do not use `console.log` as regular users will not see the console output. Instead, create an element that displays the error message in the DOM. Use the predefined `alert-error` class from `style.css` to style your error. It should look like this:
128
150
129
-
If you open this URL in the browser (_try it!_) you will receive JSON data about the available HYF repositories. This is the data that you will need to work with in this assignment.
151
+
130
152
131
-
<small>Note the query string `?per_page=100` in the above URL. If you don't specify this query string you will only get the first 30 repositories (the default `per_page` is 30, which we know because it says so in the [API documentation](https://developer.github.com/v3/#pagination)).</small>
153
+
<small>Figure 2. Rendering of network errors.</small>
132
154
133
-
The returned JSON data contains some basic information about each repository, such as `name`, `full_name`, `description` etc. There are also many properties that contain URLs that can be used to obtain detail information about certain aspects of the repository.
155
+
**2. `style.css`**
134
156
135
-
### In Summary: the assignment
157
+
- Add your own CSS styling. Use `style.css` for all of your CSS rules to style the `index.html`. Make sure your UI is responsive. Try it with Chrome Developer Tools in the browser, using a mobile phone format and a tablet format, portrait and landscape.
136
158
137
-
Do the following to fulfill this week's requirements:
159
+
**You are not allowed to use a CSS library such as Bootstrap.**
138
160
139
-
1. Modify **`index.js`**: Modify whatever you need in order to successfully make an API call to the HackYourFuture GitHub account and display the results inside the DOM. It is not likely that you will need to modify `fetchJSON()` and `createAndAppend()`.
161
+
**Hints:**
140
162
141
-
2. Add your own CSS styling inside **`style.css`**. Avoid using JavaScript for styling unless there is a genuine need. **You are not allowed to use a CSS library such as Bootstrap.**
163
+
- To sort the list repositories use [`.sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) and [`.localeCompare()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare).
142
164
143
-
**Hints**
165
+
- Use CSS media queries, percentage values and [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to make the UI responsive.
144
166
145
-
-Use CSS media queries and [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)to make the UI responsive.
167
+
-To force a `404` network error so that you can test the rendering of errors, change the URL to make an invalid GitHub request, e.g. append an `x` to `orgs`: `orgsx`.
146
168
147
169
Good luck!
148
170
@@ -153,7 +175,7 @@ After you've finished your todo list it's time to show us what you got! The home
153
175
1. JavaScript exercises
154
176
2. PROJECT: HackYourRepo I
155
177
156
-
Upload both to your forked JavaScript3 repository in GitHub. Make a pull request to the original repository.
178
+
Upload both to your forked JavaScript3 repository in GitHub. Make a pull request to your teacher's forked repository.
157
179
158
180
> 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: Week1/README.md
+13-4Lines changed: 13 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -171,7 +171,7 @@ axios
171
171
172
172
Any library that exists is developed to solve some problem. The main problems `axios` aims to solve are the following:
173
173
174
-
1. how to much easier make an `HTTP request`
174
+
1. how to make an `HTTP request` in an easier way
175
175
2. how to write more readable asynchronous code.
176
176
177
177
Here's how `axios` solves problem 1:
@@ -180,13 +180,22 @@ Here's how `axios` solves problem 1:
180
180
181
181
Here's how `axios` solves problem 2:
182
182
183
-
-
183
+
- It makes use of the Promise structure, which will allow you (the developer) to "chain" operations in a readable and intuitive way.
184
184
185
185
### How to use a library
186
186
187
-
Now that you've learned about the utility of libraries, let's talk a little about how to approach using a library. The first question we must ask is: when is it appropriate to use a library?
187
+
Now that you've learned about the utility of libraries, let's talk a little about how to approach using a library. Keep in mind that this is not the only way to do it, but it will set you off on a good start.
188
188
189
-
The second question is: how to start using a new library?
189
+
1.**Do your research**. Doing research means finding out more about the library. Is it new? Is it fully functional? What do other people say about using it? Is it backed by the community? Does the library have a GitHub page?
190
+
2.**Read the documentation**. If code has been published for everyone to use, most likely the developers have written a guide on how to use it. This is called `documentation`. After doing your research delve into it and try to figure out what the philosophy and usages of the library are.
191
+
3.**Try out a basic example**. A basic example can usually be found in the documentation. Copy and paste it into an empty file for yourself and try it out. It's best to try it out in isolation first, so that you can learn exactly what makes it work. Then slowly start playing around with it: change names, move lines of code.
192
+
4.**Try to integrate it with your own code base**. Once you've tried it out it's time integrate it into your own code. Figure out where to best put it. The documentation can help you out with that. Look at other developer's code and see how they use it. Watch videos or read articles online.
193
+
194
+
As an example, try it out with `axios`. To help you out, here are some resources:
Please watch the first 45 mins of the Ajax Crash Course by Traversy Media (see link below).
4
+
5
+
The example code in this course is using on ES5 syntax. In the **ajaxcrash** folder in this repo you will find updated example code (**ajax1** to **ajax3**) that use the ES6 syntax and styling that we prefer in HYF. Specifically, the following changes have been made:
6
+
7
+
1. The JavaScript code has been placed in a separate file, loaded with a `<script>` tag from the HTML file.
8
+
2. Instead of **var** to declare a variable, **const** and **let** are used.
9
+
3. The non-strict equality operator `==` has been replaced with the strict version `===`.
10
+
4. Functions are defined before they are used.
11
+
5. Anonymous functions use the arrow syntax instead of the **function** keyword. Consequently, the `this` value inside the **XMLHttpRequest** event handlers have been replaced with the `xhr` variable name.
12
+
6. The `for...in` loops for iterating through an array have been replace with `for...of`.
13
+
14
+
Watch this YouTube video up until the PHP examples (the first 45 mins):
15
+
16
+
- Traversy Media - [Ajax Crash Course](https://youtu.be/82hnvUYY6QA)
0 commit comments