-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
144 lines (135 loc) · 4.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Fetch API Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
<a class="github-fork-ribbon" href="https://github.com/nathansebhastian/js-fetch-api" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
<style>
pre {
background-color: #f4f4f4;
padding: 10px;
border-radius: 5px;
width: 600px;
}
</style>
</head>
<body>
<h1>JavaScript Fetch API Example</h1>
<h2>Click the buttons below to run all 5 standard HTTP request protocols using Fetch.</h2>
<h2>Full article <a href'https://www.freecodecamp.org/news/javascript-fetch-api-for-beginners'>here</a></h2>
<button id="getButton">Run GET Request</button>
<pre id="getResult"></pre>
<button id="postButton">Run POST Request</button>
<pre id="postResult"></pre>
<button id="putButton">Run PUT Request</button>
<pre id="putResult"></pre>
<button id="patchButton">Run PATCH Request</button>
<pre id="patchResult"></pre>
<button id="deleteButton">Run DELETE Request</button>
<pre id="deleteResult"></pre>
<script>
// GET Request
document.querySelector('#getButton').addEventListener('click', getData);
function getData() {
const resultBox = document.querySelector('#getResult');
resultBox.textContent = 'Running GET request...';
fetch('https://jsonplaceholder.typicode.com/users/1')
.then(response => response.json())
.then(data => {
resultBox.textContent = JSON.stringify(data, null, 2);
})
.catch(error => {
resultBox.textContent = 'Error fetching data: ' + error;
});
}
// POST Request
document.querySelector('#postButton').addEventListener('click', postData);
function postData() {
const resultBox = document.querySelector('#postResult');
resultBox.textContent = 'Running POST request...';
fetch('https://jsonplaceholder.typicode.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'Nathan Sebhastian',
email: '[email protected]'
}),
})
.then(response => response.json())
.then(data => {
resultBox.textContent = JSON.stringify(data, null, 2);
})
.catch(error => {
resultBox.textContent = 'Error fetching data: ' + error;
});
}
document.querySelector('#putButton').addEventListener('click', putData);
function putData() {
const resultBox = document.querySelector('#putResult');
resultBox.textContent = 'Running PUT request...';
fetch('https://jsonplaceholder.typicode.com/users/1', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'Nathan Sebhastian',
email: '[email protected]'
}),
})
.then(response => response.json())
.then(data => {
resultBox.textContent = JSON.stringify(data, null, 2);
})
.catch(error => {
resultBox.textContent = 'Error fetching data: ' + error;
});
}
document
.querySelector('#patchButton')
.addEventListener('click', patchData);
function patchData() {
const resultBox = document.querySelector('#patchResult');
resultBox.textContent = 'Running PATCH request...';
fetch('https://jsonplaceholder.typicode.com/users/1', {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'Nathan Sebhastian',
username: 'nsebhastian'
}),
})
.then(response => response.json())
.then(data => {
resultBox.textContent = JSON.stringify(data, null, 2);
})
.catch(error => {
resultBox.textContent = 'Error fetching data: ' + error;
});
}
document
.querySelector('#deleteButton')
.addEventListener('click', deleteData);
function deleteData() {
const resultBox = document.querySelector('#deleteResult');
resultBox.textContent = 'Running DELETE request...';
fetch('https://jsonplaceholder.typicode.com/users/1', {
method: 'DELETE',
})
.then(response => response.json())
.then(data => {
resultBox.textContent = JSON.stringify(data, null, 2);
})
.catch(error => {
resultBox.textContent = 'Error fetching data: ' + error;
});
}
</script>
</body>
</html>