JSFiddle - React, Tailwind, and code Playground

by Gary Stubbenhagen

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/devicons/1.8.0/css/devicons.min.css">
<div class="container">
  <div class="col-sm-10 col-sm-offset-1">
    <form data-form-step="medium">
      <div class="form-group has-feedback">
        <label class="control-label" for="url">Landing Page</label>
        <input class="form-control" type="text" placeholder="https://www.example.com/page/" id="url">
        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
      </div>
      <div class="form-group">
        <label class="control-label" for="medium">Marketing Channel</label>
        <div class="list-group" id="medium">
          <a class="list-group-item" href="#" data-medium="display">
            <i class="fa fa-image fa-fw"></i> Display Advertising
          </a>
          <a class="list-group-item" href="#" data-medium="email">
            <i class="fa fa-envelope fa-fw"></i> Email
          </a>
          <a class="list-group-item" href="#" data-medium="cpc">
            <i class="fa fa-search fa-fw"></i> Paid Search
          </a>
          <a class="list-group-item" href="#" data-medium="social">
            <i class="fa fa-hashtag fa-fw"></i> Social Media
          </a>
          <a class="list-group-item" href="#" data-medium="partner">
            <i class="fa fa-share fa-fw"></i> Referral Partnership
          </a>
          <a class="list-group-item" href="#" data-medium="other-advertising">
            <i class="fa fa-newspaper-o fa-fw"></i> Other Advertising
          </a>
          <a class="list-group-item" href="#" data-medium="document">
            <i class="fa fa-file-pdf-o fa-fw"></i> Document
          </a>
          <a...

CSS

body{
  padding: 10px;
}

#otherNetwork {
  display: none;
}

#dcWarning {
  display: none;
}

#googleWarning {
  display: none;
}

output {
  word-wrap: break-word;
}

JavaScript

$(function() {

  // UTM vars defined
  var medium = '';
  var source = '';
  var campaign = '';
  var content = '';
  var term = '';
  var affiliateID = '';

  // URL vars defined
  var url = '';
  var trackedURL = '';

  // Social Accounts
  var socialAccounts = {
    twitter: {
      twitter: 'Other/Unknown',
      twuk: 'UK',
      twus: 'US',
      twaus: 'AU',
      twwf: 'JC'
    },
    facebook: {
      facebook: 'Other/Unknown',
      fb: 'UK',
      fbus: 'US',
      fbaus: 'AU'
    },
    linkedin: {
      linkedin: 'Other/Unknown',
      liuk: 'UK',
      lius: 'US'
    },
    wechat: {
      wechat: 'Any'
    }
  };
  
  // Track URL
  $('#trackURL').click(function(e){
  	e.preventDefault();
    
    medium = 'utm_medium='+encodeURI(medium);
    source = '&utm_source='+encodeURI(source);
    campaign = '&utm_campaign='+encodeURI(campaign);
    if(content.length > 0){
    	content = '&utm_content='+encodeURI(content);
    }
    if(term.length > 0){
    	term = '&utm_term='+encodeURI(term);
    }
    if(affiliateID.length > 0){
    	affiliateID = 'ID='+affiliateID;
      trackedURL = url+'?'+affiliateID+'&'+medium+source+campaign+content+term;
    }else{
    trackedURL = url+'?'+medium+source+campaign+content+term;
    }
    
    $('output').html("<a href='"+trackedURL+"' target='_blank'>"+ trackedURL +"</a>");
    
  });
	
  // Campaign Set
  $('#campaign').change(function(){
  	var campVal = $(this).val();
    if(campVal.length>0){
    	campaign = encodeURI(campVal);
      $(this).parent().removeClass('has-error').addClass('has-success');
      $(this).siblings('span').removeClass('glyphicon-remove').addClass('glyphicon-ok');
      enableButton([campaign]);
      }else{
      $(this).parent().removeClass('has-success').addClass('has-error');
      $(this).siblings('span').removeClass('glyphicon-ok').addClass('glyphicon-remove');
      }
  });
  
  // Keyword Set
  $('#term').change(function() {
    if ($(this).val().length > 0) {
      term =...