├── db
└── db.json
├── index.html
└── src
├── css
└── style.css
└── js
└── index.js
/db/db.json:
--------------------------------------------------------------------------------
1 | {
2 | "posts": [
3 | {
4 | "id": 1,
5 | "title": "title 1",
6 | "author": "author 1"
7 | },
8 | {
9 | "title": "title 2",
10 | "author": "author 2",
11 | "id": 2
12 | },
13 | {
14 | "title": "title 3",
15 | "author": "author 3",
16 | "id": 3
17 | },
18 | {
19 | "title": "title 4",
20 | "author": "author 4",
21 | "id": 4
22 | },
23 | {
24 | "title": "title 5",
25 | "author": "author 5",
26 | "id": 5
27 | },
28 | {
29 | "title": "title 6",
30 | "author": "author 6",
31 | "id": 6
32 | },
33 | {
34 | "title": "fdv",
35 | "author": "vvv",
36 | "id": 7
37 | },
38 | {
39 | "title": "dsf",
40 | "author": "sg",
41 | "id": 8
42 | }
43 | ],
44 | "comments": [
45 | {
46 | "id": 1,
47 | "body": "some comment",
48 | "postId": 1
49 | }
50 | ],
51 | "profile": {
52 | "name": "typicode"
53 | }
54 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
8 | HW19-js-ajax
9 |
10 |
12 |
13 |
14 |
15 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/src/css/style.css:
--------------------------------------------------------------------------------
1 | .posts {
2 | display: flex;
3 | flex-wrap: wrap;
4 | justify-content: space-around;
5 | }
6 |
7 | .posts > div {
8 | padding: 20px;
9 | margin: 20px;
10 | min-width: 300px;
11 | box-shadow: 0 1px 2px 1px #286cc04a;
12 | }
13 |
14 | .posts > div h3 {
15 | color: rebeccapurple;
16 | }
17 |
18 | form {
19 | margin: 40px;
20 | max-width: 400px;
21 | }
--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
1 | const host = ' http://localhost:3000'
2 | const blockPosts = document.querySelector('.posts');
3 | const createPostForm = document.getElementById('createPostForm')
4 | const body = document.querySelector('body');
5 | let posts
6 |
7 | var getJSON = function (url) {
8 | return new Promise(function (resolve, reject) {
9 | var xhr = new XMLHttpRequest();
10 |
11 | xhr.open('get', url, true);
12 |
13 | // browsers that support this feature automatically handle the JSON.parse()
14 | xhr.responseType = 'json'; // ответ будет в виде обьекта, а не строка
15 |
16 | xhr.onload = function () {
17 | var status = xhr.status;
18 |
19 | if (status === 200) {
20 | resolve(xhr.response);
21 | } else {
22 | reject(status);
23 | }
24 | };
25 | xhr.send();
26 | });
27 | };
28 |
29 | var saveJSON = function (url, data) {
30 | return new Promise(function (resolve, reject) {
31 | var xhr = new XMLHttpRequest();
32 |
33 | xhr.open('post', url, true);
34 | xhr.setRequestHeader(
35 | 'Content-type', 'application/json; charset=utf-8'
36 | );
37 |
38 | xhr.responseType = 'json';
39 |
40 | xhr.onload = function () {
41 | var status = xhr.status;
42 | if (status === 200 || status === 201) {
43 | resolve(xhr.response);
44 | } else {
45 | reject(status);
46 | }
47 | };
48 | xhr.onerror = function (e) {
49 | reject("Error fetching " + url);
50 | };
51 | xhr.send(data);
52 | });
53 | };
54 |
55 | function errorHandler(err) {
56 | console.log('Something went wrong.', err);
57 | }
58 |
59 | class Posts {
60 | constructor(posts) {
61 | this.posts = posts
62 | this.render()
63 | }
64 |
65 | render() {
66 | let postsContent = '';
67 | this.posts.forEach(post => {
68 | postsContent += `${post.title}
${post.author}`
69 | })
70 | blockPosts.innerHTML = postsContent;
71 | body.prepend(blockPosts)
72 | }
73 |
74 | async createPost(post) {
75 | await saveJSON(`${host}/posts`, JSON.stringify(post))
76 | .then(res => {
77 | this.posts.push(res)
78 | let postsContent = document.createElement('div')
79 | postsContent.innerHTML = `${res.title}
${res.author}`;
80 | blockPosts.append(postsContent)
81 | })
82 | .catch(err => errorHandler(err))
83 | }
84 | }
85 |
86 |
87 | getJSON(`${host}/posts`)
88 | .then(res => {
89 | posts = new Posts(res)
90 | })
91 | .catch(err => errorHandler(err))
92 |
93 |
94 | createPostForm.addEventListener('submit', async function (event) {
95 | event.preventDefault()
96 | let title = event.target[0].value
97 | let author = event.target[1].value
98 | await posts.createPost({title, author})
99 | .then(() => {
100 | createPostForm.reset()
101 | })
102 | .catch(err => errorHandler(err))
103 |
104 | });
105 |
106 |
107 |
108 |
--------------------------------------------------------------------------------