From 6f98b217aceda5ecaec04a40b2315214979829c0 Mon Sep 17 00:00:00 2001 From: hellerve Date: Sun, 27 Aug 2017 15:33:59 +0200 Subject: [PATCH] initial frontend commit --- public/script.js | 18 ++++++++++++++++++ public/style.css | 5 +++++ views/index.html | 37 +++++++++++++++++++++++++++++++++++++ 3 files changed, 60 insertions(+) diff --git a/public/script.js b/public/script.js index e69de29..6bd1446 100644 --- a/public/script.js +++ b/public/script.js @@ -0,0 +1,18 @@ +var form = document.getElementById('shorten-form'); +var urlBox = form.elements[0]; +var link = document.getElementById('link'); +var shrBox = document.getElementById('shortened'); + +function displayShortenedUrl(response) { + link.textContent = response.data.shortUrl; + link.setAttribute( + 'href', response.data.shortUrl + ); + shrBox.style.opacity = '1'; + urlBox.value = ''; +} +form.addEventListener('submit', function(e) { + e.preventDefault(); + + axios.post('/new', { url: urlBox.value }).then(displayShortenedUrl); +}); diff --git a/public/style.css b/public/style.css index e69de29..3a1fdda 100644 --- a/public/style.css +++ b/public/style.css @@ -0,0 +1,5 @@ +#shorten-form { + width: 300px; + margin: auto; + margin-top: 10vh; +} \ No newline at end of file diff --git a/views/index.html b/views/index.html index e69de29..e8f405b 100644 --- a/views/index.html +++ b/views/index.html @@ -0,0 +1,37 @@ + + + + shrt + + + + + +
+
+
+
+ + +
+
+
+
+

+ Your shortened link: + Loading... +

+

+ Right-click or Tap & Hold the link and copy the address to clipboard and start using it. +

+
+
+
+
+
+ + + + + +