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
+27-14Lines changed: 27 additions & 14 deletions
Original file line number
Diff line number
Diff line change
@@ -9,19 +9,19 @@ 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 learn 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 in a smarter, different way. In programming we call these `paradigms` and in this module you'll learn one such paradigm: Object-Oriented Programming!
13
13
14
14
## Learning goals
15
15
16
16
In order to successfully complete this module you will need to master the following:
17
17
18
-
- Learn what an API is
19
-
- Catch up on the history of JavaScript
20
-
- Understand how to write more readable asynchronous JavaScript
21
-
- Connect with different public APIs
22
-
- Build a Single Page Application (SPA)
18
+
- Learn what an `Application Programming Interface` (API) is
19
+
- Catch up on the `history of JavaScript`
20
+
- Understand how to write more readable `asynchronous JavaScript`
21
+
- Connect with different `public APIs`
22
+
- Build a `Single Page Application` (SPA)
23
23
- Work with pre-existing code
24
-
- Learn about Object-Oriented Programming
24
+
- Learn about `Object-Oriented Programming`
25
25
26
26
## How to use this repository
27
27
@@ -37,19 +37,19 @@ If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯
37
37
38
38
## Before you start
39
39
40
-
In the following weeks we will be using a `styleguide` to help you write _"clean code"_. What is a styleguide? Simply put, it's a set of design standards put in one collection. Companies create and use them to define their public identity (their "brand"). Watch the following to get a better idea:
40
+
### Setup Style Guide
41
41
42
-
-[Creating Your Company's Style Guide](https://www.youtube.com/watch?v=gv_wrrY70E0)
42
+
In the following weeks we will be using a front-end `style guide` to help you write _"clean code"_. What is a style guide? Simply put, it's a set of coding standards put into one collection.
43
43
44
-
A styleguide is made by designers. In the case of website design, this styleguide is then handed over to developers to use when styling the frontend.
While you do not need to read this guide in detail, it is recommended that you look at sections 1-8, 12-13, 15-21 and 23.
51
51
52
-
The required packages you need to install in order to write code according to the styleguide are the following:
52
+
The required packages you need to install before you write code according to the style guide are the following:
53
53
54
54
```json
55
55
"eslint"
@@ -60,13 +60,26 @@ The required packages you need to install in order to write code according to th
60
60
"prettier"
61
61
```
62
62
63
-
They are already in this repository's `package.json` so all you have to do now to prepare is to execute the following command in your command line:
63
+
They are already in this repository's `package.json` so all you have to do now to prepare is to execute the following command at the root of this module directory:
64
64
65
65
```md
66
66
npm install
67
67
```
68
68
69
-
With this out of the way we can get started!
69
+
### Forking the right repository
70
+
71
+
Before you start with the homework, make sure you've made a fork of the right repository: [HackYourHomework/JavaScript3](https://www.github.com/hackyourhomework/javascript3)). Once you've cloned it to your computer you can proceed by making GIT branches for each week. Start at the `master` branch and execute the following (note that they're 3 different commands):
72
+
73
+
```bash
74
+
foo@bar:~$ git branch week1-YOURNAME
75
+
foo@bar:~$ git branch week2-YOURNAME
76
+
foo@bar:~$ git branch week3-YOURNAME
77
+
```
78
+
79
+
Then execute `git checkout week1` and you can get started!
80
+
81
+
If you have any questions or if something is not entirely clear ¯\_(ツ)\_/¯, please ask/comment on Slack!
Copy file name to clipboardExpand all lines: Week1/MAKEME.md
+13-13Lines changed: 13 additions & 13 deletions
Original file line number
Diff line number
Diff line change
@@ -15,49 +15,49 @@ This week's concepts can be challenging, therefore let's get an easy introductio
15
15
16
16
## **2. JavaScript exercises**
17
17
18
-
> Inside of your `JavaScript3` fork and inside of the `Week1` 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 placeKitten.js.
18
+
> Inside of your `JavaScript3` fork and inside of the `Week1` 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 `getRandomUser.js`.
19
19
20
20
**Exercise 1: Who do we have here?**
21
21
22
22
Wouldn't it cool to make a new friend with just the click of a button?
23
23
24
-
Write a function that makes an API call to `https://www.randomuser.me/api`
24
+
Write a function that makes a HTTP Request to `https://www.randomuser.me/api`
25
25
26
-
- Inside the same file write two functions: one with `XMLHttpRequest`, and the other with `axios`
27
-
- Each function should make an API call to the given endpoint: `https://www.randomuser.me/api`
26
+
- Inside the JavaScript file write two functions: one with `XMLHttpRequest`, and the other with `axios`
27
+
- Each function should make a HTTP Request to the given endpoint: `https://www.randomuser.me/api`
28
28
- Log the received data to the console
29
-
- Incorporate error handling
29
+
- Incorporate error handling: log to the console the error message
30
30
31
31
**Exercise 2: Programmer humor**
32
32
33
33
Who knew programmers could be funny?
34
34
35
-
Write an function that makes an API call to `https://xkcd.now.sh/?comic=latest`
35
+
Write a function that makes a HTTP Request to `https://xkcd.now.sh/?comic=latest`
36
36
37
37
- Inside the same file write two programs: one with `XMLHttpRequest`, and the other with `axios`
38
-
- Each function should make an API call to the given endpoint: `https://xkcd.now.sh/?comic=latest`
38
+
- Each function should make a HTTP Request to the given endpoint: `https://xkcd.now.sh/?comic=latest`
39
39
- Log the received data to the console
40
40
- Render the `img` property into an `<img>` tag in the DOM
41
-
- Incorporate error handling
41
+
- Incorporate error handling: log to the console the error message
42
42
43
43
**Exercise 3: Dog photo gallery**
44
44
45
45
Let's make a randomized dog photo gallery!
46
46
47
-
Write a function that makes an API call to `https://dog.ceo/api/breeds/image/random`. It should trigger after clicking a button in your webpage. Every time the button is clicked it should append a new dog image to the DOM.
47
+
Write a function that makes a HTTP Request to `https://dog.ceo/api/breeds/image/random`. It should trigger after clicking a button in your webpage. Every time the button is clicked it should append a new dog image to the DOM.
48
48
49
49
- Create an `index.html` file that will display your random image
50
50
- Add 2 `<button>` and 1 `<ul>` element, either in the HTML or through JavaScript
51
51
- Write two versions for the button functionality: one with `XMLHttpRequest`, and the other with `axios`
52
-
- When any one of the 2 buttons is clicked it should make an API call to `https://dog.ceo/api/breeds/image/random`
52
+
- When any one of the 2 buttons is clicked it should make a HTTP Request to `https://dog.ceo/api/breeds/image/random`
53
53
- After receiving the data, append to the `<ul>` a `<li>` that contains an `<img>` element with the dog image
54
-
- Incorporate error handling
54
+
- Incorporate error handling: log to the console the error message
55
55
56
56
## **3. Code along**
57
57
58
58
Now that you've learned about APIs and how to connect with them, let's apply it in the context of a complete application.
59
59
60
-
In the following application you'll be making an API call to an external, public API.
60
+
In the following application you'll be making a HTTP Request to an external, public API. You'll use that data in order to fetch facts that you'll display in your own application: a Numbers Facts application.
61
61
62
62
Enjoy!
63
63
@@ -139,7 +139,7 @@ The assignment for this week is to produce a functional application that looks s
139
139
140
140
Functionally, the application should do the following:
141
141
142
-
1. Make an API call to the endpoint: https://api.github.com/orgs/HackYourFuture/repos?per_page=100
142
+
1. Make a HTTP Request to the endpoint: https://api.github.com/orgs/HackYourFuture/repos?per_page=100
143
143
2. Display the first 10 items in the HTML file (write JavaScript to add element to the DOM)
0 commit comments