-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
161 lines (150 loc) · 4.52 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
<!DOCTYPE html>
<html data-lt-installed="true" lang="en" class="h-100">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<!-- Favicon -->
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon/favicon-16x16.png"
/>
<link rel="manifest" href="/site.webmanifest" />
<title>URL Shortener</title>
<style>
html,
body {
height: 100%;
background-color: lavender;
}
</style>
</head>
<body
class="d-flex justify-content-center align-items-center flex-column h-100"
>
<h2 class="Heading mb-4">URL Shortener</h2>
<div class="urlForm col-md-4">
<form action="/create" method="POST">
<div class="mb-4">
<label for="url" class="form-label">URL</label>
<input
type="url"
class="form-control"
id="url"
name="url"
placeholder="example.com"
/>
</div>
<div class="mb-4">
<label for="urlId" class="form-label">URL ID</label>
<input
type="text"
class="form-control"
id="urlId"
name="urlId"
placeholder="Auto Generated"
/>
</div>
<button
type="submit"
id="submitButton"
class="btn btn-dark rounded-pill"
>
Submit
</button>
<button id="generateUrlID" class="btn btn-dark rounded-pill">
New ID
</button>
</form>
</div>
<div
class="urlResult d-none col-md-4 d-flex justify-content-center align-items-center flex-column w-100"
>
<canvas class="qrCode mb-4"></canvas>
<div class="link">
<div class="urlLink"></div>
</div>
</div>
</body>
<script>
// Generate URL ID Button
const generateUrlID = document.getElementById("generateUrlID");
const currentUrl = window.location.hostname;
const qrCode = document.querySelector(".qrCode");
qrCode.innerHTML = "";
generateUrlID.addEventListener("click", (event) => {
event.preventDefault();
document.getElementById("urlId").value = Math.floor(
Math.random() * (9999999999999 - 999999999999 + 1) + 999999999999
)
.toString(36)
.slice(-4);
});
// Declare Submit Listener for Creating New URL
const submitButton = document.getElementById("submitButton");
submitButton.addEventListener("click", (event) => {
event.preventDefault();
const form = event.currentTarget.form;
const url = form.action;
try {
const formData = new FormData(form);
const plainFormData = Object.fromEntries(formData.entries());
const formDataJsonString = JSON.stringify(plainFormData);
const fetchOptions = {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: formDataJsonString,
};
fetch(url, fetchOptions)
.then((response) => response.json())
.then((data) => {
new QRious({
element: qrCode,
background: "#e6e6fa",
level: "H",
size: 200,
value: `${currentUrl}/${data.urlId}`,
});
document.querySelector(
".urlLink"
).innerHTML = `${currentUrl}/${data.urlId}`;
document.querySelector(".urlForm").classList.toggle("d-none");
document.querySelector(".urlResult").classList.toggle("d-none");
})
.then(() => form.reset());
} catch (error) {
console.error(error);
alert(error);
}
});
</script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/qrious.min.js"
integrity="sha256-25ncr0CpJhgbzkUiR3wu/Fkk9sSykRG2qX+upHfJUos="
crossorigin="anonymous"
></script>
</html>