Skip to content

Commit abbccce

Browse files
JaimeSalasJaimeSalas
committedJun 18, 2018
Added demos axios promises async await and fetch
1 parent 83a06a8 commit abbccce

File tree

219 files changed

+164963
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

219 files changed

+164963
-0
lines changed
 

‎11 Axios/00_seed/README.md

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
## 0 Base
2+
3+
### 1. We are going to start our examples from here. For that purpose we have this folder structure
4+
5+
6+
|--src
7+
| |-- API
8+
| |-- content
9+
| |-- view
10+
|--|-- app.js
11+
|--index.html
12+
13+
### 2. We start from a mock service. And just verify we can render the list of books
14+
15+
```javascript src/API/bookAPI.js
16+
export const getBooks = () => {
17+
return [
18+
{ title: 'testA', author: 'testA', genre: 'fiction', read: true },
19+
{ title: 'testB', author: 'testB', genre: 'fiction', read: true }
20+
];
21+
};
22+
```
23+
24+
### 3. The index html looks this way
25+
26+
<!DOCTYPE html>
27+
<html lang="en">
28+
29+
<head>
30+
<meta charset="UTF-8">
31+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
32+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
33+
<title>Document</title>
34+
<link rel="stylesheet" href="./src/content/site.css">
35+
</head>
36+
37+
<body>
38+
<div id="books-container" class="container">
39+
<button id="button-retrieve-books">Retrieve books</button>
40+
</div>
41+
<script src="./src/app.js"></script>
42+
</body>
43+
44+
</html>
45+
46+
### 4. app.js has this look
47+
48+
```javascript
49+
import * as bookAPI from './API/bookAPI';
50+
import { appendElement, createList } from './view/uiBuilder';
51+
52+
document.addEventListener('DOMContentLoaded', () => {
53+
const buttonRetrieveBooks = document.getElementById('button-retrieve-books');
54+
buttonRetrieveBooks.addEventListener('click', (event) => {
55+
event.stopPropagation();
56+
const books = bookAPI.getBooks()
57+
.map(b => `${b.title}, ${b.author}`);
58+
const bookList = createList(books);
59+
appendElement('books-container', bookList);
60+
});
61+
});
62+
```

‎11 Axios/00_seed/index.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Document</title>
9+
<link rel="stylesheet" href="./src/content/site.css">
10+
</head>
11+
12+
<body>
13+
<div id="books-container" class="container">
14+
<button id="button-retrieve-books">Retrieve books</button>
15+
</div>
16+
<script src="./src/app.js"></script>
17+
</body>
18+
19+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.