-
Notifications
You must be signed in to change notification settings - Fork 221
/
index.html
173 lines (151 loc) · 5.17 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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>REST Form Demo</title>
<style>
body {
font-family: Arial;
}
#recordForm {
display: none;
}
#recordIDcontainer {
display: none;
}
</style>
</head>
<body>
<h1>Endpoint Tester</h1>
<form id="actionForm">
<label for="endpoint">Endpoint:</label>
<input type="text" value="http://localhost:3000/posts" id="endpoint">
<br />
<label for="action">Action:</label>
<select id="action">
<option disabled>Pick CRUD Action:</option>
<option value="List All">List All</option>
<option value="List One">List One</option>
<option value="Create">Create</option>
<option value="Update">Update</option>
<option value="Delete">Delete</option>
</select>
<button type="submit">Create Request</button>
</form>
<form id="recordForm">
<div>
<label for="author">Author</label>
<input type="text" name="author" id="author" />
</div>
<div>
<label for="title">Title: </label>
<input
type="text"
name="title"
id="title"
/>
</div>
<div id="recordIDcontainer">
<label for="recordID">Record ID: </label>
<input
type="recordID"
name="recordID"
id="recordID"
/>
</div>
<div>
<button type="submit">Execute</button>
</div>
</form>
<hr />
<div>
<output id="output"></output>
</div>
<!-- Main Script -->
<script type="module">
// This function should fetch all of the data from the given endpoint.
// From the 4 CRUD actions, this is the READ action, and uses the GET http method.
// The main difference from fetchOne() will be the URL you request from; check
// the writeup to view the URL pattern for fetch one and fetch all
function fetchAll() {
// TODO
}
// This function should fetch one entry from the given endpoint.
// From the 4 CRUD actions, this is the READ action, and uses the GET http method.
// The main difference from fetchAll() will be the URL you request from; check
// the writeup to view the URL pattern for fetch one and fetch all
function fetchOne() {
// TODO
}
// This function should use fetch to create one entry in the given endpoint.
// From the 4 CRUD actions, this is the CREATE action, and uses the POST http method.
// The main difference from updateRecord() will be the URL you send data to; check
// the writeup to view the URL pattern for create and update
function createRecord() {
// TODO
}
// This function should use fetch to update one existing entry in the given endpoint.
// From the 4 CRUD actions, this is the UPDATE action, and uses the PUT http method.
// The main difference from createRecord() will be the URL you send data to; check
// the writeup to view the URL pattern for create and update
function updateRecord() {
// TODO
}
// This function should use fetch to delete one existing entry in the given endpoint.
// From the 4 CRUD actions, this is the DELETE action, and uses the DELETE http method.
// The main difference from fetchOne() will be the HTTP method you use to make your
// request; check the writeup to view the URL pattern for get one and delete. THERE IS NO
// delete all, only delete one.
function deleteRecord() {
// TODO
}
window.addEventListener('DOMContentLoaded', () => {
// Action Form Event Listener
document
.getElementById("actionForm")
.addEventListener("submit", event => {
event.preventDefault();
let command = document.getElementById('action').value;
switch (command) {
case "List All":
fetchAll();
break;
case "List One":
fetchOne();
break;
case "Create":
createRecord('show');
break;
case "Update":
updateRecord('show');
break;
case "Delete":
deleteRecord();
break;
default:
alert("Error: Illegal Action");
}
});
// Record Form Event Listener
document
.getElementById("recordForm")
.addEventListener("submit", event => {
event.preventDefault();
let command = document.getElementById('action').value;
switch (command) {
case "Create":
createRecord('submit');
break;
case "Update":
updateRecord('submit');
break;
default:
alert("Error: Illegal Action");
}
});
});
</script>
</body>
</html>