Skip to content

Commit d0cdf31

Browse files
Jaime Salas ZancadaJaime Salas Zancada
Jaime Salas Zancada
authored and
Jaime Salas Zancada
committed
added new start point for fetch
1 parent 2d8b9d2 commit d0cdf31

File tree

14 files changed

+201
-121
lines changed

14 files changed

+201
-121
lines changed

‎13 Fetch/00_start/README.md

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
## We're going to create a basic project to have a start point for our fetch demos.
2+
3+
### 1. Create project scaffolding
4+
5+
* Create _src_ folder on _<rootDir>_
6+
* Create _src/content_
7+
* Create _src/js_
8+
* Generate _package.json_, use `npm init` default initialization.
9+
* Install related dependencies
10+
```bash
11+
$ npm i parcel -D
12+
```
13+
14+
### 2. Create index.html on rootDir and src/content/site.css
15+
16+
```javascript
17+
<!doctype html>
18+
19+
<html lang="en">
20+
<head>
21+
<meta charset="utf-8">
22+
<title>Async fetch</title>
23+
<link rel="stylesheet" href="./src/content/site.css">
24+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
25+
</head>
26+
<body>
27+
<h2>Fetch</h2>
28+
<div clas="container-add-book">
29+
<!-- TODO: Use label and create styles for this form -->
30+
<form>
31+
Title:</br>
32+
<input type="text" id="title" name="title" />
33+
<br/>
34+
35+
Genre:</br>
36+
<input type="text" id="genre" name="genre" />
37+
<br/>
38+
39+
Author:</br>
40+
<input type="text" id="author" name="author" />
41+
</br>
42+
43+
Have you read this book?:</br>
44+
<input type="checkbox" id="read" name="read" />
45+
</br></br>
46+
<button id="container-add-book-form-submit">Add book</button>
47+
</form>
48+
</div>
49+
<div id="books-container" class="container">
50+
<button id="button-retrieve-books">Retrieve books</button>
51+
</div>
52+
53+
<script src="./src/js/main.js"></script>
54+
</body>
55+
</html>
56+
57+
```
58+
59+
```css
60+
@import url('https://fonts.googleapis.com/css?family=Raleway');
61+
62+
body {
63+
font-family: 'Raleway', sans-serif;
64+
}
65+
66+
.container {
67+
padding: 2em;
68+
}
69+
```
70+
71+
### 3. Create uiBuilder.js in src/js
72+
73+
```javascript
74+
export const createList = (elements) => {
75+
let list = document.createElement('ul');
76+
77+
elements.forEach((element) => {
78+
let listItem = document.createElement('li');
79+
80+
listItem.appendChild(document.createTextNode(element)); // Use mapper here, to extract and format data.
81+
82+
list.appendChild(listItem);
83+
});
84+
85+
return list;
86+
};
87+
88+
export const appendElement = (target, item) => {
89+
document.getElementById(target).appendChild(item);
90+
};
91+
```
92+
93+
### 4. To get this up and running lets define start in package.json
94+
95+
```diff
96+
....
97+
"scripts": {
98+
"test": "echo \"Error: no test specified\" && exit 1",
99+
+ "start": "parcel index.html"
100+
},
101+
....
102+
```

‎13 Fetch/00_start/index.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!doctype html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Async fetch</title>
7+
<link rel="stylesheet" href="./src/content/site.css">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
9+
</head>
10+
<body>
11+
<h2>Fetch</h2>
12+
<div clas="container-add-book">
13+
<!-- TODO: Use label and create styles for this form -->
14+
<form>
15+
Title:</br>
16+
<input type="text" id="title" name="title" />
17+
<br/>
18+
19+
Genre:</br>
20+
<input type="text" id="genre" name="genre" />
21+
<br/>
22+
23+
Author:</br>
24+
<input type="text" id="author" name="author" />
25+
</br>
26+
27+
Have you read this book?:</br>
28+
<input type="checkbox" id="read" name="read" />
29+
</br></br>
30+
<button id="container-add-book-form-submit">Add book</button>
31+
</form>
32+
</div>
33+
<div id="books-container" class="container">
34+
<button id="button-retrieve-books">Retrieve books</button>
35+
</div>
36+
37+
<script src="./src/js/main.js"></script>
38+
</body>
39+
</html>

‎13 Fetch/00_start/package.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "fetch-fundamentals",
3+
"version": "0.0.0",
4+
"description": "A repository to learn the fetch basics",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "parcel index.html",
8+
"test": "echo \"Error: no test specified\" && exit 1"
9+
},
10+
"keywords": [
11+
"fetch",
12+
"async",
13+
"javascript"
14+
],
15+
"author": "Jaime Salas",
16+
"license": "MIT",
17+
"devDependencies": {
18+
"parcel": "^1.12.3"
19+
}
20+
}

‎13 Fetch/00_start/src/content/site.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@import url('https://fonts.googleapis.com/css?family=Raleway');
2+
3+
body {
4+
font-family: 'Raleway', sans-serif;
5+
}
6+
7+
.container {
8+
padding: 2em;
9+
}

‎13 Fetch/00_start/src/js/uiBuilder.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export const createList = (elements) => {
2+
let list = document.createElement('ul');
3+
4+
elements.forEach((element) => {
5+
let listItem = document.createElement('li');
6+
7+
listItem.appendChild(document.createTextNode(element)); // Use mapper here, to extract and format data.
8+
9+
list.appendChild(listItem);
10+
});
11+
12+
return list;
13+
};
14+
15+
export const appendElement = (target, item) => {
16+
document.getElementById(target).appendChild(item);
17+
};

‎13 Fetch/00_createRequestFactory/README.md ‎13 Fetch/01_createRequestFactory/README.md

+8-108
Original file line numberDiff line numberDiff line change
@@ -3,97 +3,7 @@
33
> Reference: https://medium.com/@shahata/why-i-wont-be-using-fetch-api-in-my-apps-6900e6c6fe78
44
> Reference: https://www.tjvantoll.com/2015/09/13/fetch-and-errors/
55
6-
### 1. Create project scaffolding
7-
8-
* Create _src_ folder on _<rootDir>_
9-
* Create _src/content_
10-
* Create _src/js_
11-
* Generate _package.json_, use `npm init` default initialization.
12-
* Install related dependencies
13-
```bash
14-
$ npm i parcel -D
15-
```
16-
17-
### 2. Create index.html on rootDir and src/content/site.css
18-
19-
```javascript
20-
<!doctype html>
21-
22-
<html lang="en">
23-
<head>
24-
<meta charset="utf-8">
25-
<title>Async fetch</title>
26-
<link rel="stylesheet" href="./src/content/site.css">
27-
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
28-
</head>
29-
<body>
30-
<h2>Fetch</h2>
31-
<div clas="container-add-book">
32-
<!-- TODO: Use label and create styles for this form -->
33-
<form>
34-
Title:</br>
35-
<input type="text" id="title" name="title" />
36-
<br/>
37-
38-
Genre:</br>
39-
<input type="text" id="genre" name="genre" />
40-
<br/>
41-
42-
Author:</br>
43-
<input type="text" id="author" name="author" />
44-
</br>
45-
46-
Have you read this book?:</br>
47-
<input type="checkbox" id="read" name="read" />
48-
</br></br>
49-
<button id="container-add-book-form-submit">Add book</button>
50-
</form>
51-
</div>
52-
<div id="books-container" class="container">
53-
<button id="button-retrieve-books">Retrieve books</button>
54-
</div>
55-
56-
<script src="./src/js/main.js"></script>
57-
</body>
58-
</html>
59-
60-
```
61-
62-
```css
63-
@import url('https://fonts.googleapis.com/css?family=Raleway');
64-
65-
body {
66-
font-family: 'Raleway', sans-serif;
67-
}
68-
69-
.container {
70-
padding: 2em;
71-
}
72-
```
73-
74-
### 3. Create uiBuilder.js in src/js
75-
76-
```javascript
77-
export const createList = (elements) => {
78-
let list = document.createElement('ul');
79-
80-
elements.forEach((element) => {
81-
let listItem = document.createElement('li');
82-
83-
listItem.appendChild(document.createTextNode(element)); // Use mapper here, to extract and format data.
84-
85-
list.appendChild(listItem);
86-
});
87-
88-
return list;
89-
};
90-
91-
export const appendElement = (target, item) => {
92-
document.getElementById(target).appendChild(item);
93-
};
94-
```
95-
96-
### 4. Let's create the bookAPI.js in src/js
6+
### 1. Let's create the bookAPI.js in src/js
977

988
* We need server up and running on server root
999

@@ -114,7 +24,7 @@ const createRequest = (url, options) => {
11424
});
11525
};
11626

117-
const baseURL = 'http://localhost:8000/api/books';
27+
const baseUrl = 'http://localhost:8000/api/books';
11828

11929

12030
export const retrieveBooks = () => {
@@ -130,7 +40,7 @@ export const retrieveBooks = () => {
13040
};
13141

13242
export const retrieveBook = (bookId) => {
133-
const url = `${baseURL}/${bookId}`;
43+
const url = `${baseUrl}/${bookId}`;
13444
return createRequest(url, {
13545
method: 'GET',
13646
mode: 'cors',
@@ -143,7 +53,7 @@ export const retrieveBook = (bookId) => {
14353
```
14454
* Notice that fetch is prepared to always return a promise, even the success result.
14555

146-
### 5. Now let's define the src/js/main.js and check that is working on happy path
56+
### 2. Now let's define the src/js/main.js and check that is working on happy path
14757

14858
```javascript
14959
import * as bookAPI from './bookAPI';
@@ -164,18 +74,7 @@ document.addEventListener('DOMContentLoaded', () => {
16474
});
16575
```
16676

167-
### 6. To get this up and running lets define start in package.json
168-
169-
```diff
170-
....
171-
"scripts": {
172-
"test": "echo \"Error: no test specified\" && exit 1",
173-
+ "start": "parcel index.html"
174-
},
175-
....
176-
```
177-
178-
### 7. Now what will happen if we force an error, lets see it.
77+
### 3. Now what will happen if we force an error, lets see it.
17978

18079
```diff
18180
document.addEventListener('DOMContentLoaded', () => {
@@ -199,8 +98,9 @@ document.addEventListener('DOMContentLoaded', () => {
19998
```
20099

201100
* Why I have an error on console? Discuss with students.
101+
> Reference: https://stackoverflow.com/questions/41515732/hide-401-console-error-in-chrome-dev-tools-getting-401-on-fetch-call
202102
203-
### 8. Now lets create a new book, lets modify main.js code to retrieve data from form.
103+
### 4. Now lets create a new book, lets modify main.js code to retrieve data from form.
204104

205105
```javascript
206106
import * as bookAPI from './bookAPI';
@@ -242,7 +142,7 @@ document.addEventListener('DOMContentLoaded', () => {
242142

243143
* Ok we have create a new book from book form.
244144

245-
### 9. Now we can define the request as follows
145+
### 5. Now we can define the request as follows
246146

247147
```javascript bookAPI
248148
/*diff*/

‎13 Fetch/00_createRequestFactory/index.html ‎13 Fetch/01_createRequestFactory/index.html

File renamed without changes.

‎13 Fetch/00_createRequestFactory/package-lock.json ‎13 Fetch/01_createRequestFactory/package-lock.json

File renamed without changes.

‎13 Fetch/00_createRequestFactory/package.json ‎13 Fetch/01_createRequestFactory/package.json

File renamed without changes.

‎13 Fetch/00_createRequestFactory/src/content/site.css ‎13 Fetch/01_createRequestFactory/src/content/site.css

File renamed without changes.

‎13 Fetch/00_createRequestFactory/src/js/bookAPI.js ‎13 Fetch/01_createRequestFactory/src/js/bookAPI.js

File renamed without changes.

‎13 Fetch/00_createRequestFactory/src/js/main.js ‎13 Fetch/01_createRequestFactory/src/js/main.js

File renamed without changes.

‎13 Fetch/00_createRequestFactory/src/js/uiBuilder.js ‎13 Fetch/01_createRequestFactory/src/js/uiBuilder.js

File renamed without changes.

‎14 Async await/00_start/README.md

+6-13
Original file line numberDiff line numberDiff line change
@@ -28,30 +28,23 @@
2828

2929
* Add dependencies
3030

31+
> https://stackoverflow.com/questions/50907975/babel-regeneratorruntime-is-not-defined-when-using-transform-async-to-generat
32+
3133
```bash
32-
$ npm i babel-plugin-transform-runtime babel-runtime parcel -D
34+
npm install --save-dev @babel/core
35+
npm install --save-dev @babel/plugin-transform-runtime
36+
npm install --save @babel/runtime
3337
```
3438

35-
npm install babel --save-dev @babel/plugin-transform-regenerator
36-
npm install @babel/preset-env --save-dev
37-
3839
* Create _.babelrc_ on _rootDir_
3940

4041
```json
4142
{
4243
"plugins": [
43-
["transform-runtime",
44-
{
45-
"polyfill": false,
46-
"regenerator": true
47-
}]
44+
"@babel/plugin-transform-runtime"
4845
]
4946
}
5047
```
51-
{
52-
"presets": ["@babel/preset-env"],
53-
"plugins": ["@babel/plugin-transform-regenerator"]
54-
}
5548

5649
* Add _start_ comand to _package.json_
5750

0 commit comments

Comments
 (0)