JSFiddle - React, Tailwind, and code Playground

by Gary Stubbenhagen

HTML

<input type="text" id="longURL" />
<input type="submit" id="track" />
<br />
<br />
<span id="displayURL"></span>

<input type="submit" id="shorten" value="Shorten URL" />
<br />
<br />

CSS

#shorten {
    display: none;
}

JavaScript

var $campaign = '?SOC|ATT2|ATT3|ATT4';
var $shortenButton = '<input type="submit" id="shorten" value="Shorten URL" />';
var $url = '';
var $urlLength = '';
var $lastChar = '';
var $http = '';
var $trackedURL = '';
var $encodedTrackedURL = '';
var $accessToken = '';

$(document).ready(function () {
    $('#track').click(function () {
        if ($('#longURL').val() === '') {
            $('#displayURL').text('Please Enter URL');
        } else {

            $url = $('#longURL').val();
            $urlLength = $url.length;
            $lastChar = $url[$urlLength - 1];
            $http = $url[0] + $url[1] + $url[2] + $url[3];

            if ($http == 'http') {
                if ($lastChar == '/') {
                    $trackedURL = $url + $campaign;
                } else {
                    $trackedURL = $url + '/' + $campaign;
                }
            } else {
                if ($lastChar == '/') {
                    $trackedURL = 'http://' + $url + $campaign;
                } else {
                    $trackedURL = 'http://' + $url + '/' + $campaign;
                }
            }

            $('#displayURL').text($trackedURL);
            $('#shorten').toggle();
        }

    });

    $('#shorten').click(function () {
        $encodedTrackedURL = encodeURIComponent($trackedURL);

        $.get('https://api-ssl.bitly.com/v3/shorten?&format=txt&access_token=' + $accessToken + '&longUrl=' + $encodedTrackedURL, function (response) {
            $('#displayURL').text(response);
        });
    });

});