├── app.css
├── axios.js
├── fetch.js
├── index.html
└── xhr.js
/app.css:
--------------------------------------------------------------------------------
1 | html {
2 | font-family: sans-serif;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | }
8 |
9 | button {
10 | font: inherit;
11 | background: #5102ac;
12 | border: 1px solid #5102ac;
13 | color: white;
14 | cursor: pointer;
15 | padding: 1.25rem 2.5rem;
16 | font-size: 1.5rem;
17 | }
18 |
19 | button:focus {
20 | outline: none;
21 | }
22 |
23 | button:hover,
24 | button:active {
25 | background: #832ee4;
26 | border-color: #832ee4;
27 | }
28 |
29 | #control-center {
30 | border: 2px solid #ccc;
31 | margin: 5rem;
32 | padding: 2rem;
33 | }
34 |
--------------------------------------------------------------------------------
/axios.js:
--------------------------------------------------------------------------------
1 | const getBtn = document.getElementById('get-btn');
2 | const postBtn = document.getElementById('post-btn');
3 |
4 | const getData = () => {};
5 |
6 | const sendData = () => {};
7 |
8 | getBtn.addEventListener('click', getData);
9 | postBtn.addEventListener('click', sendData);
10 |
--------------------------------------------------------------------------------
/fetch.js:
--------------------------------------------------------------------------------
1 | const getBtn = document.getElementById('get-btn');
2 | const postBtn = document.getElementById('post-btn');
3 |
4 | const getData = () => {};
5 |
6 | const sendData = () => {};
7 |
8 | getBtn.addEventListener('click', getData);
9 | postBtn.addEventListener('click', sendData);
10 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Http Requests & JavaScript
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/xhr.js:
--------------------------------------------------------------------------------
1 | const getBtn = document.getElementById('get-btn');
2 | const postBtn = document.getElementById('post-btn');
3 |
4 | const sendHttpRequest = (method, url, data) => {
5 | const promise = new Promise((resolve, reject) => {
6 | const xhr = new XMLHttpRequest();
7 | xhr.open(method, url);
8 |
9 | xhr.responseType = 'json';
10 |
11 | if (data) {
12 | xhr.setRequestHeader('Content-Type', 'application/json');
13 | }
14 |
15 | xhr.onload = () => {
16 | if (xhr.status >= 400) {
17 | reject(xhr.response);
18 | } else {
19 | resolve(xhr.response);
20 | }
21 | };
22 |
23 | xhr.onerror = () => {
24 | reject('Something went wrong!');
25 | };
26 |
27 | xhr.send(JSON.stringify(data));
28 | });
29 | return promise;
30 | };
31 |
32 | const getData = () => {
33 | sendHttpRequest('GET', 'https://reqres.in/api/users').then(responseData => {
34 | console.log(responseData);
35 | });
36 | };
37 |
38 | const sendData = () => {
39 | sendHttpRequest('POST', 'https://reqres.in/api/register', {
40 | email: 'eve.holt@reqres.in'
41 | // password: 'pistol'
42 | })
43 | .then(responseData => {
44 | console.log(responseData);
45 | })
46 | .catch(err => {
47 | console.log(err);
48 | });
49 | };
50 |
51 | getBtn.addEventListener('click', getData);
52 | postBtn.addEventListener('click', sendData);
53 |
--------------------------------------------------------------------------------