Skip to content

Commit a6218c1

Browse files
git-ashuggit-ashug
committed
v1 of PostNet
0 parents  commit a6218c1

File tree

4 files changed

+299
-0
lines changed

4 files changed

+299
-0
lines changed

Diff for: ‎index.html

+154
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>PostNet</title>
8+
<link rel="icon" type="image/x-icon" href="https://img.icons8.com/color/48/paper-plane.png">
9+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
10+
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
11+
<link rel="stylesheet" href="prism/prism.css">
12+
<style>
13+
#jsonPrismResponseText {
14+
max-height: 500px;
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
21+
<div class="container-fluid">
22+
<a class="navbar-brand" href="#">PostNet</a>
23+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
24+
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
25+
<span class="navbar-toggler-icon"></span>
26+
</button>
27+
<div class="collapse navbar-collapse" id="navbarNav">
28+
<ul class="navbar-nav">
29+
<li class="nav-item">
30+
<a class="nav-link active" aria-current="page" href="#">Home</a>
31+
</li>
32+
<li class="nav-item">
33+
<a class="nav-link" href="#">Features</a>
34+
</li>
35+
</ul>
36+
</div>
37+
</div>
38+
</nav>
39+
40+
<div class="container" id="popupMsg">
41+
</div>
42+
43+
<div class="container">
44+
<h1 class="my-3"> Welcome to PostNet<img src="https://img.icons8.com/color/48/paper-plane.png" alt="Logo"></h1>
45+
</div>
46+
47+
<div class="container">
48+
<!--URL Box-->
49+
<div class="row mb-3">
50+
<label for="url" class="col-sm-2 col-form-label">URL</label>
51+
<div class="col-sm-10">
52+
<input type="text" class="form-control" id="url" placeholder="Enter URL here">
53+
</div>
54+
</div>
55+
56+
<!--HTTP Method Radio Buttons-->
57+
<fieldset class="row mb-3">
58+
<legend class="col-form-label col-sm-2 pt-0">HTTP Method</legend>
59+
<div class="col-sm-10">
60+
<div class="form-check">
61+
<input class="form-check-input" type="radio" name="reqType" id="getReqRadio" value="GET" checked>
62+
<label class="form-check-label" for="getReqRadio">
63+
GET
64+
</label>
65+
</div>
66+
<div class="form-check">
67+
<input class="form-check-input" type="radio" name="reqType" id="postReqRadio" value="POST">
68+
<label class="form-check-label" for="postReqRadio">
69+
POST
70+
</label>
71+
</div>
72+
</div>
73+
</fieldset>
74+
75+
<!--Content Type Radio Buttons-->
76+
<fieldset class="row mb-3">
77+
<legend class="col-form-label col-sm-2 pt-0">Content Type</legend>
78+
<div class="col-sm-10">
79+
<div class="form-check">
80+
<input class="form-check-input" type="radio" name="contentType" id="jsonRadio" value="JSON" checked>
81+
<label class="form-check-label" for="jsonRadio">
82+
JSON
83+
</label>
84+
</div>
85+
<div class="form-check">
86+
<input class="form-check-input" type="radio" name="contentType" id="paramsRadio" value="PARAMS">
87+
<label class="form-check-label" for="paramsRadio">
88+
Custom Parameters
89+
</label>
90+
</div>
91+
</div>
92+
</fieldset>
93+
94+
<!--Parameters box - This will hide on clicking json option in content type-->
95+
<div id="parametersBox" class="row mb-2">
96+
<legend class="col-form-label col-sm-2 pt-0">Parameter 1</legend>
97+
<div class="col-md-3">
98+
<label for="key1" class="form-label">Key</label>
99+
<input type="text" class="form-control" id="key1" placeholder="key1">
100+
</div>
101+
<div class="col-md-3">
102+
<label for="value1" class="form-label">Value</label>
103+
<input type="text" class="form-control" id="value1" placeholder="value1">
104+
</div>
105+
<div class="col-md-3 my-4">
106+
<button id="addparamBtn" class="btn btn-primary my-2">+</button>
107+
</div>
108+
</div>
109+
110+
<!--New paramter box that needs to be shown when user clicks + button-->
111+
<div id="newParams" class="row mb-2">
112+
113+
</div>
114+
115+
<!-- JSON request box - This will hide on clicking parameters option in content type -->
116+
<div id="jsonRequestBox" class="row mb-3">
117+
<label for="jsonRequestText" class="col-sm-2 col-form-label">JSON Request Body</label>
118+
<div class="col-sm-10">
119+
<textarea class="form-control" id="jsonRequestText" placeholder="Enter JSON Request Body here"
120+
style="height: 150px"></textarea>
121+
</div>
122+
</div>
123+
124+
<!--Submit Button-->
125+
<div class="row mb-3">
126+
<div class="col-sm-10">
127+
<button id="submit" class="btn btn-primary">Submit</button>
128+
</div>
129+
</div>
130+
131+
<hr>
132+
<!--Response box-->
133+
<div id="jsonResponseBox" class="row mb-3">
134+
<label class="col-sm-2 col-form-label">Response</label>
135+
<div class="col-sm-10">
136+
<!-- <textarea class="form-control" id="jsonResponseText" placeholder="Your Response appears here"
137+
style="height: 150px"></textarea> -->
138+
<pre id="jsonPrismResponseText" class="language-javascript">
139+
<code class="language-javascript" id="jsonResponseText"> Your Response appears here</code>
140+
</pre>
141+
</div>
142+
</div>
143+
144+
</div>
145+
146+
147+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
148+
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
149+
crossorigin="anonymous"></script>
150+
<script src="prism/prism.js"></script>
151+
<script src="index.js"></script>
152+
</body>
153+
154+
</html>

Diff for: ‎index.js

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
console.log("Welcome to PostNet");
2+
3+
let parametersBox = document.getElementById("parametersBox");
4+
let jsonRequestBox = document.getElementById("jsonRequestBox");
5+
let jsonResponseText = document.getElementById("jsonResponseText");
6+
let submit = document.getElementById("submit");
7+
8+
let jsonRadio = document.getElementById("jsonRadio");
9+
let paramsRadio = document.getElementById("paramsRadio");
10+
11+
let addparamBtn = document.getElementById("addparamBtn");
12+
let newParams = document.getElementById("newParams");
13+
let paramsCount = 1;
14+
let html = "";
15+
16+
function validations(url) {
17+
if (url === "") {
18+
document.getElementById(
19+
"popupMsg"
20+
).innerHTML = `<div class="alert alert-warning" role="alert">
21+
URL cannot be empty</div>`;
22+
23+
setTimeout(() => {
24+
document.getElementById("popupMsg").innerHTML = "";
25+
}, 2000);
26+
return false;
27+
}
28+
return true;
29+
}
30+
31+
function showParametersBox() {
32+
parametersBox.classList.remove("d-none");
33+
newParams.classList.remove("d-none");
34+
jsonRequestBox.classList.add("d-none");
35+
}
36+
37+
function showJsonRequestBox() {
38+
parametersBox.classList.add("d-none");
39+
newParams.classList.add("d-none");
40+
jsonRequestBox.classList.remove("d-none");
41+
}
42+
43+
//at the start, don't show Parameters Box as by default JSON will be selected.
44+
showJsonRequestBox();
45+
46+
//decide which needs to be displayed when a particular radio button is selected.
47+
jsonRadio.addEventListener("click", showJsonRequestBox);
48+
paramsRadio.addEventListener("click", showParametersBox);
49+
50+
addparamBtn.addEventListener("click", addParams);
51+
52+
function addParams() {
53+
html = `
54+
<fieldset class="row mb-2 parameter-set">
55+
<legend class="col-form-label col-sm-2 pt-0">Parameter ${++paramsCount}</legend>
56+
<div class="col-md-3">
57+
<label for="key${paramsCount}" class="form-label">Key</label>
58+
<input type="text" class="form-control" id="key${paramsCount}" placeholder="key${paramsCount}">
59+
</div>
60+
<div class="col-md-3">
61+
<label for="value${paramsCount}" class="form-label">Value</label>
62+
<input type="text" class="form-control" id="value${paramsCount}" placeholder="value${paramsCount}">
63+
</div>
64+
<div class="col-md-3 my-4">
65+
<button class="btn btn-primary my-2 removeParamBtn"> - </button>
66+
</div>
67+
</fieldset>`;
68+
newParams.insertAdjacentHTML("beforeend", html);
69+
}
70+
71+
newParams.addEventListener("click", (e) => {
72+
if (e.target.classList.contains("removeParamBtn")) {
73+
e.target.closest("fieldset").remove();
74+
}
75+
});
76+
77+
function fetchApi(url, httpMethod, payload) {
78+
let options = {
79+
method: httpMethod,
80+
headers: {
81+
"Content-type": "application/json; charset=UTF-8",
82+
},
83+
};
84+
if (httpMethod !== "GET") {
85+
options.body = payload;
86+
}
87+
88+
fetch(url, options)
89+
.then((response) => response.text())
90+
.then((text) => {
91+
jsonResponseText.innerHTML = text;
92+
Prism.highlightAll();
93+
})
94+
.catch((error) => {
95+
console.error("Error:", error);
96+
jsonResponseText.innerHTML = "Something went wrong: " + error;
97+
});
98+
}
99+
100+
submit.addEventListener("click", () => {
101+
let payload = "";
102+
let url = document.getElementById("url").value;
103+
let httpMethod = document.querySelector(
104+
"input[name='reqType']:checked"
105+
).value; //GET/POST
106+
let contentType = document.querySelector(
107+
"input[name='contentType']:checked"
108+
).value; //JSON/Parameter
109+
let jsonRequestText = document.getElementById("jsonRequestText");
110+
111+
let isValidationsPassed = validations(url);
112+
if (isValidationsPassed) {
113+
jsonResponseText.innerHTML = "Please Wait. Fetching response...";
114+
115+
if (httpMethod === "POST") {
116+
if (contentType === "JSON") {
117+
payload = jsonRequestText.value;
118+
} else if (contentType === "PARAMS") {
119+
payload = {};
120+
for (let i = 1; i <= paramsCount; i++) {
121+
if (document.getElementById("key" + i) != undefined) {
122+
key = document.getElementById("key" + i).value;
123+
value = document.getElementById("value" + i).value;
124+
payload[key] = value;
125+
}
126+
}
127+
payload = JSON.stringify(payload);
128+
}
129+
}
130+
fetchApi(url, httpMethod, payload);
131+
}
132+
});

Diff for: ‎prism/prism.css

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)