├── 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 |
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 | 24 |
25 |
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 | --------------------------------------------------------------------------------