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
+31-18Lines changed: 31 additions & 18 deletions
Original file line number
Diff line number
Diff line change
@@ -9,47 +9,47 @@ 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
28
28
This repository consists of 3 essential parts:
29
29
30
-
1.`Reading materials`: this document contains all the required theory you need to know _**while**_ you're coding. It's meant as both study material and as a reference to understand what you're doing.
31
-
2.`Homework`: this document contains the instructions for each week's homework.
32
-
3.`Lesson Plans`: this part is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well!
30
+
1.`README`: this document contains all the required theory you need to understand **before** class. It's also meant as a reference to understand what you're doing while you're coding.
31
+
2.`MAKEME`: this document contains the instructions for each week's homework.
32
+
3.`LESSONPLAN`: this document is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well!
33
33
34
-
After your first class you should start off with checking the `reading materials` for that week. At the beginning that would be the [Week 1 Reading](/Week1/README.md). Study all the concepts and try to get the gist of everything. After, you can get started with the `homework` for that week.
34
+
**Before** the first class of the module you should start off with the [Week 1 Reading](/Week1/README.md). Study all the concepts and try to get the gist of everything. After your first class, you can get started with the [Week 1 Homework](/Week1/MAKEME.md).
35
35
36
36
If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack!
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-YOURNAME` and you can get started!
80
+
81
+
If you have any questions or if something is not entirely clear ¯\_(ツ)\_/¯, please ask/comment on Slack!
@@ -15,160 +15,110 @@ 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.
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/).
68
+
In the following three weeks you are going to write an application that makes use of the [GitHub API](https://developer.github.com/v3/guides/getting-started/). Each week builds on top of the other, just like a real-world application!
69
69
70
-
Figure 1 below shows an example of what your application will look like.
Click on the image to open up the demo of the application!
71
72
72
-
73
-
74
-
This application does 2 things:
73
+
This application, HackYourRepo, does 2 things:
75
74
76
75
1. It makes connection to the GitHub API and retrieves all the repositories found in the [HackYourFuture account](https://www.github.com/hackyourfuture).
77
-
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.
78
-
79
-
### Getting an overview
80
-
81
-
For this week you're expected to build upon pre-existing code, found in the folder `homework`. Here's what you'll find:
3. Open the `index.html` file in your browser. You will see an unordered list with the names of the HYF repositories.
121
-
122
-
4. Review the `main()` function in `index.js` and examine how this code fetches the JSON data and calls renders the data as unordered list in the web page.
2. It displays those repositories in an alphabetically-ordered list. When a user clicks on any of the repository names it will show more details about it.
77
+
78
+
In the course of the next 3 weeks you'll be writing the necessary code to make all of this work!
79
+
80
+
### 4.1 Requirements
81
+
82
+
To get started, make sure you're in the right GIT branch: `week1-[YOURNAME]`. Then, navigate to the `hackyourrepo-app` folder and become familiar with the files there.
83
+
84
+
This week you're required to (1) setup the HTML structure of the application. In addition, you are expected to (2) style the application to make it user-friendly.
85
+
86
+
Here are the requirements for the HTML:
87
+
88
+
- Include 3 `<section>` tags
89
+
- Include a `<select>` tag
90
+
- Use the following placeholder data:
91
+
92
+
```js
93
+
constplaceholderRepos= [
94
+
{
95
+
name:'SampleRepo1',
96
+
description:'This repository is meant to be a sample',
97
+
forks:5,
98
+
updated:'2020-05-27 12:00:00',
99
+
},
100
+
{
101
+
name:'AndAnotherOne',
102
+
description:'Another sample repo! Can you believe it?',
103
+
forks:9,
104
+
updated:'2020-05-27 12:00:00',
105
+
},
106
+
{
107
+
name:'HYF-Is-The-Best',
108
+
description:
109
+
"This repository contains all things HackYourFuture. That's because HYF is amazing!!!!",
110
+
forks:130,
111
+
updated:'2020-05-27 12:00:00',
112
+
},
113
+
];
128
114
```
129
115
130
-
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/).
131
-
132
-
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)).
133
-
134
-
### Week 1 Assignment
135
-
136
-
The assignment for this week is to produce a functional application that looks similar to Figure 1:
137
-
138
-
139
-
140
-
Functionally, the application should do the following:
141
-
142
-
1. Make an API call to the endpoint: https://api.github.com/orgs/HackYourFuture/repos?per_page=100
143
-
2. Display the first 10 items in the HTML file (write JavaScript to add element to the DOM)
144
-
3. Show feedback when an error has happened
145
-
146
-
Modify the following files:
147
-
148
-
**1. `index.js`**
149
-
150
-
- Add new functions and modify function `main()` as you see fit.
151
-
- 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:
152
-
153
-
154
-
155
-
<small>Figure 2. Rendering of network errors.</small>
156
-
157
-
**2. `style.css`**
158
-
159
-
- 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.
160
-
161
-
**You are not allowed to use a CSS library such as Bootstrap.**
162
-
163
-
**Hints:**
164
-
165
-
- 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).
166
-
167
-
- Use CSS media queries, percentage values and [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to make the UI responsive.
116
+
Here are the requirements for the CSS:
168
117
169
-
- 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`.
118
+
- Make use of `flexbox`
119
+
- Make use of `media-queries` and `calc()` to make the page responsive ([mobile, tablet, desktop](https://tinyurl.com/yc5zmste))
170
120
171
-
Good luck!
121
+
Other than this you can create your own version of the page!
0 commit comments