diff --git a/data/served/index.html b/data/served/index.html
index 8660be7..da213df 100644
--- a/data/served/index.html
+++ b/data/served/index.html
@@ -1,13 +1,30 @@
+
Lonk
+
+
-
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/data/served/main.js b/data/served/main.js
new file mode 100644
index 0000000..6332e1c
--- /dev/null
+++ b/data/served/main.js
@@ -0,0 +1,56 @@
+'use strict';
+
+(() => {
+ document.addEventListener('DOMContentLoaded', (_) => {
+ const waiting = false;
+ let xhr;
+
+ const field = document.getElementById('url');
+
+ field.addEventListener('change', () => {
+ if (waiting && xhr != null) {
+ xhr.abort();
+ }
+ });
+
+ const form = document.getElementById('form');
+
+ form.addEventListener('submit', (event) => {
+ // We need to create a different body, so prevent the default submission.
+ event.preventDefault();
+
+ if (waiting) {
+ // Prevent multiple requests.
+ return;
+ }
+
+ // Get the URL the user is trying to shorten.
+ const url = document.getElementById('url').value;
+
+ // Encode the URL as Base64.
+ const encoded = btoa(encodeURIComponent(url).replace(/%([0-9A-F]{2})/g, (match, p1) =>
+ String.fromCharCode('0x' + p1)
+ ));
+
+ // POST the body to /shorten.
+ xhr = new XMLHttpRequest();
+ xhr.open('POST', '/shorten', true);
+ xhr.overrideMimeType('text/plain');
+ xhr.send(encoded);
+ xhr.onload = () => {
+ switch (xhr.status) {
+ case 200:
+ let slug = xhr.response;
+ console.log(slug);
+ break;
+ default:
+ console.log(xhr.response);
+ break;
+ }
+ };
+ xhr.onerror = () => {
+ // TODO
+ };
+ });
+ });
+})();
\ No newline at end of file