diff --git a/css/style.css b/css/style.css index 7b44a48..ff63c4f 100644 --- a/css/style.css +++ b/css/style.css @@ -3,6 +3,25 @@ body { background-size: cover; } +#urlBox { + padding: 10px 0 0 5px; + border: 1px solid rgba(0,0,0,.125); + border-radius: 5px; +} + +#urlBox .url { + padding: 5px; +} + +#urlBox .url input { + width: 100%; + font-size: 16px; + line-height: 32px; + color: #000; + border: none; + border-bottom: 1px solid rgba(0,0,0,.125); +} + #content { background-color: white; opacity: 0.87; @@ -43,4 +62,4 @@ body { font-size: 2vw; height: 4vw; } -} \ No newline at end of file +} diff --git a/index.html b/index.html index 105b30a..cb27e1e 100644 --- a/index.html +++ b/index.html @@ -7,11 +7,10 @@ 我們都是企業家！ + -
-

工業推手一世紀，企業搖籃一百年

北科畢業人才企業最愛用！！！ @@ -26,6 +25,27 @@
+

縮網址服務

+
+
+
+

+ +

+

+ +

+ +

+ +

+

+ 縮起來！ +

+

+
+
+

好玩ㄉ網站

@@ -35,11 +55,6 @@
程式碼託管平台 -
  • - NTUT URL Shortener -
    - 縮網址服務 -
  • Text Revealer
    @@ -54,7 +69,7 @@
    • -

    好用ㄉ Script

    +

    好用 Script

    @@ -71,7 +86,7 @@

    (ˊ・ω・ˋ)(ˊ・ω・ˋ)(ˊ・ω・ˋ)(ˊ・ω・ˋ)(ˊ・ω・ˋ)(ˊ・ω・ˋ)

    -
    + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..ab66cdc --- /dev/null +++ b/js/main.js @@ -0,0 +1,54 @@ +'use strict' + +let backend = 'https://ntut.com.tw' + +const shortenUrl = async () => { + let shortCode = $('#urlBox .short-code')[0].value || null + let url = $('#urlBox .target-url')[0].value + + if (!url) { + alert("URL is empty!") + return + } + + request({ shortCode, url }) + .done((res) => { + console.log(res) + + addNewRow(res) + }) + .fail((err) => { + console.log(err) + + if (err.status == 409) { + alert("This code has been used.") + } + else { + alert("Failed to establish connection.") + } + }) +} + +const addNewRow = (data) => { + let view = $('#urlBox .urls') + + view.append($(` +
    +

    ntut.com.tw/${data.shortCode}

    +

    ${data.url}

    +
    + `)) +} + +const request = ({ shortCode, url }) => { + return $.ajax({ + type: 'POST', + dataType: 'json', + url: `${backend}/api/shortUrl`, + data: JSON.stringify({ + shortCode, url + }), + processData: false, + contentType: 'application/json; charset=UTF-8' + }) +}