JSFiddle - React, Tailwind, and code Playground

by Gary Stubbenhagen

HTML

<script src="http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic,900italic"></script>
<h1>External Campaign Builder</h1>


<h3 class="currStep">Step 1</h3>

<div class="currStep">
    <label for="destURL">Destination URL</label>
    <input type="text" id="destURL" />
    <br />
    <br />
    <input type="submit" class="nxtStep" value="Next Step" />
</div>

<h3 class="ftStep">Step 2</h3>

<div class="ftStep">
    <p>Choose Your Market:</p>
    <img class="logo" alt="BA" src="http://www.bankersaccuity.com/Global/ba_incorporating_rgb_homepage.png" />
    <img class="logo" alt="CC" src="http://www.communitycare.co.uk/Assets/GetAsset.aspx?ItemID=16105" />
    <img class="logo" alt="CI" src="http://www.ccinform.co.uk/images/comcare_inform_rgb.gif" />
    <img class="logo" alt="EG" src="http://cdn.estatesgazette.com/VPP/Global/CssImages/EG/egi-logo.jpg" />
    <img class="logo" alt="FW" src="http://cdn.fwi.co.uk/VPP/Global/FWi/CssImages/FWI-HOME.gif" />
    <img class="logo" alt="FG" src="http://cdn.flightglobal.com/VPP/Global/footer-flight-logo.jpg" />
    <img class="logo" alt="HJ" src="http://cdn.reedbusiness.com/VPP/Global/Brand%20images/Brands_Home_Page_Hair.jpg" />
    <img class="logo" alt="IC" src="http://www.icis.com/Global/ICIS/Images/Logos/icisLogoTr.png" />
    <img class="logo" alt="NS" src="http://www.newscientist.com/img/misc/ns_logo.jpg" />
    <img class="logo" alt="OP" src="http://cdn.opticianonline.net/VPP/Global/Optometry/CssImages/1/logo.gif" />
    <img class="logo" alt="PT" src="https://d2pc3joq21kf3u.cloudfront.net/VPP/Global/PersonnelToday/ptod_logo_online_publication_of_the_year.jpg" />
    <img class="logo" alt="HR" src="http://www.xperthr.co.uk/app_themes/default/images/logo.gif" />
    <div id="track">
        <select id="prod"></select>
        <select id="campSrc"></select>
        <input placeholder="Enter Diamond Product Code" id="dmd" />
        <input type="date" id="date" />
        <select...

CSS

* {
    font-family:'Lato', sans-serif;
}
#destURL {
    width: 300px;
    margin-left: 10px;
}
.nxtStep {
    height: 36px;
    border: 1px black solid;
    background-color: #1693A5;
    color: #ffffff;
    font-weight: bold;
}
.nxtStep:hover {
    background-color: #00A0B0;
}
.nxtStep:disabled {
    background-color: #D5DED9;
    color: #99B2B7;
}
.logo {
    width: 100px;
    border: 1px solid black;
    margin: 3px;
    height: 50px;
}
.logoSelected {
    width: 150px;
    border: 0;
    margin: 3px;
    height: 50px;
}
#output {
    font-size: 1.5em;
    padding: 10px;
    min-height: 30px;
}
h3 {
    background-color: #C5E0DC;
    padding: 5px;
}
h3.ftStep {
    background-color: #D5DED9;
    color: #99B2B7;
}
h3.prevStep {
    background-color: #E1EDB9;
}
div.ftStep {
    display: none;
}
div.prevStep {
    display: none;
}
select {
    width:63%;
    padding: 5px;
}
input {
    width:60%;
    padding: 5px;
}
#track {
    display:none;
}
.data {
    display:none;
}
.ga {
    display:none;
}
#region {
    display: none;
}

JavaScript

var $url = '';
var $market = '';
var $data = new Array('BA', 'FG', 'IC', 'HR');
var $product = '';
var $source = '';
var $diamond = '';
var $date = '';
var $region = '';
var $campaign = '';
var $linkID = '';
var $sfID = '';
var $http = '';
var $urlLength = '';
var $lastChar = '';
var $trackedURL = '';
var $encodedTrackedURL = '';


$(document).ready(function () {
    $('.nxtStep:first').click(function () {
        if ($('#destURL').val() === '') {
            $('#destURL').css('border-color', 'red');
            $('#output').text('No URL Entered');
        } else {
            $http = $('#destURL').val()[0] + $('#destURL').val()[1] + $('#destURL').val()[2] + $('#destURL').val()[3];
            $urlLength = $('#destURL').val().length;
            $lastChar = $('#destURL').val()[$urlLength - 1];

            if ($http === 'http') {
                if ($lastChar == '/') {
                    $url = $('#destURL').val();
                } else {
                    $url = $('#destURL').val() + '/';
                }
            } else {
                if ($lastChar == '/') {
                    $url = 'http://' + $('#destURL').val();
                } else {
                    $url = 'http://' + $('#destURL').val() + '/';
                }
            }

            $('.currStep').attr('class', 'prevStep');
            $('.ftStep:first').attr('class', 'currStep');
            $('.ftStep:nth-of-type(2)').attr('class', 'currStep');
            $('#output').text('');
        }
    });
    // Choose Market by Logo
    $('.logo').click(function () {
        $market = $(this).attr('alt');
        $(this).attr('class', 'logoSelected');
        $('.logo').hide();
        $('p').hide();
        $('#track').show();
        // Show SFID for Data Services
        if ($market === $data[0] || $market === $data[1] || $market === $data[2] || $market === $data[3]) {
            $('.data').show();
        }
        // Show Region for BA/FG/IC/NS
        if ($market === 'BA' ||...