Skip to content

Commit c8a1d7a

Browse files
sn10-debugsn10-debug
committed
Adding and Deleting Parameters/Headers added
1 parent f873c06 commit c8a1d7a

File tree

2 files changed

+192
-104
lines changed

2 files changed

+192
-104
lines changed

‎index.html

+80-70
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,84 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>API Testing | Linux Club, VIT Chennai</title>
8-
<script defer src="index.js"></script>
9-
</head>
10-
<body>
11-
<header><h1>API Testing</h1></header>
12-
<main>
13-
<h2>Request</h2>
14-
<form id="request-form">
15-
<select id="method">
16-
<option value="GET">GET</option>
17-
<option value="HEAD">HEAD</option>
18-
<option value="POST">POST</option>
19-
<option value="PUT">PUT</option>
20-
<option value="DELETE">DELETE</option>
21-
<option value="PATCH">PATCH</option>
22-
<option value="CONNECT">CONNECT</option>
23-
<option value="OPTIONS">OPTIONS</option>
24-
</select>
25-
<input id="url" /><br />
26-
<h3>Parameters</h3>
27-
<table>
28-
<thead>
29-
<tr>
30-
<th>Key</th>
31-
<th>Value</th>
32-
</tr>
33-
</thead>
34-
<tbody id="parameters">
35-
<tr>
36-
<td><input type="text" id="parameter-name" /></td>
37-
<td><input type="text" id="parameter-value" /></td>
38-
</tr>
39-
</tbody>
40-
</table>
41-
<button id="add-parameter">Add parameter</button>
42-
<br />
43-
<h3>Headers</h3>
44-
<table>
45-
<thead>
46-
<tr>
47-
<th>Key</th>
48-
<th>Value</th>
49-
</tr>
50-
</thead>
51-
<tbody id="headers">
52-
<tr>
53-
<td><input type="text" id="header-name" /></td>
54-
<td><input type="text" id="header-value" /></td>
55-
</tr>
56-
</tbody>
57-
</table>
58-
<button id="add-header">Add header</button>
59-
<br />
60-
<br />
61-
<button>Send</button>
62-
</form>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>API Testing | Linux Club, VIT Chennai</title>
8+
<script defer src="index.js"></script>
9+
</head>
10+
<body>
11+
<header><h1>API Testing</h1></header>
12+
<main>
13+
<h2>Request</h2>
14+
<div id="request-form">
15+
<select id="method">
16+
<option value="GET">GET</option>
17+
<option value="HEAD">HEAD</option>
18+
<option value="POST">POST</option>
19+
<option value="PUT">PUT</option>
20+
<option value="DELETE">DELETE</option>
21+
<option value="PATCH">PATCH</option>
22+
<option value="CONNECT">CONNECT</option>
23+
<option value="OPTIONS">OPTIONS</option>
24+
</select>
25+
<input id="url" /><br />
26+
<h3>Parameters</h3>
27+
<table>
28+
<thead>
29+
<tr>
30+
<th>Key</th>
31+
<th>Value</th>
32+
</tr>
33+
</thead>
34+
<tbody id="parameters">
35+
<tr id="1">
36+
<td><input type="text" id="parameter-name" /></td>
37+
<td>
38+
<input type="text" id="parameter-value" />&nbsp;<span
39+
class="cancel"
40+
>✖</span
41+
>
42+
</td>
43+
</tr>
44+
</tbody>
45+
</table>
46+
<button id="add-parameter">Add parameter</button>
47+
<br />
48+
<h3>Headers</h3>
49+
<table>
50+
<thead>
51+
<tr id="1">
52+
<th>Key</th>
53+
<th>Value</th>
54+
</tr>
55+
</thead>
56+
<tbody id="headers">
57+
<tr id="1">
58+
<td><input type="text" id="header-name" /></td>
59+
<td>
60+
<input type="text" id="header-value" />&nbsp;<span
61+
class="cancel"
62+
>✖</span
63+
>
64+
</td>
65+
</tr>
66+
</tbody>
67+
</table>
68+
<button id="add-header">Add header</button>
69+
<br />
70+
<br />
71+
<button>Send</button>
72+
</div>
6373

64-
<h2>Response</h2>
65-
<div id="response"></div>
66-
</main>
67-
<footer>
68-
Made with ❤️ by
69-
<a href="https://lugvitc.github.io" target="_blank" rel="noreferrer"
70-
>LUGVITC</a
71-
>
72-
</footer>
73-
</body>
74+
<h2>Response</h2>
75+
<div id="response"></div>
76+
</main>
77+
<footer>
78+
Made with ❤️ by
79+
<a href="https://lugvitc.github.io" target="_blank" rel="noreferrer"
80+
>LUGVITC</a
81+
>
82+
</footer>
83+
</body>
7484
</html>

‎index.js

+112-34
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,128 @@
1-
const id = id => document.getElementById(id);
1+
const id = (id) => document.getElementById(id);
22
// const tags = tag => document.getElementsByTagName(tag);
33

44
let state = {
5-
url: '',
6-
method: 'GET',
7-
headers: { mode: 'no-cors' },
8-
parameters: {}
5+
url: "",
6+
method: "GET",
7+
headers: { mode: "no-cors" },
8+
parameters: {},
99
};
1010

1111
[
12-
{ name: 'url', type: 'text' },
13-
{ name: 'method', type: 'text' }
12+
{ name: "url", type: "text" },
13+
{ name: "method", type: "text" },
1414
].forEach(({ name, type }) =>
15-
id(name).addEventListener('change', e => {
16-
state[name] = e.target.value;
17-
})
15+
id(name).addEventListener("change", (e) => {
16+
state[name] = e.target.value;
17+
})
1818
);
1919

20-
id('add-header').addEventListener('click', e => {
21-
e.preventDefault();
22-
state.headers[id('header-name').value] = id('header-value').value;
23-
id('header-name').value = '';
24-
id('header-value').value = '';
25-
console.log(state);
20+
// id("add-header").addEventListener("click", (e) => {
21+
// e.preventDefault();
22+
// state.headers[id("header-name").value] = id("header-value").value;
23+
// id("header-name").value = "";
24+
// id("header-value").value = "";
25+
// console.log(state);
26+
// });
27+
28+
// id("add-parameter").addEventListener("click", (e) => {
29+
// e.preventDefault();
30+
// state.parameters[id("parameter-name").value] = id("parameter-value").value;
31+
// id("parameter-name").value = "";
32+
// id("parameter-value").value = "";
33+
// console.log(state);
34+
// });
35+
36+
id("request-form").addEventListener("submit", async (e) => {
37+
e.preventDefault();
38+
const res = await fetch(state.url, {
39+
method: state.method,
40+
headers: state.headers,
41+
});
42+
const status = res.status;
43+
const text = await res.text();
44+
45+
const response = (id("response").innerHTML = `Code: ${status}<br />${text}`);
2646
});
2747

28-
id('add-parameter').addEventListener('click', e => {
48+
// https://reqres.in/api/users
49+
50+
// Adding Multiple Headers and Multiple Parameters
51+
52+
document
53+
.getElementById("add-parameter")
54+
.addEventListener("click", function (e) {
2955
e.preventDefault();
30-
state.parameters[id('parameter-name').value] = id('parameter-value').value;
31-
id('parameter-name').value = '';
32-
id('parameter-value').value = '';
33-
console.log(state);
56+
let arr = [...document.getElementById("parameters").querySelectorAll("tr")];
57+
let el = document.getElementById("parameters").querySelector("tr");
58+
let param = `
59+
<tr id=${arr.length + 1}>
60+
<td><input type="text" id="parameter-name" /></td>
61+
<td><input type="text" id="parameter-value" />&nbsp;<span
62+
class="cancel"
63+
>✖</span
64+
></td>
65+
</tr>`;
66+
document
67+
.getElementById("parameters")
68+
.insertAdjacentHTML("beforeend", param);
69+
});
70+
71+
document.getElementById("add-header").addEventListener("click", function () {
72+
let arr = [...document.getElementById("headers").querySelectorAll("tr")];
73+
let header = `
74+
<tr id=${arr.length + 1} >
75+
<td><input type="text" id="header-name" /></td>
76+
<td><input type="text" id="header-value" />&nbsp;<span
77+
class="cancel"
78+
>✖</span
79+
></td>
80+
</tr>
81+
`;
82+
83+
document.getElementById("headers").insertAdjacentHTML("beforeend", header);
3484
});
3585

36-
id('request-form').addEventListener('submit', async e => {
37-
e.preventDefault();
38-
const res = await fetch(state.url, {
39-
method: state.method,
40-
headers: state.headers
41-
});
42-
const status = res.status;
43-
const text = await res.text();
44-
45-
const response = (id(
46-
'response'
47-
).innerHTML = `Code: ${status}<br />${text}`);
86+
// Added deleting parameter and deleting header feature
87+
88+
let remove = function (e, str) {
89+
if (!e.target.classList.contains("cancel")) return;
90+
91+
let id = +e.target.closest("tr").id;
92+
let names = [
93+
...document.getElementById(`${str}s`).querySelectorAll(`#${str}-name`),
94+
].map((mov) => mov.value);
95+
96+
let values = [
97+
...document.getElementById(`${str}s`).querySelectorAll(`#${str}-value`),
98+
].map((mov) => mov.value);
99+
100+
names = names.filter((_, i) => i + 1 !== id);
101+
values = values.filter((_, i) => i + 1 !== id);
102+
103+
let arr = [
104+
...document.getElementById(`${str}s`).querySelectorAll("tr"),
105+
].filter((mov) => Number(mov.id) != id);
106+
107+
arr = arr.map((mov, i) => {
108+
mov.id = i + 1 + "";
109+
110+
mov.querySelector(`#${str}-value`).value = values[i];
111+
mov.querySelector(`#${str}-name`).value = names[i];
112+
return mov;
113+
});
114+
115+
document.getElementById(`${str}s`).innerHTML = "";
116+
117+
arr.forEach((mov) => {
118+
document.getElementById(`${str}s`).insertAdjacentElement("beforeend", mov);
119+
});
120+
};
121+
122+
document.getElementById("parameters").addEventListener("click", function (e) {
123+
remove(e, "parameter");
48124
});
49125

50-
// https://reqres.in/api/users
126+
document.getElementById("headers").addEventListener("click", function (e) {
127+
remove(e, "header");
128+
});

0 commit comments

Comments
 (0)