JSFiddle - React, Tailwind, and code Playground

by Gary Stubbenhagen

HTML

<script src="&lt;link href=&#39;http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;"></script>
<h2>Choose Social Network</h2>

<img src="http://gstubbenhagen.kd.io/img/social-icons/facebook.png" alt="Facebook" value="fb" class="sm-icon" />
<img src="http://gstubbenhagen.kd.io/img/social-icons/google+.png" alt="Twitter" value="twit" class="sm-icon" />
<img src="http://gstubbenhagen.kd.io/img/social-icons/linkedin.png" alt="Google+" value="g+" class="sm-icon" />
<img src="http://gstubbenhagen.kd.io/img/social-icons/twitter.png" alt="LinkedIn" value="li" class="sm-icon" />

<h2>Enter Username<h2>
<input type="text" id="user" placeholder="Username" />

<h3>Enter URL</h3>
<input type="text" id="url" placeholder="Destination URL" />

<br /><br /><input type="button" id="createCamp" value="Track Link" /><br/><br/>

<span></span><br/><br/>

<input type="button" id="shorten" value="Shorten Link with Bitly" />

CSS

body {
    font-family: Lato, Arial, sans-serif;
}
h1 {
    font-weight: 800;
}
#shorten {
    display:none;
}
.sm-icon:hover {
    opacity:0.8;
    cursor:pointer;
}
input[type=text] {
    width: 260px;
    height: 30px;
    font-size: 14px;
}
input[type=button] {
    width: 260px;
    height: 30px;
    background-color: #6DA67A;
    color: #ffffff;
    border:0;
    clear:both;
}
input[type=button]:hover {
    background-color: #77B885;
    cursor:pointer;
}
#tracker {
    width: 35%;
    height: 100%;
    min-height: 100%;
    float:left;
}
#network {
    width: 65%;
    height: 100%;
    float:left;
    padding: 0;
}
iframe {
    width:80%;
    height: 100%;
    border: 0;
    top:0;
    right:0;
    position: fixed;
}

JavaScript

$oauth = "";
$sm_network = "";

$(document).ready(function () {
    $('.sm-icon').click(function () {
        $sm_network = $(this).attr('alt');
        $('span').text($sm_network);
        $(this).attr('class','selected');
        $('.sm-icon').css('opacity','0.4');
    });
    
    $('#createCamp').click(function () {

        if ($('#url').val() === '') {
            $('span').text("Please enter destination URL");
        } else {

            $t = new Date();
            $year = $t.getFullYear();
            $month = $t.getMonth() + 1;
            $day = $t.getDate();
            $hour = $t.getHours();
            $min = $t.getMinutes();
            $sec = $t.getSeconds();
            $millisec = $t.getMilliseconds() + 1;
            $timeDate = $year + "" + $month + "" + $day + "" + $hour + "" + $min + "" + $sec + "" + $millisec;

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

            $attr1 = "SOC";
            $attr2 = $('#network').val();
            $attr3 = $('#user').val();
            $attr4 = $timeDate;
            $campaign = "?cmpid=" + $attr1 + "|" + $attr2 + "|" + $attr3 + "|" + $attr4;

            $trackedURL = "";

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


            if ($attr2 === "linkedin") {
                $('span').text(encodeURI($trackedURL));
            } else {
                $('span').text($trackedURL);
            }

            $('#shorten').toggle();

            $('#shorten').click(function () {
 ...